主要内容：
- 零配置启动/打包.vue文件
- 详细施工流程
- 重点推荐：使用图形界面创建/管理/运行项目
安装方式：
卸载旧版本：
如果您事先全局安装了旧版本的vue-cli（1.x或2.x），则需要先卸载它：
npm 卸载 vue-cli -g
节点版本要求：
3.x需要Node.js 8.9或更高版本（推荐8.11.0+），点击此处安装node
大多数人都安装了node，使用以下命令行检查您的node版本：
节点-v
如果您的版本不够，可以使用以下命令行将Node版本更新到最新稳定版本：
npm install -g n //安装模块 该模块专门用于管理node.js版本 n stable // 更新你的节点版本
mac下，更新版本时，如果提示权限不足：
sudo n stable // 我遇到过
安装vue-cli：
npm install -g @vue/cli //安装cli3.x vue --version // 检查版本是否为3.x
如果cli3.x用起来不舒服，cli3还可以使用2.x模板：
npm install -g @vue/cli-init // 安装此模块 // 可以使用2.x模板：vue init webpack my-project
零配置启动/打包.vue文件：
安装扩展：
npm install -g @vue/cli-service-global
安装扩展后，可以找到一个文件夹并创建一个.vue文件，如下所示，然后运行它：
vueserve App.vue // 启动服务vue build App.vue // 打包生产环境包，用于部署
如下图，只需一个.vue文件即可快速启动一项服务：
如图，服务启动时会生成一个node_modules包。经过一点测试，该服务支持ES6语法和热更新，打包时会生成dist文件夹。 （一个新的test.vue文件只会有一个node_modules/dist文件夹）
这个功能非常棒，非常适合开发库、组件、制作一些小demo等！
第一次创建项目：
1。命令行：
vue 创建 hello-cli3
hello-cli3 是文件夹的名称。如果不存在，将自动创建该文件夹。如果存在，它将安装在该文件夹中。
与2.x相比，需要手动创建文件夹。这也算是一个小小的优化。
2。选择模板：
一开始只有两个选项：default（默认配置）和Manually select features（手动配置）
默认配置只有babel和eslint。其他的需要单独配置，所以我们选择第二个选项手动配置。
每次选择手动配置时，都会询问是否保存配置，就是图中的koro选项。这样，我们以后创建项目的时候，只需要使用原来的配置即可，无需再次配置。 。
3。选择配置：
根据您的项目需求选择配置。空格键为选择和取消，A键为全选
？检查您的项目所需的功能：（按选择， 切换全部， 反转选择） // 检查项目所需的功能：（按 选择， 切换全部， 反转选择） >( ) TypeScript // 支持使用TypeScript编写源码 ( ) 渐进式 Web 应用程序 (PWA) 支持 // PWA 支持 ( ) Router // 支持 vue-router ( ) Vuex // 支持vuex ( ) CSS 预处理器 // 支持 CSS 预处理器。 ( ) Linter / Formatter // 支持代码风格检查和格式化。 ( ) 单元测试 // 支持单元测试。 ( ) 端到端测试
4。选择css预处理器：
如果您选择了 CSS 预处理器选项，系统会要求您选择此
？选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）： // 选择 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）： > SCSS/SASS 较少的 手写笔
5。是否使用路由历史模式：
这里我建议选择否，这样就可以打包扔到服务器上直接使用了。如果以后想用的话，也可以自己打开。
如果选择yes，则需要在服务器端进行设置。
路由器使用历史模式？ （需要正确的服务器设置才能在生产中进行索引回退） // 使用历史模式的路由？ （需要正确的服务器设置才能在生产环境中建立索引）
6。选择Eslint代码验证规则：
> 仅具有错误预防功能的 ESLint ESLint + Airbnb 配置 ESLint+标准配置 ESLint + Prettier
7。选择何时执行代码规则检测：
建议保存后检查。当你做出承诺时，可能已经积累了很多问题。
我之前写过一篇关于VsCode保存时自动修复Eslint错误的文章。我推荐它。
？选择其他 lint 功能：（按选择， 切换全部， 反转选择） >( ) Lint on save // 保存时测试 ( ) Lint and fix on commit // 修复和提交时检查
8。选择端到端测试：
？选择E2E测试方案：（使用箭头键） ❯ Cypress（仅限 Chrome） Nightwatch（基于硒）
9。 babel、postcss、eslint配置文件放在哪里：
通常我们选择独立放置，让package.json更干净
？您更喜欢在哪里放置 Babel、PostCSS、ESLint 等的配置？ （使用箭头键） > 在专用配置文件中 // 独立文件放置 在package.json中 // 放入package.json中
10。是否保存配置：
将此保存为未来项目的预设吗？ (Y/n) // 是否要记录下来以便下次继续使用此配置？ // 选择保存后，会要求你写一个配置名称：保存预设为：名称 // 这样下次进入配置就可以直接使用你的配置了
11。下载依赖项
12。 webpack配置的目录缺失：
我们来看看新项目的结构（下图）。你会发现缺少2.x webpack配置目录，即没有build和config文件夹：
这种方法的好处是对初学者非常友好。一开始你不会有两个文件夹和一堆文件，这会让你感觉头大。
引用和复制别人的配置时也很方便。把文件复制过去就可以了。
在自定义webpack的配置之前，我们需要在根目录下新建一个vue.config.js文件。应将对象导出到文件中，然后进行配置。详情请参考官方文档
// vue.config.js
模块. 导出 = {
// 选项...
}
还有一些小改动：static文件夹改为public，router文件夹改为单个文件（我以前一直都是这样做的，呵呵）。
13。启动项目：
启动项目：npm runserve // 不是之前的npm run dev
打开http://localhost:8080:
使用图形界面创建/管理/运行项目：
启动图形界面
vue ui
这是一个全局命令，可以在任何文件夹中打开
界面（下图），重要物品可以收藏（置顶）：
创建项目并导入项目：
选择目录后，点击下面的Import，导入工程。
创建项目并填写文件夹名称：
然后只需选择预先保存的设置即可。非常方便。推荐使用图形界面创建工程：
项目管理：
当我们点击hello-cli3项目后，就会进入项目管理界面
1。仪表板：
- 这个仪表板主要是为了我们方便而设置的
- 您可以点击右上角的按钮来添加/移动这些功能选项。
2。 vue-cli3.x插件：
Vue-cli3插件功能，详细了解官方文档
cli3插件安装流程：
3。项目依赖
直接在图形界面上管理依赖，非常舒服！
安装依赖时，记得选择开发依赖/运行依赖！
4。项目配置
可以在cli上进行一些配置，修改Eslint规则：
5。使命：
用于运行项目，点击直接运行，无需再输入命令！
可以清楚地看到每个模块的使用时间，以便我们有针对性地进行优化：
build打包项目：这个主要展示图表功能，比之前的2.x报表生成更直观，超级给力！
6。其他
夜间风格的界面，我比较喜欢这个界面
直接打开编辑器，棒极了！
还有一些乱七八糟的按钮
可以说是非常严重了。希望您看完后有所收获，尽快尝试新版本的vue-cli！
总结
以上是小编给大家介绍的超详细的Vue-cli3.0使用教程。希望对您有所帮助。如果您有任何疑问，请给我留言，编辑会及时回复您。 。也非常感谢大家对来客网网站的支持！
