基于Vue CLI 3快速构建一个vue项目

关于版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Vue CLI需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装vue-cli

npm install -g @vue/cli

或者

yarn global add @vue/cli

版本查看

vue --version

创建项目

1. 创建一个项目hello-world
   vue create hello-world
2. 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
3. vue create命令包含大量的选项：

          用法：create [options] 
          -p, --preset        忽略提示符并使用已保存的或远程的预设选项
          -d, --default                   忽略提示符并使用默认预设选项
          -i, --inlinePreset        忽略提示符并使用内联的 JSON 字符串预设选项
          -m, --packageManager   在安装依赖时使用指定的 npm 客户端
          -r, --registry             在安装依赖时使用指定的 npm registry
          -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
          -n, --no-git                    跳过 git 初始化
          -f, --force                     覆写目标目录可能存在的配置
          -c, --clone                     使用 git clone 获取远程预设选项
          -x, --proxy                     使用指定的代理创建项目
          -b, --bare                      创建项目时省略默认组件中的新手指导信息
          -h, --help                      输出使用帮助信息
   

4. 也可以通过`vue ui`命令，使用ui界面来管理项目
##安装插件

>   有时候项目已经创建完成了，但是需要加入插件，就可以使用
>
>   `vue add @vue/eslint`
>
>   在项目中添加插件，同样，也可以使用`vue ui`来管理插件
###提示：
>`vue add`的设计意图是为了安装和调用 `Vue CLI` 插件。这不意味着替换掉普通的 `npm` 包。对于这些普通的` npm` 包，你仍然需要选用包管理器。
>
>命令`vue add @vue/eslint`会被vue-cli解析为`vue add @vue/cli-plugin-eslint`，`vue add`的目的是方便用户使用`vue-cli`插件，而不是第三方插件。`Vue CLI`使用了一套基于插件的架构，`vue CLI` 使用了一套基于插件的架构。如果你查阅一个新创建项目的`package.json`，就会发现依赖都是以 `@vue/cli-plugin- `开头的。
##安装`vue-router` 和 `vuex `
>   `vue-router` 和 `vuex `的情况比较特殊——它们并没有自己的插件，但是你仍然可以这样添加它们
>
>  ` vue add router`
>`vue add vuex`
-  如果一个插件已经被安装，你可以使用 vue invoke 命令跳过安装过程，只调用它的生成器。这个命令会接受和 vue add 相同的参数。

##运行项目
> `npm run serve`