命令操作

• 安裝腳手架(全局安裝)：npm install vue-cli -g

• 初始化項目(創(chuàng)建項目)：vue init webpack 項目名稱(不能是中文)，或vue init webpack .

• 進入工程項目：cd 項目名稱

• 安裝項目依賴(最好不要用cnpm)：npm install

• 安裝 vue 路由模塊vue-router和網(wǎng)絡請求模塊vue-resource(根據(jù)需要安裝)：cnpm install vue-router vue-resource --save

• 啟動項目：npm run dev ==> npm run dev命令實際上運行的是node ./build dev-server.js
  修改端口運行(默認端口8080)：PROT=6666 node ./build dev-server.js

• 填坑(以下坑可能由于 vue2.0 導致其他相關(guān)編譯打包工具沒更新導致的)
  這些坑是由于 npm 不是最新的版本3.10.2， 用 npm 3.9.5就會出現(xiàn)以下坑。解決辦法: 請運行以下命令:npm update -g

    報錯==>
    Error: Cannot find module 'opn'
    Error: Cannot find module 'webpack-dev-middleware'
    Error: Cannot find module 'express'
    Error: Cannot find module 'compression'
    Error: Cannot find module 'sockjs'
    Error: Cannot find module 'spdy'
    Error: Cannot find module 'http-proxy-middleware'
    Error: Cannot find module 'serve-index'

若是是老版本的 vue-cli 還可能報其他錯誤，需要更新一下 vue-cli，執(zhí)行命令：npm update vue-cli

之后可以查看一下當前全局 vue-cli 的版本，執(zhí)行命令：npm view vue-cli

安裝一下這個依賴到工程開發(fā)環(huán)境：
cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再啟動項目，報錯==>
    ERROR in ./src/main.js
    Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    @ multi main
    ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
    Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
    @ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
    @ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080

安裝一下 babel-runtime：cnpm install babel-helpers --save-dev

    啟動項目，再次報錯==>
    Module build failed: Error: Cannot find module 'babel-helpers'
    Module build failed: Error: Cannot find module 'babel-traverse'
    Module build failed: Error: Cannot find module 'json5'
    Module build failed: Error: Cannot find module 'babel-generator'
    Module build failed: Error: Cannot find module 'detect-indent'
    Module build failed: Error: Cannot find module 'jsesc'

找不到依賴那就再安裝一下：
cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不寫了，請把全部把舊的環(huán)境全部清除，更新到最新版本

• 解決辦法概述：
  如果遇到Module build failed: Error: Cannot find module '模塊名'
  那就安裝
  cnpm install 模塊名 --save-dev(關(guān)于環(huán)境的，表現(xiàn)為npm run dev 啟動不了)
  cnpm install 模塊名 --save(關(guān)于項目的，比如main.js，表現(xiàn)為npm run dev 成功之后控制臺報錯)
  比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

• 終于可以啟動項目了
  輸入完命令會自動啟動瀏覽器，如果默認打開 IE 不行 :npm run dev

腳手架目錄結(jié)構(gòu)說明

node_modules:整個項目以來的文件

build ：配置文件
    webpack.base.conf.js中的alias定義了import Hello from '@/components/Hello'中的@，就是src

config:配置文件

src:源碼目錄，開發(fā)代碼(我們寫的代碼放在該文件夾里，其他的一般不動)
src/assets:放一些第三方庫和靜態(tài)資源文件
src/components:存放開發(fā)好的組件(重要)
src/router:路由配置文件夾
src/app.vue:整個項目的根組件
src/main.js:項目的js入口文件==>
    import Vue from 'vue'//導入vue模塊
    import App from './App'//導入app.vue文件
    import router from './router'//導入router文件夾中的index.js
    
static:靜態(tài)，放圖片什么的
static/.babelrc:關(guān)于ES6的一些配置
static/.editorconfig:關(guān)于編輯器的一些配置
static/.gitignore:git版本管理控制工具忽略的文件(重要)
static/.postcssrc.js：瀏覽器前綴
    
index.html:項目入口

組件的使用：
1.使用import命令，將組件引入
2.在components中注冊引入的組件
3.使用標簽調(diào)用(標簽使用駝峰寫法)

注意點：
1.一個組件下只能有一個并列的 div
2.數(shù)據(jù)要寫在 return 里面而不是像文檔那樣子寫
錯誤的寫法：
data: {
message: 'Hello Vue!
}
正確的寫法：
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}

vue腳手架路由：

歡迎界面：http://localhost:8080/#/

路由相關(guān)：
    1.定義路由的跳轉(zhuǎn)鏈接 <router-link to="跳到的位置" tag="以什么標簽顯示" active-class="路由激活時的類名"></router>
    2.路由激活后組件顯示的位置 <router-view></router-view>
    3.跳到哪兒，顯示什么？在路由的配置文件中定義
        .src/router/index.js

子路由(嵌套路由)：

路由參數(shù)：
    1.配置src/router/index.js文件
        {
            path:'/article/:index',
            component:Article
        }
    2.參數(shù)傳遞
        <router-link to="/article/12312">看文章</router-link>
        
        附加：<router-link v-for="(item,index) in list" :to="{path:'/article/'+index}">動態(tài)參數(shù)</router-link>
        
    3.在Article組件中得到參數(shù)數(shù)據(jù)
        this.$route.params.index
    
    小結(jié)==>
        12312這個數(shù)據(jù)會傳給'/article/:index'中的index,
        this.$route.params.index中的index是讀取'/article/:index'中的index

history歷史模式：
http://localhost:8080/#/article
應該是去掉#,
添加mode: 'history'后，http://127.0.0.1:8080/article