构建Vue3.0项目的基本过程

前言

vue3.0也发布有些时间了，今天进行3.0项目的搭建。

一、Vue3.0是什么？

vue3.0是2020年09月18日正式发布的。vue3.0版本与其他版本完全不同，它最大限度的减少了开发人员配置工具的次数，另外增添了许多丰富的内置功能，还附带了一个完整的GUI用于创建和管理项目。不过今天在cmd窗口使用命令行进行项目的构建。

二、vue3.0项目搭建

1. 安装vue-cli3.0

​ 注意：vue3.0必须使用vue-cli3.0等以上版本

在桌面启动cmd命令窗口，执行下面命令，全局安装（可以先卸载之前的vue版本 npm uninstall vue-cli -g ）

npm install -g @vue/cli

查看版本

vue -V

2. 开始vue3.0的项目创建

以搭建一个项目名称为my_test的Vue前端项目为例

vue create frontend

2.1. 根据项目提示进行相应的配置方式(以Manually select features手动配置为例)

2.2. 根据项目提示进行相应的配置方式(以Manually select features手动配置为例)

Eslint代码规范：不一定每个人都习惯，按个人需求来进行是否选择。

2.3.根据项目需要选择一些特性，比如此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、以及单元测试，暂时不考虑端到端测试(E2E Testing)） 注意：通过上下键切换，空格键选中的方式进行选择

2.4.选择vue版本，此处选择vue 3.x

2.5.路由采用模式，这里采用历史模式

2.6.选择CSS预处理器语言，此处选择Sass/SCSS
2.7.配置Eslint代码规范，此处选择Standard（使用了 代码更规范 但是可以不习惯，按自己心情和习惯进行选择吧）

2.8.选择何时进行代码检测，此处选择在保存时进行检测

2.9.选择单元测试解决方案，此处选择 Jest

2.10.选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

2.11.是否保存当前配置作为下次创建项目的模板,这里选择n

等待一会儿加载依赖，项目创建完成

3.测试项目是否创建成功

3.1 进入项目，启动项目

 $ cd [项目名]
 $ npm run serve

3.2 启动成功，打开浏览器访问，效果如下

---

总结

恭喜您，vue前端项目构建成功，可以进行后面的操作了。