🐶 init

Author: zanjs

.gitignore

@@ -0,0 +1,7 @@
+dist
+node_modules
+bower_components
+.idea
+*.swp
+.DS_Store
+.DS_Store?

README.md

@@ -0,0 +1,19 @@
+##vue+gulp+webpack 单页面组件开发
+######网络问题 开发保留了node_modules文件夹
+-----------------------------------
+
+##node环境
+
+    browser-sync
+    webpack
+    gulp
+
+
+##开发命令
+
+    gulp
+
+3
+##源码分析命令
+
+    gulp vue

develop/components/header/index.js

@@ -0,0 +1,6 @@
+require('./style.styl')
+
+module.exports = {
+  template: require('./template.html'),
+  props: ['msg']
+}

develop/components/header/style.styl

@@ -0,0 +1,2 @@
+app-header
+  color #bada55

develop/components/header/template.html

@@ -0,0 +1 @@
+<h1>{{msg}}</h1>

develop/components/pane/index.js

@@ -0,0 +1,7 @@
+require('./style.styl')
+
+module.exports = {
+  template: require('./template.html'),
+  replace: true,
+  props: ['side', 'name']
+}

develop/components/pane/style.styl

@@ -0,0 +1,8 @@
+.pane
+  display inline-block
+  width 300px
+  height 300px
+  box-sizing border-box
+  padding 15px 30px
+  border 2px solid #f3f3f3
+  margin 10px

develop/components/pane/template.html

@@ -0,0 +1,4 @@
+<div class="pane">
+  <p>This is the {{side}} pane!</p>
+  <p>{{name}}</p>
+</div>

develop/main.js

@@ -0,0 +1,91 @@
+// With proper loader configuration you can load,
+// pre-process and insert css directly with require().
+// See webpack.config.js for details.  
+require('./main.styl')
+
+var Vue = require('vue');
+
+var a = Vue.component('user-profile', {
+    template: '<li {{view}}>{{user.name}} {{user.email}} {{user.msg}} {{parents}}</li>',
+    props: ['parents'],
+    data: function() {
+        return {
+            msg: '我的测试'
+        }
+    },
+
+    computed: {
+        msg: {
+            set: function() {
+                alert(2)
+            },
+            get: function() {
+                alert(1)
+            }
+        }
+    },
+
+    compiled: function() {
+        this.$log(this)
+    },
+    created: function() {
+        this.$dispatch('child-created', this)
+    }
+})
+
+
+var app = new Vue({
+    el: '#app',
+    data: {
+        view: 'page-a',
+        users: [{
+            name: 'Chuck Norris',
+            email: '[email protected]'
+        }, {
+            name: 'Bruce Lee',
+            email: '[email protected]'
+        }, {
+            name: 'Bruce Lee',
+            email: '[email protected]'
+        }, {
+            name: '111e',
+            email: '12312312312'
+        }],
+        parents: 'Aaron'
+    },
+
+    created: function() {
+        this.$on('child-created', function(child) {
+            // console.log(child)
+        })
+    },
+
+    components: {
+        // define the main pages as async components.
+        'page-a': function(resolve) {
+            require(['./views/a'], resolve)
+        },
+        'page-b': function(resolve) {
+            require(['./views/b'], resolve)
+        }
+    }
+})
+
+
+console.log(app)
+
+
+/**
+ * Some really crude routing logic here, just for
+ * demonstration purposes. The key thing to note here is
+ * that we are simply changing the view of the root app -
+ * Vue's async components and Webpack's code splitting will
+ * automatically handle all the lazy loading for us.
+ */
+
+function route() {
+    app.view = window.location.hash.slice(1) || 'page-a'
+}
+
+window.addEventListener('hashchange', route)
+window.addEventListener('load', route)

develop/main.styl

@@ -0,0 +1,4 @@
+html, body
+  font-family Helvetica, Arial, sans-serif
+
+