1. 首先安裝node,推薦偶數版本;好了之後檢查一下: node -v;出現版本好即為安裝成功;win10家庭版本的msi版本的時候出現無法打開,更別說安裝,可以自行百度;

　　2.nmp install vue-cli -g; ----->>vue -V;出現版本號就是安裝成功了;

　　3.cd 到指定目錄; vue init webpack 項目名稱; 一些提示信息一一不說了;安裝成功之後會有提示:一般按照他的提示步驟就可以了,cd 項目文件夾,

npm install(這個是安裝 packjson.json的依賴,非常重要) , 最後運行 npm run dev; 會自動在8080端口打開網頁,那麽環境這一步是成功了;

4.介紹一下幾個非常中重要的文件(夾):
config目錄下的index.js是配置,node_modules下全部都是所要依賴模塊的文件夾;src是本地資源;比如我們要編寫的文件;其中main.js是入口文件;

　　5.下面介紹模塊化引入vue文件,好記性不如爛筆頭:

項目目錄部分:

比如要在App.vue中引入其他模塊;

import componentA @/components/componentA //下圖ruter-view標簽僅僅表示顯示,有組件不一定能夠顯示,必須要router-view一下;當前app.vue為默認根模塊;

在Banana中應該這樣: <一個標準的vue文件應該包括 下面三種大類的標簽> 其中name屬性必不可少;

註意了:這裏面的不需要聲明一個 變量=new Vue({ }) 之類的,這個文件本身就代表一個實例了,在export default 內中 其實就是一個 vue字面量對象的描述,可以這樣認為;

關於路由傳參數:(以下是main.js), 這裏有一個坑;

用 webpack vue-cli 自動構建項目後, vue-router模塊,居然要不匹配,為什麽說不匹配呢, 因為import 這個模塊的時候 是 import router from ‘./router‘;明顯不對,用cli方式 new的時候明顯不是構造函數的 大小樣式,

先也不完全說是不是首字母大寫的,打開原文件改成大寫也不對: 總結就是用 npm install vue-cli之後再重新nmp install vue-router;

廢話少說: 這裏關鍵是正確引入路由,正確配置路由(構建路由對象),每一個路由給他一個name屬性方便使用路由,在者,路由傳參中, path 最後的冒號可以寫可以不寫,前提是(以下是組件 componentA):

<router-link>中 params:{}這個對象中寫了, 寫與不寫的區別就是 不寫 在url地址欄中顯示或者不顯示; 但是在子組件中用 $router.params都可以找到;

以下為Apple子組件: 也可取出來 {{$route.params.color}}

Vue cli構建