一、介紹
Vue是前端三大框架之一，另外兩個分別是react、angular。其設計模式是MVVM的設計架構模式。
二、安裝
2.1 node.js安裝
在安裝vue之前的時候，需要安裝node.js。去官網下載http://nodejs.cn/，然后將其添加到系統環境中，在使用如下的指令進行查詢
# 查詢指令
node -v
結果
2.2 配置鏡像源
配置鏡像源可以加快安裝的速度，使用如下的指令進行添加，類似於Python中的pip配置。
# 在npm中配置鏡像源的命令
npm config set registry https://registry.npm.taobao.org # 查看配置的鏡像源
npm config get registry
結果
2.3 安裝cnpm
使用如下的指令來安裝cnpm
# 安裝cnpm，可以安裝一些vue需要的模塊
npm install -g cnpm # -g是全局變量
2.4 安裝vue
使用如下的指令安裝vue
# 使用npm來安裝vue
npm install vue
2.5 vue-cli的安裝
使用如下指令安裝vue-cli
# 使用cnpm來安裝vue需要的腳手架
cnpm install --global vue-cli
三、使用
3.1 初始化項目
使用如下指令初始化項目
# 初始化vue項目
vue init webpack 項目名稱
3.2 啟動項目
進入項目，使用以下指令啟動項目，會開放一個以8080為端口的網頁
# 進入項目
cd 項目名稱 # 使用如下指令啟動vue
npm run dev
四、目錄文件
4.1 項目總目錄
Vue具有以下的目錄結構
# build
-- webpack的配置文件 # config
-- 項目本身的配置文件 # node_modules
-- 依賴模塊 -- 注：如果是自己從github上面clone別人的項目，模塊出錯，就刪除這個文件重新配置 # src
-- 工程文件，項目工程都是在這里完成的 # static
-- 靜態文件 # test
-- 可選文件，在初始化項目中給出的，用於測試項目是否可行
結果
4.2 src項目
src的項目文件結構如下
# assets
-- 放置一些logo圖片與static文件夾不同，static中存放靜態的圖片如背景圖片之類的 # components
-- 組件，編寫的具體的vue實例 # router
-- 設置路由，每個頁面有一個具體的路由及其指向的服務地址 # APP.vue
-- 最頂層的vue組件和components中的vue一樣，只是這個是最高一級的vue。 -- 通過index.html進行訪問，也就是主頁面，其他的是templates # main.js
-- 配置一些關於APP.vue的內容，如ajax請求等
結果
4.3 文件之間的關系
整個項目的文件是由packjson.json來構建，包括啟動指令以及構建的目標文件都在這個文件中。文件之間的關系如下模型
packjson.json文件結果
4.3.1 項目的啟動
首先整個項目是由build下的build.js文件創建的，通過webpack來啟動整個項目，包括以下的幾個文件
# webpack.base.conf.js
-- base.conf即基礎的配置信息，包括確定需要啟動的.js文件，也就是main.js # webpack.dev.conf.js
-- 項目的啟動是npm run dev啟動的就是這個dev，其中設定了啟動的.html文件，也就是index.html # webpack.prod.conf.js
-- 配置文件，這個文件是用於建立項目的配置文件
文件的實際目錄
webpack.base.conf.js中配置了啟動的.js文件
webpack.dev.conf.js中配置啟動的.html文件
4.3.2 開發界面的關系
前面簡單介紹了整個文件的目錄結構，這里介紹項目開發時文件之間的調用模型
main.js文件
整個src項目中先加載main.js，通過里面的APP元素，生成一個vue的對象，在將router里面的路由加載進來，結果在app的vue中呈現，因此我們設定了main.js就可以將其他的內容進行一個修改，不在讓其依賴於App的vue，而是依賴於其他vue模塊。
結果
router/index.js文件
main.js中的router是通過router文件映射，而router下的index.js文件則是整個項目連接的關鍵，通過在index.js中設置路徑，將components中的vue文件關聯起來，再在template文件中，使用router-link進行調用，如此我們就可以實現整個頁面的連接。因為每一個router包括以下的幾個重要參數
# path
-- path是用來映射的路徑，調用vue的時候也是調用這個路徑，用於連接界面，連接路由必須與path一致 # name
-- 對應的路由名字 # component
-- 確定該路由具體是從哪個component中來的，確定vue的對象，要與components中的一致
結果
components/xx.vue文件
這個下面就可以具體編寫每一個vue，最后在通過router-link，連接給定的path路徑，就可以調用vue對象。
結果
asserts/xx.xx文件
用於存放一些logo圖片，如web界面的小圖標之類的文件。
結果
五、參考
vue的安裝
https://www.cnblogs.com/tielemao/p/9372234.html
npm換源
https://www.jianshu.com/p/0deb70e6f395
vue官網
https://cn.vuejs.org/index.html
vue建立項目——官網
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create