搭建项目前的一些基本准备
目标: 介绍搭建一个vue中台项目,需要环境和工具
接下来要做的是一个大型的项目，我们需要更好的环境准备和资源前置，所以提前检查我们的环境和资源
nodejs环境
nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的
npm功能来管理依赖包 查看node 和 npm的版本
$ node -v #查看node版本
$ npm -v #查看npm版本
查看git安装版本
$ git --version #查看git安装版本
npm淘宝镜像
npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像
设置淘宝镜像
$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址
$ npm config get registry #查看镜像地址
vscode编辑器
vscode编辑器插件 + vetur + eslint
项目模板启动和目录介绍
目标: 拉取项目的基础模板,并对目录进行介绍
git拉取基础项目模板
# 拉取基础模板到hrsaas目录
$ git clone https://github.com/PanJiaChen/vue-admin-template.git hrsaas
# 如果github的地址下载失败的话，请尝试使用下面码云的地址
# 码云仓库地址： https://gitee.com/panjiachen/vue-admin-template.git
# git clone https://gitee.com/panjiachen/vue-admin-template.git hrsaas
安装项目依赖（定位到项目目录下）
$ cd hrsaas # 进入到本地项目当中
$ npm install #安装依赖
注意！！！ 如果用npm安装不成功的话，尝试用如下命令，用yarn来安装
$ yarn
启动项目
$ npm run dev #启动开发模式的服务 yarn dev
项目基础架构
main.js
App.vue
permission.js
权限管理 路由前置守卫 路由后置守卫
settings.js
项目信息的配置
vuex结构
API模块和请求封装模块介绍
目标 介绍API模块的单独请求和 request模块的封装
Axios的拦截器介绍
该项目采用了API的单独模块封装和axios拦截器的方式进行开发
axios的拦截器原理如下
vue.config.js
设置固定的本地访问端口和网站名称
const name=`测试中台`
const port=process.env.port || process.env.npm_config_port || 9528
Vue-Cli配置跨域代理
vue-cli的配置文件即**vue.config.js**,这里有我们需要的 代理选项
module.exports = {
devServer: {
// 省略前面的代码
// 代理配置
proxy: {
// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
// localhost:8888/api/abc => 代理给另一个服务器
// 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 （行得通）
// 本地的前端 =》 另外一个服务器发请求 （跨域 行不通）
'/api': {
target: 'www.baidu.com', // 我们要代理的地址
changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
// 路径重写
pathRewrite: {
// 重新路由 localhost:8888/api/login => www.baidu.com/api/login
'^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做
}
},
}
}
}
request中环境变量和异常的处理
基础模板在**
.env.development和 .env.production定义了变量VUE_APP_BASE_API，该变量可以作为axios请求的baseURL**
补充
封装请求模块
axios的封装,创建axios实例
请求拦截器,token的统一注入
响应拦截器,处理数据异常和数据结构
环境变量
**`.env.development`**和 **`.env.production`**定义变量
Vuex
状态管理工具
主页的token拦截处理
使用路由前置守卫处理
element
组件库
