如何快速建立一個VUE專案(介紹專案結構)
建立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
-
Project name 專案名稱
-
Project description 專案的描述
-
Author 作者
-
Install vue-router 是否安裝vue-router y
-
Use ESLint to lint your code 是否使用eslint js程式碼規範 n
-
Setup unit tests 是否使用單元測試 n
-
Setup e2e tests with Nightwatch? 是否使用端對端測試 n
5.安裝依賴包 npm i 或者 yarn install
6.執行專案 npm run dev 或 npm start 瀏覽器輸入的http://localhost:8080,這個時候 你就能在瀏覽器中看到這個效果 補充:vue 專案結構介紹
-
build/ webpack配置引數
-
config/ 是vue專案的配置檔案
-
node_modules/ node.js 模組包
-
src/ 原始碼 我們寫的程式碼 大都放在這個檔案下
-
static/ 靜態資源 (只供index.html使用)
-
.babelrc babel的編譯引數
-
.gitignore git 忽略的配置檔案
-
index.html 專案入口(單入口專案的入口)
-
package.json node.js專案的配置檔案
src/ 工作目錄介紹
-
assets/ 靜態資源 (只供src下檔案使用)
-
components/ 元件
-
router 路由
-
App.vue 根元件
-
main.js js入口檔案
單檔案元件 App.vue 就是一個單檔案元件 訪問流程
-
index.html webpack 通過 main.js生成的 打包生成 app.js
-
main.js 載入 根元件 App.vue 載入了路由 src/router/index.js
-
配置路由
外掛
外掛通常會為 Vue 新增全域性功能。
- 開發外掛(瞭解) 外掛種類: (1) 新增全域性方法或者屬性,如: vue-custom-element (2) 新增全域性資源:指令/過濾器/過渡等,如 vue-touch (3) 通過全域性 mixin 方法新增一些元件選項,如: vue-router (4) 新增 Vue 例項方法,通過把它們新增到 Vue.prototype 上實現。 (5) 一個庫,提供自己的 API,同時提供上面提到的一個或多個功能,如 vue-router
Vue.js 的外掛應當有一個公開方法 install
- 使用外掛 通過全域性方法 Vue.use() 使用外掛: Vue.use(外掛)