http://v1-cn.vuejs.org/guide/

【1】. vue-cli 【项目不完整，跳过】

https://github.com/vuejs/vue-cli vue-cli-master.zip

全局安装 vue-cli npm install -g vue-cli

C:\Users\Administrator\AppData\Roaming\npm\node_modules

npm 配置

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

【2】. vue-loader + webpack

https://github.com/vuejs-templates/webpack

官方的运行不了,看docs文档

创建自己的项目 myvue

my-webpack

vue init webpack#1.0 myvue -y // 默认都yes

cd myvue

npm install

npm run dev

【3】.标准 webpack 是一个模块打包工具。在开发中，它把一堆文件中每个都作为一个模块处理，找出它们间的依赖关系，并打包成待发布的静态资源

http://vuejs-templates.github.io/webpack/

【4】vue-loader vue-loader 是一个加载器，能把 Vue 单文件组件转化成JavaScript模块

http://vue-loader.vuejs.org/en/ 文档不全 针对*.vue 单文件组件各个模块的加载  

      <template lang='jade'></template>   <style lang='sass'></style> <script lang='coffee'></script>

 【5】vue-router 路由, this.$router.go()   https://github.com/vuejs/vue-router/tree/1.0  官方文档，只有lazy.md 应用到了，其他的都不一样

 【6】 vue-resource    https://github.com/pagekit/vue-resource/tree/master  ajax

【7】vuex

vuex store(仓库),包含state(状态) vue从store读取状态

改变store中state状态的方法 ，通过mutations(变更)

mutation里面定义的函数必须是同步函数，涉及到API调用的逻辑要放到Action进行，因为Action是可以定义异步函数的。

vue-cli + vuex

 npm install vuex@1.0.0 --save

app.vue

Display.vue

Increment.vue

src/vuex/store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {  count: 0   // 放置初始状态}const mutations = {  // 放置我们的状态变更函数  INCREMENT (state, amount) {    state.count = state.count + amount  }}export default new Vuex.Store({  state,  mutations})

src/vuex/actions.js

export const incrementCounter = function ({ dispatch, state }) {  dispatch('INCREMENT', 1)     // action 使用dispatch调用 store中的mutations对象 }

src/vuex/getters.js  

export const getCount = state => state.count   // 直接get  store中的state对象

 【8】.vux

vue cli + vux 界面

npm install vux@0.1.3 --save        // --save 生产环境需要用到的依赖

npm install less@2.7.1 --save-dev   // --save-dev 开发环境需要用到的依赖

npm install less-loader@2.2.3 --save-dev

main.js

require('./assets/vux.css')  // 复制 vux.css到assets文件夹下

xx.vue

     
      btn
     components: {      XButton: require('vux/src/components/x-button')    }

 【9】 vue 基本依赖包     指定如下版本，不同版本的依赖包可能还会依赖其他依赖包

"devDependencies": {    "babel-core": "^6.3.17",    "babel-loader": "^6.2.0",    "babel-plugin-transform-runtime": "^6.3.13",    "babel-preset-es2015": "^6.3.13",    "babel-runtime": "^5.8.34",    "css-loader": "^0.23.0",    "vue-hot-reload-api": "^1.2.2",    "vue-html-loader": "^1.0.0",    "vue-style-loader": "^1.0.0",    "vue-loader": "^7.2.0",    "webpack": "^1.12.9",    "webpack-dev-server": "^1.14.0"  },  "dependencies": {    "vue": "^1.0.13"  }

 【10】 vue-cli + vue-router

npm install vue-router@0.7.13 --save-dev

App.vue

main.js

import Vue from 'vue'import App from './App'import Router from 'vue-router'import VueResource from 'vue-resource'Vue.use(Router)Vue.use(VueResource)const router = new Router()router.map({  '/hello': {    component: require('./components/Hello')  },  '/second': {    component: require('./components/Second')  }})router.redirect({  '*': '/hello'})router.start(App, '#app')new Vue({  el: 'body',  components: {App}})

index.html