vue-cli的使用指南

vue-cli 2.0

安裝vue-cli

npm install -g vue-cli

建立一個項目模板

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

template-name:css

  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

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

安裝完成後運行如下命令查看安裝是否成功:webpack

vue --version

建立一個項目myProject

vue create myProject

查看幫助

vue create --help

使用圖形化界面

你也能夠經過vue ui命令以圖形化界面建立和管理項目:web

vue ui

在3.x使用2.x的模板

安裝一個全局橋接工具拉取2.x的模板vue-router

npm install -g @vue/cli-init
vue init webpack myProject

插件

Vue CLI 使用了一套基於插件的架構,插件能夠修改 webpack 的內部配置,也能夠向 vue-cli-service 注入命令。在項目建立的過程當中,絕大部分列出的特性都是經過插件來實現的。vuex

插件安裝

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
相關文章
相關標籤/搜索