开始

记录自己的第一个前端vue项目

前提：公司项目中需要开发后台管理端项目，然而前端已离职，所以事就交给我了

在这之前，也只是学习了一点vue.js的基础知识，会小程序开发，所以有一定的html，css，js基础，但是现在想做一个项目，而且没有基础的框架，只能自己找资料了。

    1. 首先感谢vue-element-admin的作者提供了这个框架，并且提供了学习资料，还有根据vue-element-admin衍生出的基础模板vue-element-template，因此可以以template为基础，开发属于自己的项目，其中如果有哪个知识点或者功能不懂，可以参考admin项目，但是遗憾的是，项目已经很久没更新了，但是看到80k多的👍🏻的时候，我还是坚定的选择了它。

    2. 看一看自己需要的功能在admin项目中有没有体现，并且注释代码看一看功能的简单实现。

    3. package.json中dependencies为导入的npm包，可以搜一下相关的包的用途，大概了解，太老的版本可以升级一下。

    4. 

项目结构图

    根据上图中展示的项目结构图，我们可以看一下里面的具体内容

mock -- 本地mock数据

api -- 请求数据，暂时请求的是mock数据

assets -- 静态图片

components -- 公共组件，作者封装了一些组件，主要为侧边栏，svg显示

icons -- 包含svg原始图片

layout -- 布局，包含侧边栏以及主窗口

router -- 管理路由

store -- 数据存储，用的vuex

styles -- 用到的css，包含element，侧边栏等

utils -- 封装的一些功能，包含axios请求，常用判断等

views -- 页面，也就是咱们的主要业务

main.js -- 项目入口

.env.development  .env.staging .env.production  -- webpack写法，环境变量，分别为开发环境，测试环境，生产环境，不同环境加载不同的内容，根据规则，变量名要以VUE_APP_开头才能加载出来

vue.config.js -- Webpack配置