建立vue專案流程

1.安裝node.js 首先檢視一下你的node.js是否安裝成功，如果安裝成功第一步可以略過。 驗證是否安裝成功 node -v #檢視nodejs版本號 比如：v8.4.0 如果未安裝，windows 在官網下載安裝包，直接安裝即可 nodejs中文網：http://nodejs.cn/

2.安裝webpack環境 npm install webpack -g

3.安裝vue-cli npm install vue-cli -g

4.建立vue專案 命令： vue init webpack

1. Project name 專案名稱

2. Project description 專案的描述

3. Author 作者

4. Install vue-router 是否安裝vue-router y

5. Use ESLint to lint your code 是否使用eslint js程式碼規範 n

6. Setup unit tests 是否使用單元測試 n

7. Setup e2e tests with Nightwatch? 是否使用端對端測試 n

5.安裝依賴包 npm i 或者 yarn install

6.執行專案 npm run dev 或 npm start 瀏覽器輸入的http://localhost:8080，這個時候 你就能在瀏覽器中看到這個效果 補充：vue 專案結構介紹

1. build/ webpack配置引數

2. config/ 是vue專案的配置檔案

3. node_modules/ node.js 模組包

4. src/ 原始碼 我們寫的程式碼 大都放在這個檔案下

5. static/ 靜態資源 （只供index.html使用）

6. .babelrc babel的編譯引數

7. .gitignore git 忽略的配置檔案

8. index.html 專案入口（單入口專案的入口）

9. package.json node.js專案的配置檔案

src/ 工作目錄介紹

1. assets/ 靜態資源 （只供src下檔案使用）

2. components/ 元件

3. router 路由

4. App.vue 根元件

5. main.js js入口檔案

單檔案元件 App.vue 就是一個單檔案元件 訪問流程

1. index.html webpack 通過 main.js生成的 打包生成 app.js

2. main.js 載入 根元件 App.vue 載入了路由 src/router/index.js

3. 配置路由

外掛

外掛通常會為 Vue 新增全域性功能。

1. 開發外掛（瞭解） 外掛種類： (1) 新增全域性方法或者屬性，如: vue-custom-element (2) 新增全域性資源：指令/過濾器/過渡等，如 vue-touch (3) 通過全域性 mixin 方法新增一些元件選項，如: vue-router (4) 新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。 (5) 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

Vue.js 的外掛應當有一個公開方法 install

2. 使用外掛 通過全域性方法 Vue.use() 使用外掛： Vue.use(外掛)