1.项目结构
img
说明
1. dist 项目打包生成的文件夹(启动打包命令才会生成，部署项目 时，只需要这个文件夹内容即可)
2. node_modules 存放下载的插件
3. public 网站首页(入口html文件)
4. assets 存放静态资源：如img、css
5. components 存放组件
6. network 用于封装网络请求、集中管理接口
7. router 前端路由
8. store Vuex类型于单例模式的vue对象(一个全局对象，用于全 局的状态管理，解决各组件间的通信问题)
9. view 存放编写的页面
10. App.vue 将所有内容分为一个个模块，一定有个最大的模块 负责整合所有模块，便是App.vue
11. main.js 项目入口,全局插件引入(部分插件需要注册)的地方， 将App.vue挂载到public中的网站首页的地方。
12. .browserslistrc 浏览器适配
13. .gitignore 上传到git时哪些文件需要忽略
14. babel.config.js 项目配置文件之一。
15. package.json 引入插件信息
16. package-lock.json 引入插件真实版本信息
17. README.md 项目说明文件(自己写)
2.初始化
ps：删除不必要文件
1) 清空components 和 views 文件
2）删除router/index.js和 App.vue 中无用的代码
router/index.js (左边删除后、右边删除前)
App.vue
3.安装插件
1)在项目根目录下再打开一个cmd窗口（操作方法见文章一：6.1、6.2）
2)安装vant-ui ,
vant-ui
官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/swipe
cnpm install vant -S
在 main.js内引入vant-ui
3) 使用任意组件查看是否引入成功
vant-ui官网 --<van-button>组件
App.vue
页面效果
4.配置路径别名
为什么需要配置路径别名
由于项目目录结构较复杂，当在一个文件中引入另一文件时，引用路径过长，不利于开发
举例：
当需要在navBar.vue中引入logo.png,则此时的引用路径为 '../../assets/logo.png'.
通过别名配置，可以在任意地方通过'assets/logo.png'路径来访问logo.png文件
如何配置路径别名
1) 在项目根目录下新建vue.config.js
2) 在vue.config.js文件中写入配置代码
3）每次更改vue.config.js中的代码，需要重新启动项目
npm run serve
