let path=require('path'); function resolve(dir){ return path.join(__dirname,dir) } module.exports = { chainWebpack: config => { //设置别名 config.resolve.alias .set('@',resolve('src')) }, devServer: { open:true //打开浏览器窗口 }, //定义scss全局变量 css: { loaderOptions: { sass: { data: `@import "@/assets/scss/global.scss";` } } } }
五、ElementUI引入开始安装ElementUI
vue add element
接下来两个选项，第一个是全部引入，第二个是按需引入，我选择第一个 Fully import，大家可以按照自己的项目而定。接下来会询问是否引入scss,这里选择是，语言选择zh-cn。
接下来会提示安装成功，并在项目首页有一个element样式的按钮。
六、vue-router路由介绍入路由管理也是本项目核心部分。
1.引入文件
import Vue from 'vue' import Router from 'vue-router' import store from '../store/store' //引入状态管理 import NProgress from 'nprogress' //引入进度条组件 cnpm install nprogress --save import 'nprogress/nprogress.css' Vue.use(Router)
2.路由懒加载
/** *@parma {String} name 文件夹名称 *@parma {String} component 视图组件名称 */ const getComponent = (name,component) => () => import(`@/views/${name}/${component}.vue`);
3.路由配置
const myRouter=new Router({ routes: [ { path: 'https://www.jb51.net/', redirect: '/home', component: getComponent('login','index') }, { path: '/login', name: 'login', component: getComponent('login','index') }, { path: 'https://www.jb51.net/', component:getComponent('layout','Layout'), children:[{ path:'/home', name:'home', component: getComponent('home','index'), meta:{title:'首页'} }, { path:'/icon', component: getComponent('icons','index'), name:'icon', meta:{title:'自定义图标'} }, { path:'/editor', component: getComponent('component','editor'), name:'editor', meta:{title:'富文本编译器'} }, { path:'/countTo', component: getComponent('component','countTo'), name:'countTo', meta:{title:'数字滚动'} }, { path:'/tree', component: getComponent('component','tree'), name:'tree', meta:{title:'自定义树'} }, { path:'/treeTable', component: getComponent('component','treeTable'), name:'treeTable', meta:{title:'表格树'} }, { path:'/treeSelect', component: getComponent('component','treeSelect'), name:'treeSelect', meta:{title:'下拉树'} }, { path:'/draglist', component: getComponent('draggable','draglist'), name:'draglist', meta:{title:'拖拽列表'} }, { path:'/dragtable', component: getComponent('draggable','dragtable'), name:'dragtable', meta:{title:'拖拽表格'} }, { path:'/cricle', component: getComponent('charts','cricle'), name:'cricle', meta:{title:'饼图'} }, ] } ] })
4.本项目存在一个token，来验证权限问题，因此进入页面的时候需要判断是否存在token,如果不存在则跳转到登陆页面
//判断是否存在token myRouter.beforeEach((to,from,next)=>{ NProgress.start() if (to.path !== '/login' && !store.state.token) { next('/login') //跳转登录 NProgress.done() // 结束Progress } next() }) myRouter.afterEach(() => { NProgress.done() // 结束Progress })
5.导出路由
export default myRouter
七、axios引入并封装1.接口处理我选择的是axios，由于它遵循promise规范，能很好的避免回调地狱。现在我们开始安装
cnpm install axios -S
2.在 src目录下新建文件夹命名为 api,里面新建两个文件，一个是 api.js，用于接口的整合，另一个是 request.js,根据相关业务封装axios请求。
request.js
1.引入依赖
import axios from "axios"; import router from "../router/router"; import { Loading } from "element-ui"; import {messages} from '../assets/js/common.js' //封装的提示文件 import store from '../store/store' //引入vuex
2.编写axios基本设置
axios.defaults.timeout = 60000; //设置接口超时时间 axios.defaults.baseURL = process.env.BASE_URL; //根据环境设置基础路径 axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; //设置编码 let loading = null; //初始化loading
3.编写请求拦截，也就是说在请求接口前要做的事情
/* *请求前拦截 *用于处理需要请求前的操作 */ axios.interceptors.request.use( config => { loading = Loading.service({ text: "正在加载中......", fullscreen: true }); if (store.state.token) { config.headers["Authorization"] = "Bearer " + store.state.token; } return config; }, error => { return Promise.reject(error); } );
4.编写请求响应拦截，用于处理数据返回操作