🐶 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
+
+ 

develop/views/a/a.styl

@@ -0,0 +1,11 @@
+.view
+  transition all .4s ease
+  position absolute
+  &.expand-enter
+    opacity 0
+    -webkit-transform translate3d(100px, 0, 0)
+    transform translate3d(100px, 0, 0)
+  &.v-leave
+    opacity 0
+    -webkit-transform translate3d(-100px, 0, 0)
+    transform translate3d(-100px, 0, 0) 

develop/views/a/index.js

@@ -0,0 +1,58 @@
+require('./a.styl')
+
+var Vue = require('vue');
+
+Vue.transition('expand', {
+
+    beforeEnter: function(el) {
+        console.log('beforeEnter')
+        // el.textContent = 'beforeEnter'
+    },
+    enter: function(el) {
+         console.log('enter')
+        // el.textContent = 'enter'
+    },
+    afterEnter: function(el) {
+         console.log('afterEnter')
+        // el.textContent = 'afterEnter'
+    },
+    enterCancelled: function(el) {
+         console.log('enterCancelled')
+        // handle cancellation
+    },
+
+    beforeLeave: function(el) {
+        console.log(222)
+        // el.textContent = 'beforeLeave'
+    },
+    leave: function(el) {
+        // el.textContent = 'leave'
+    },
+    afterLeave: function(el) {
+        // el.textContent = 'afterLeave'
+    },
+    leaveCancelled: function(el) {
+        // handle cancellation
+    }
+})
+
+
+
+module.exports = {
+    template: require('./template.html'),
+    replace: true,
+    data: function() {
+        return {
+            msg: 'This is page A.',
+            leftName: 'Bruce Lee',
+            rightName: 'Chuck Norris'
+        }
+    },
+    compiled: function() {
+        this.$emit('data-loaded')
+    },
+    components: {
+        'app-header': require('../../components/header'),
+        'app-pane': require('../../components/pane')
+    }
+}

develop/views/a/template.html

@@ -0,0 +1,5 @@
+<div class="view" v-transition="expand">
+    <app-header msg="{{msg}}"></app-header>
+    <app-pane side="left" name="{{leftName}}"></app-pane>
+    <app-pane side="right" name="{{rightName}}"></app-pane>
+</div>

develop/views/b/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+    template: require('./template.html'),
+    replace: true,
+    compiled: function() {
+        this.$emit('data-loaded')
+    }
+}

develop/views/b/template.html

@@ -0,0 +1,4 @@
+<div class="view" v-transition>
+  <h1>This is page B.</h1>
+  <p>I'm... a bit less complicated.</p>
+</div>