使用Vue-cli3.0的超级详细教程[推荐]

主要内容：

用零配置启动/打包a. vue文件。详细的施工过程。主要建议：使用图形界面创建/管理/运行项目安装：

卸载旧版本：

如果您已经提前在全球范围内安装了旧版本的vue-cli (1.x或2.x)，则需要先卸载它：

npm卸载vue-cli -g

节点版本要求：

3.x需要在Node.js 8.9或更高版本中(建议使用8.11.0)。单击此处安装节点。

大多数人已经安装了节点，使用下面的命令行查询你的节点版本：

节点v

如果您的版本不够，可以使用以下命令行将节点版本更新为最新的稳定版本：

Npm install -g n //Install模块此模块专门用于管理node.js//When的不稳定版本更新您的mac版本，如果系统提示您的权限足够节点：

Sudo n stable //遇到了vue-cli:的安装

NPM install-g @ vue/CLI//install cli3.xvue-version//查询版本是否为3 . x如果cli3.x不舒服，cli3也可以使用2.x模板：

Npm install -g @vue/cli-init //安装此模块//，您可以使用2 . x:vue init web pack my-project zero配置的模板来启动/打包a. vue文件：

安装扩展：

在NPM install-g @ vue/CLI-service-global安装了扩展后，您可以找到一个文件夹来创建一个. vue文件，如下例所示，然后运行：

vue service app . vue//启动服务vue build App.vue //打包生产环境的包并部署，如下所示。您只需要一个. vue文件就可以快速启动服务：

如图所示，服务启动时会生成一个node_modules包。经过一点测试，该服务支持ES6语法和热更新，打包时会生成一个dist文件夹。(创建新的test.vue文件时，只有一个node_modules/dist文件夹。)

这是一个很棒的功能，非常适合开发一个库，组件，做一些小演示。

第一次创建项目：

1.命令行：

Vue create hello-cli3hello-cli3是文件夹名称。如果不存在，它将自动创建一个文件夹，如果存在，它将安装在该文件夹中。

与2.x相比，您需要手动创建一个文件夹，这是一个小的优化。

2.选择模板：

开始时只有两个选项：默认值和手动选择功能

只有babel和eslint需要自己重新配置，所以我们选择第二种手动配置。

每次选择手动配置后，都会询问是否保存配置，也就是图中的koro选项，这样我们以后创建项目时只需要使用原来的配置，而不需要重新配置。

3.选择配置：

根据项目需要选择配置，空格键选择取消，A键全选

？检查您的项目所需的功能：(按空格选择，a切换全部，I反转选择)//检查项目所需的功能：(按空格选择，a切换全部，I反转选择)()TypeScript //支持用TypeScript()编写源代码渐进式web app (pwa)支持//pwa支持()Router //支持vue-router () Vuex //支持Vuex()CSS Pre processors//支持CSS预处理器。()interr/formatter//支持代码样式检查和格式设置。()单元测试//支持单元测试。()E2E测试4。选择css预处理器：

如果您选择Css预处理器选项，您将被要求选择这个选项

？选择一个CSS预处理器(默认支持PostCSS、autorefixer和CSS模块)://选择CSS预处理器(默认支持post CSS、autorefixer和CSS模块):SCSS/SASS LESS Stylus5。是否使用路由的历史模式：

这里建议大家选择No，这样打包扔在服务器上就可以直接使用了。如果以后想用，可以再打开。

如果选择是，则需要由服务器设置。

路由器使用历史模式？(需要为生产中的索引回退进行适当的服务器设置)//路由使用历史模式？(在生产环境中，索引需要适当的服务器设置。) 6.选择Eslint代码验证规则：

仅带有错误预防的Eslint Airbnb配置eslint标准配置eslint更漂亮7。选择何时检测代码规则：

建议选择保存并检查。到提交时，可能已经积累了许多问题。

我写了一篇关于保存VsCode时自动修复Eslint错误的文章。

？挑选其他lint功能：(按空格键选择，a切换全部，I反转选择) ()保存时lint//保存时检查()提交时Lint和修复//修复时检查修复和提交8。选择e2e测试：

？选择e2e测试解决方案：(使用箭头键)赛普拉斯(仅限铬合金)夜间手表(硒基)9。配置文件babel，postcss，eslint eslint放在哪里：

通常，我们选择独立放置，使package.json更加干净

？你更喜欢把巴别尔、波斯特、埃斯林等的配置放在哪里？(使用箭头键)在专用的配置文件//中，独立的文件放在package . JSON//In package . JSON . 10中。保存配置：

是否将其保存为未来项目的预设？(是/否)//是否要录制，以便下次可以继续使用此配置？/选择保存后，系统会要求您写一个配置名称：将预设另存为：名称//然后下次可以直接使用您的配置。11.下载依赖项

12.缺少web包配置目录：

让我们来看看新项目的结构(如下图)，我们会发现2.x的webpack配置的目录不见了，也就是没有两个文件夹：build和config:

这种方法的优点是对小白非常友好，他不会拿出两个文件夹和一堆文件，这让他的头看起来很大。

然后，在参考复制别人的配置时，也很方便。直接复制文件就行了。

为了定制webpack的配置，我们需要在根目录中创建新的vue.config.js文件。应该从文件中导出一个对象，然后进行配置。详见官方文件。

//vue . config . js module . exports={//options.}也有一些小改动，比如：静态文件夹改成了public，路由器文件夹改成了单个文件(我之前也这样做过，呵呵)。

13.启动项目：

启动项目：npm运行服务//不是以前的npm运行开发

打开http://localhost:8080:

使用图形界面创建/管理/运行项目：

启动图形界面

vue ui

这是一个全局命令，可以在任何文件夹中打开

界面(下图)，重要物品可收藏(置顶):

创建项目和导入项目：

选择目录后，单击下面的“导入”以导入项目。

创建项目并填写文件夹名称：

然后选择预先保存的设置，非常方便。建议使用图形界面创建项目：

项目管理：

当我们点击hello -cli3项目时，我们将进入项目管理界面

1.仪表板：

这个仪表盘主要是为了方便我们操作而设置的。您可以单击右上角的按钮来添加/移动这些功能选项。2.vue-cli3.x插件：

vue-cli3的插件功能，详情了解官方文档

Cli3插件安装过程：

3.项目依赖

直接在图形界面中管理依赖关系很舒服！

安装依赖项时，记得选择开发依赖项/运行依赖项！

4.项目配置

您可以对cli进行一些配置和Eslint规则修改：

5.任务：

服务运行项目，点击直接运行，不再需要输入命令！

您可以清楚地看到每个模块使用了多长时间，这便于我们有针对性地进行优化：

构建打包项目：这个主要展示图表的功能，比之前的2.x报表生成更直观更棒！

6.其他人

夜间风格界面，我比较喜欢这个界面

直接打开编辑器，太好了！

还有一些凌乱的按钮

可以说非常严重。希望你看完能有所收获。赶快试试新版本的vue-cli吧！

摘要

以上是边肖介绍的关于Vue-cli3.0使用的超级详细教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！