前期准备： vue-admin-tempalte直接搭好了常用的功能，只需要在上面做二次开发的现成项目。
git clone xxx #拉取项目代码\ cd vue-admin #切换到具体目录下
yarn #安装所有依赖 如果是npm就执行 npm i\ yarn dev #启动开发调试模式 如果是npm就执行 npm run dev 查看package.json文件的scripts可知晓启动命令
了解启动命令后目录结构：
── src # 源代码（比较重要）
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 不参与打包 直接直出
│ ├── components # 全局公用组件 和业务不相关 上传组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout 负责搭建项目的整体架子结构 html结构
│ ├── router # 路由
│ ├── store # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法 request.js
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 路由级别的组件
│ ├── App.vue # 入口页面 根组件
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
使用gitee管理项目：
1）在gitee中新建一个仓库
2）填写必要的仓库信息
3）删除项目中.git文件夹（断掉与别人仓库的关联）
4） 重新初始化本地仓库（git init）
5）关联远程仓库 (换成(1)中新建的仓库地址)（$ git remote add origin https://giteeXXX）
6）提交代码并推送远程（ git commit -m "项目初始化" ）（$ git push -u origin master）
项目文件介绍：
应用入口 - main.js文件（项目入口文件，项目中所有页面都会加载main.js）
作用：
1.实例化Vue。（new Vue 实例化——全局注册Element U i、挂载 vueRouter、挂载vuex、渲染App跟组件）
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。
项目根组件 - App.vue(负责构建定义及页面组件归集)
app.vue作为主组件在main.js中被使用， 主组件app.vue调用其他组件，构建页面。
<template>
<div id="app">
<Test/>
</div>
</template>
<script>
// 其他组件
import Test from './components/Test.vue'
export default {
name: 'app',
components: {
Test
}
}
</script>
<style>
</style>
permission.js - 权限配置文件（路由跳转控制、菜单权限控制等权限控制）
vuex - 集中状态管理 （专为 Vue.js 应用程序开发的状态管理模式 + 库。）
图标字体 - icons：
使用：
使用SCSS模块：
// 导入scss模块
@import '@/styles/variables.scss';
.salary-container {
border: $basic-border;
.salary-text{
color: $hight-color;
&:hover{
//给当前元素在嵌套的语法下添加一个hover的效果(&:hover)
// 使用导入模块中的变量
color: $subMenuHover;
}
}
}
Request模块-request.js:
- 创建axios实例
- 请求拦截器
- 响应拦截器
参考网站：www.axios-http.cn/
axios主要知识点：（黏贴处：www.axios-http.cn/）
一个请求响应包含：
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 是服务器响应头
// 所有的 header 名称都是小写，而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}
使用 then 时，接收如下响应：
axios.get('/user/12345')
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
在请求或响应被 then 或 catch 处理前拦截它们
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
错误处理(!!!)
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已经成功发起，但没有收到响应
// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
// 而在node.js中是 http.ClientRequest 的实例
console.log(error.request);
} else {
// 发送请求时出了点问题
console.log('Error', error.message);
}
console.log(error.config);
});
自定义抛出错误的 HTTP code:
axios.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // 处理状态码小于500的情况
}
})
api/user.js - 封装接口: 通过封装一个一个的函数，使用时只需要传过来接口参数即可。
import request from '@/utils/request'
export function login(data) {
return request({
url: '/vue-admin-template/user/login',
method: 'post',
data
})
}
函数的执行结果都是promise对象 ：在.vue中使用
import { login } from '@/api/user'
// 方法一
login().then(res => console.log(res))
// 方法二
async function asyncLogin(){
const res = await login()
}
2. 封装的好处
- 每一个文件就是一个业务对应的所有服务请求接口汇总，方便维护
- .vue业务组件中，使用哪个接口直接导入即可，方便复用
- 语义化清晰，维护方便 ，命名即注释
环境变量配置：参考模式和环境变量 | Vue CLI (vuejs.org)
