Vue后台管理系统项目(2)后台管理系统模板介绍

1.我们这里下载简洁版

2.新建一个空文件夹,把下载好的模板解压到该文件夹内

3.我们安装项目依赖

3.1安装完成后,我们打开项目

3.2运行项目

运行后的效果:

4.模板中文件夹的作用

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

简洁版: https://github.com/PanJiaChen/vue-admin-template

加强版: https://github.com/PanJiaChen/vue-element-admin

模板的文件与文件夹认知【简洁版】

1.我们这里下载简洁版

2.新建一个空文件夹,把下载好的模板解压到该文件夹内

打开文件夹后我们会发现这个模板缺了项目的依赖,node_modules文件夹

3.我们安装项目依赖

3.1安装完成后,我们打开项目

我们查看一下packge.json中:

图中圈出来的位置是dev还是serve

如果是dev,我们运行项目命令就是npm run dev

如果是serve,我们运行项目命令就是npm run serve

3.2运行项目

npm run dev

运行后的效果:

4.模板中文件夹的作用

build

----index.js webpack配置文件【很少修改这个文件】

mock

----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口

node_modules

------项目依赖的模块

public

------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动的打包到dist文件夹里面

src

-----程序员源代码的地方

------api文件夹:涉及请求相关的

------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在webpack打包的时候，会进行编译

------components文件夹：一般放置非路由组件获取全局组件

------icons这个文件夹的里面放置了一些svg矢量图

------layout文件夹：他里面放置一些组件与混入

------router文件夹：与路由相关的

-----store文件夹：一定是与vuex相关的

-----style文件夹：与样式相关的

------utils文件夹：request.js是axios二次封装文件****

------views文件夹：里面放置的是路由组件

App.vue:根组件

main.js：入口文件

permission.js:与导航守卫先关、

settings：项目配置项文件

.editorconfig 编程风格文件:比如缩进多少之类的控制

webpack在打包,运行的时候,可以检测到你当前运行的环境是什么

.env.development webpack配置文件开发环境的配置文件

.env.producation webpack配置文件上线环境的配置文件

.env.staging webpack配置文件测试环境的配置文件

.eslintignore 校验的时候忽略哪些文件

.eslintrc.js eslintrc配置文件

.gitignore 忽略文件

.travis.yml 忽略文件

babel.config.js babel配置文件

jest.config.js 测试框架配置文件

jsconfig.json src取别名的配置文件

package.json 项目版本号,运行依赖

postcss.config.js 与css相关的配置文件比如不同浏览器对display flex有兼容性问题,在不同浏览器加上前缀,这个文件就能解决

vue.config.js 我们可以把他当做webpack.config.js文件,像解决跨域什么的,我们经常用这个文件

到底是什么环境,是可以检测到的

我们在main.js中:

测试:

可看到对外暴露的是一个对象,对象身上有一个env属性

我们可以看看process.env里面有什么

测试:

我们发现可以拿到我们的环境,而且还拿到了我们在配置文件中所写的东西