1.安装vue cli，基于webpack模版
基于webpack模版初始化一个名称为admin的项目vue init webpack admin-vue
1 npm install -g vue-cli2 vue init webpack my-project3 cd my-project4 npm install5 npm run dev
文档数结构
1 . 2 ├── build webpack打包相关的配置文件目录 3 ├── config webpack打包相关的配置文件目录 4 ├── node_modules第三方依赖包 千万不要动它 5 ├── src项目源码 6 │ ├── assets存储资源，例如 css、 img、 fonts 7 │ ├── common存储一些公共的业务组件 8 │ ├── components存储所有组件 9 │ ├── router路由10 └── index.js路由配置文件11 │ ├── App.vue 单页面应用程序的根组件12 │ └── main.js 开机键，负责把根组件替换到根节点13 ├── static 可以放一些静态资源14 │ └── .gitkeep15 ├── .babelrc es6转es5配置文件，给 babel 编译器用的16 ├── .editorconfig 17 ├── .eslintignore eslint配置文件18 ├── .eslintrc.js eslint配置文件19 ├── .gitignore git忽略上传文件20 ├── index.html 单页面引用程序的单页21 ├── package.json 项目依赖项等信息22 ├── package-lock.json23 ├── .postcssrc.js postcss类似于 less、sass 预处理器24 └── README.md
2.导入ElementUI
1 安装 依赖 npm install element-ui2 复制表单源码3 安装axios npm i axios
3.封装axios扩展为vue插件
- axios文档地址：
- vue文档地址： 开发插件
1 import axios from 'axios' 2 import { getToken } from '@/assets/js/auth' 3 const http = axios.create({ 4 baseURL: 'http://localhost:8888/api/private/v1' 5 }) 6 7 // vue插件 8 // https://cn.vuejs.org/v2/guide/plugins.html#开发插件 9 const httpPlugin = {}10 httpPlugin.install = function (Vue, options) {11 // 4. 添加实例方法12 Vue.prototype.$http = http13 }14 export default httpPlugin15 // 5 在main.js加载16 // vue.use(httpPlugin)17 - 在全局组件中调用$http来发起请求例如
请求拦截器
1 // https://github.com/axios/axios 2 // axios 配置请求拦截器 3 http.interceptors.request.use(function (config) { 4 // Do something before request is sent 5 if (config.url != '/login') { 6 config.headers['Authorization'] = getToken() 7 } 8 return config; 9 }, function (error) {10 // Do something with request error11 return Promise.reject(error);12 }); 响应拦截器
// axios 配置响应拦截器// Add a response interceptoraxios.interceptors.response.use(function (response) { // Do something with response data const { meta } = response.data if (meta.status === 403) { window.alert('你没有权限执行该操作！') } else if (meta.status === 401) { // 401 token 失效 跳转到登录组件 router.push({ name: ' login', query: { redirect: window.location.hash } }) } return response;}, function (error) { // Do something with response error return Promise.reject(error);});