1. 程式人生 > >vue-cli的使用指南

vue-cli的使用指南

vue-cli 2.0

安裝vue-cli

npm install -g vue-cli

建立一個專案模板

vue init <template-name> <project-name>

template-name:

  1. wepack 功能齊全的Webpack + vue-loader設定,具有熱過載,linting,測試和css提取功能。
  2. webpack-simple 一個簡單的Webpack + vue-loader設定,用於快速原型設計
  3. browserify 全功能的Browserify + vueify設定,具有熱過載,linting和單元測試功能。
  4. browserify 一個簡單的Browserify + vueify設定,用於快速原型設計
  5. pwa 基於vue webpack 模板的pwa模板
  6. 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