在学习和使用vue进行项目开发的过程中，掌握使用vue脚手架搭建中小型项目，是每一个前端工程师必备的技能。
在使用vue脚手架从0搭建项目的过程中，也能帮助我们更好的理解vue框架生态系统中vue-router、vuex的使用场景，更好的体会vue3区别于vue2的语法规则，提高自己使用vue3进行项目开发的能力，并能够让自己站在项目搭建的角度，去思考如何在项目开发的过程中，代码量不断增加的时候还保持项目代码书写的规范、封装项目中公用的组件，提高代码的复用性等等。
本文是自己学习过程中的一个记录，使用的技术栈主要有vue3、@vue/cli5.0.4、vue-router、vuex、eslitn、node-sass、axios等，通过使用脚手架搭建一个简易的移动端H5项目，能够实现接口的调用、简易的登录鉴权逻辑、代码规范性的设置和后续项目的扩充等等。
5.0版本的@vue/cli都要求node的版本要在10以上，我电脑的node版本是12.20.0，所以可以直接执行命令npm install @vue/cli全局安装@vue/cli不会报错，安装完成后就能在自己电脑node全局依赖安装的文件夹下，看到一个@vue的文件夹
打开命令行工具执行vue --version就能够看到自己电脑安装的vue脚手架版本
至此，项目的第一步和最重要的一步就已经完成了，下面只要通过运行vue脚手架初始化一个vue3 项目就可以啦 在自己要创建项目的文件夹下打开命令行工具，运行vue create projectName，例如vue create demo
然后点击回车，就会提示你选择vue版本和是否使用vue默认的一些配置，比如使用bable进行编译、使用eslint进行代码语法检验等，通过键盘上的方向键可以进行选择
此处我选择Manually select features手动选择配置，然后点击回车，可以看到默认为我们勾选上了bable和eslint,通过空格选择上自己项目需要的配置，此处我选择babel、router、vuex、css Pre-processors、Linter，然后再点击回车，提示我们选择vue版本
此处我选择vue3版本，然后点击回车，提示我们是否使用历史路由，输入n然后点击回车，因为我们是搭建单页面应用，所以使用哈希路由比较方便；
提示我们选择一项css预编译样式语法，选择Sass/Scss后点击回车；
提示我们选择Eslint的配置，我们选择Standard config，标准eslint配置然后点击回车；
选择Lint on save，在保存文件时进行eslint检验，然后点击回车
选择In dedicated config,将eslint和babel等配置工具的配置文件放在单独的文件里
输入n,不将此项目存为一个预设项目，然后回车，等待项目创建完毕，成功创建后，命令行工具将有以下提示
输入命令cd demo,输入命令npm run serve,等待项目启动；成功启动后会在我们电脑本地启动一个服务，此处我在浏览器上访问 http://localhost:8080/ 就能打开这个项目
到这一步，使用vue脚手架搭建一个简易的vue3项目就完成一半了，但是我们还要对初始项目的代码进行整理，方便后续的开发
打开我们刚才创建项目的文件夹，进入src目录，打开APP.vue和router文件夹下的index.js，可以看到/路由下展示home组件，home组件又是引入的views文件下的HomeView.vue文件
显然，我们自己进行项目开发，是不会使用到项目中默认给我们创建的组件，也不会通过路由来匹配它们，所以我们直接删除views文件下的内容，删除路由文件中引入组件和设定路由匹配的代码，删除APP.vue中默认展示的内容，如下图：
保留一个干净完整的vue3项目即可，后续我们将在这个空项目的基础上添加内容，实现简易的登录鉴权逻辑、简易的axios封装、项目公共样式和公共组件代码的提炼等等
