阅读前先知：↓↓↓
我已将源代码上传到了我的码云仓库中，感兴趣的可以去下载源码，
边看博文，边看源码，根据博客和源代码自己动手Demo敲一遍，这种最简单的方式让你快速掌握Vue Router路由，加油吧！
如果你项目创建运行后，保存自动会被VSCode格式化，因为项目搭建的时候开启了Eslint代码规范验证，会报错，可以根据下图解决：↓↓↓，开始动手搭建项目结构吧！
1:
Vue-cli3（Vue脚手架）
介绍并安装3.x版本的vue脚手架
// --------------------------- 介绍并安装3.x版本的vue脚手架 ----------------------------------
脚手架是快速帮我们生成项目的
先在全局中安装 npm install -g @vue/cli, 一次安装永久使用
以后使用 就 vue ui ,就能启动可视化面板创建项目了
基于交互式命令行创建新版vue项目
// --------------------------- 基于交互式命令行创建新版vue项目 ----------------------------------
这种新版的命令行方式，我们了解即可，我们一般是用面板的方式安装的
基于图形化界面创建新版vue项目
// --------------------------- 基于图形化界面创建新版vue项目 ----------------------------------
推荐使用这种方式安装， 看图一步步实现即可
基于2.x的旧模板创建旧版vue项目
// --------------------------- 基于2.x的旧模板创建旧版vue项目 ----------------------------------
这种旧版本的命令行方式，我们只做了解即可
分析项目结构
// --------------------------- 分析项目结构 ----------------------------------
以后初始化项目的时候，对文件的作用不了解，就看这张图。
里面部分的配置是在webpack打包的时候配置的，另外一些的配置则是初始化项结构自动生成的
对vue脚手架项目进行自定义配置的两种方式
// --------------------------- 对vue脚手架项目进行自定义配置的两种方式 ----------------------------------
可以设置vue项目的端口，和运行npm run serve 自动打开浏览器。查看项目效果。
2:
Element-UI组件库
介绍element-ui并基于命令行方式手动安装
// --------------------------- 介绍element-ui并基于命令行方式手动安装 ----------------------------------
因为之前通过可视化面板已经创建好了vue项目，
现在安装element-ui，就能使用它里面的布局了，
我们拷贝了布局到自己项目中， 并在main中配置了element-ui的配置，
通过页面我们用命令行方式安装element-ui是成功可以用的
基于图形化界面自动安装element-ui
// --------------------------- 基于图形化界面自动安装element-ui ----------------------------------
重新使用一次可视化vue ui脚手架方式创建一个新的项目， 因为之前已经创建过了，
就直接使用了预设，快速完成安装，并在插件中搜索插件，下载了插件。
但是这种方式的好处就是，你只管下载好，里面的代码就会自动配置好，粘贴按钮，
就能看到按钮样式的，是脚手架自动帮我们创建的
1：它帮我们在main.js中导入了element.js文件
2：在elment.js中解构出来button按钮， 用哪个就解构哪个， 这样项目体积会小些
3：直接拷贝代码到自己App.vue中查看效果，nice，可以用。
