vue-cli的使用指南
阿新 • • 發佈:2018-12-12
vue-cli 2.0
安裝vue-cli
npm install -g vue-cli
建立一個專案模板
vue init <template-name> <project-name>
template-name:
- wepack 功能齊全的Webpack + vue-loader設定,具有熱過載,linting,測試和css提取功能。
- webpack-simple 一個簡單的Webpack + vue-loader設定,用於快速原型設計
- browserify 全功能的Browserify + vueify設定,具有熱過載,linting和單元測試功能。
- browserify 一個簡單的Browserify + vueify設定,用於快速原型設計
- pwa 基於vue webpack 模板的pwa模板
- simple 最簡單的vue單頁面專案
用例:
vue init webpack projectName(一般情況下都是用webpack模板)
完整用例-初始化一個vue的webpack專案myProject
1.安裝模板
vue init webpack myProject
2.進入myProject資料夾
cd myProject
3.安裝專案依賴包
npm install
4.啟動專案
npm run dev
vue-cli 3.0
安裝 @vue/cli
npm install -g @vue/cli
安裝完成後執行以下命令檢視安裝是否成功:
vue --version
建立一個專案myProject
vue create myProject
檢視幫助
vue create --help
使用圖形化介面
你也可以通過vue ui
命令以圖形化介面建立和管理專案:
vue ui
在3.x使用2.x的模板
安裝一個全域性橋接工具拉取2.x的模板
npm install -g @vue/cli-init
vue init webpack myProject
外掛
Vue CLI 使用了一套基於外掛的架構,外掛可以修改 webpack 的內部配置,也可以向 vue-cli-service 注入命令。在專案建立的過程中,絕大部分列出的特性都是通過外掛來實現的。
外掛安裝
vue add @vue/eslint
# 等價於
vue add @vue/cli-plugin-eslint
你也可以基於一個指定的 scope 使用第三方外掛。例如如果一個外掛名為 @foo/vue-cli-plugin-bar,你可以這樣新增它:
vue add @foo/bar
你可以向被安裝的外掛傳遞生成器選項 (這樣做會跳過命令提示):
vue add @vue/eslint --config airbnb --lintOn save
vue-router 和 vuex 的情況比較特殊——它們並沒有自己的外掛,但是你仍然可以這樣新增它們:
vue add router
vue add vuex