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