vue-element-admin框架二次开发学习内容整理

安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 在项目根目录下添加一个.npmrc文件，内容如下。
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

# 安装依赖，建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

发布

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

了解项目结构

src/components 目录下有多个页面，页面包括（echart、Excel、图片上传等）
src/api 请求接口访问，vue-axios
src/assets 静态资源文件
src/mock  模拟数据
src/router 路由

direcetive ：自定义指令
filters ：过滤器
icons ：图标
App.vue ：父组件，其他的组件都是嵌套在App.vue里
main.js ：全局入口文件，将App.vue设置为全局父组件进行渲染
permissions.js ：登录的校验和登录之后的路由跳转
setting.js ：配置文件

views里是视图上直接出现的组件
store对应着vuex
layout是每个页面都存在的一些东西，比如侧边栏导航栏之类的
permission.js做的权限路由，里面主要是两个导航守卫
style存全局css样式的地方。
utils里是一些自己可能复用到的方法。用于其他地方调用，如：
	auth.js 读写删token的地方，需要自己改
	request.js， 这个其实是对axios请求的封装，配置一些相同的东西，比如
		baseURL: '/api',
		headers: {
   
		    'Content-Type': 'application/json'
		}
vue-config.js 配置代理
	proxy: {
   
      '/api': {
   
        target: 'http://localhost:8080', # target是服务器的地址
        changeOrigin: true,
        pathRewrite: {
   
          '^/api': ''
        }
      }
    }

关于代理

前端不能直接去对其他ip发起请求，但是如果你先发给本机的服务器（代理），再由本机的服务器去向后端请求，那就不存在跨域问题了。
经过我对开发者工具中network的查看，请求的ip依旧是本机的ip，这就代表这个代理，对于浏览器来说，其实是不可见的过程。

关于跨域

axios请求不携带cookie

this.axios.defaults.withCredentials = true