vue cli 3.0建筑项目图解教程

1.3.0版包括默认的默认配置和用户定义的设置

2.与2.0相比，3.0的目录结构更加精简

配置文件目录(配置和构建文件夹)已被删除

静态文件夹被移除，公共文件夹被添加，并且index.html被移动到公共

“视图”文件夹被添加到src文件夹中，该文件夹用于对视图组件和公共组件进行分类

Vue-cli 3.0版本

1.安装或升级Node.js

Vue-cli官网对节点版本有明确要求。Vue CLI要求Node.js 8.9或更高版本(推荐8.11.0)。2.安装vue-cli 3.0。

Npm install -g @vue/cli这里需要注意的是，如果已经在全球安装了旧版vue-cli(1.x或2.x)，vue-cli官网提到需要通过npm uninstall vue-cli -g或yarn global remove vue-cli进行卸载。脚手架施工

vue的项目配置选项创建hello-world(构建一个名为hello-world的vue前端项目)

手动选择特征

如果你第一次使用3.0，没有第一个选项(myproject init-这是你自己预设的配置)，只有最后两个。第一个是默认配置。一般选择第二个，自己配置。在这里选择第二个。b、选择项目所需的特性(根据自己的需求选择)

这里的选择有：Babel编译，Vue路由，Vue状态管理器，CSS预处理器，代码检测c，路由器是否使用历史模式，这里使用历史模式

一般的Vue-Vue路由器Webpack Web开发场景选择y，使用历史模式d，选择CSS预处理器语言

选择第二个Sass/SCSS(带节点sass)e，选择ESLint的代码规范，在这里使用标准代码规范

标准，是一些前端工程师定制的标准。何时监控输入代码

保存时选择输入监控g、Babel、PostCss、ESLint等文件的存储位置

选择将其单独保存在自己的配置文件中。h、询问是否将该配置项保存为预设配置(第一步看到的myProjectinit是我保存的预设配置)

在这里，我选择不保存n，而是保存y，最后等待vue-cli完成初始化

项目目录结构如下：

这是初始化完成光盘。在此目录下运行npm运行服务启动项目。Serve不用于启动。可以手动打开根目录下的package.json文件，找到' serve ' : ' vue-CLI-service serve '，将serve改为devvue-cli 3.0。还提供了UI控制台来管理和安装npm i -g @vue/Cli在终端执行vue UI时会默认初始化localhost:8000，并自动为vue-cli 3.0打开UI控制台的可视化项目管理界面。本文介绍了vue-cli修订版3.0的3.0betaUI界面的初步体验。

摘要

以上是边肖介绍的vue cli 3.0建设项目的图解教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！