写在前面
在最近的 Vue 项目中，为了完成需求使用了一些小技巧，做个笔记，或许也能帮到道友。
阅读重点
需求一：为路径配置别名
在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名。
找到 webpack.base.config.js 中的 resolve 配置项，在其 alias 中增加别名，如下：
创建一个 CSS 文件，随便写点样式：
.avatar display: flex; justify-content: center; align-items: center; .avatar-img padding 20px border solid 1px #ccc border-radius 5px
接着，在我们需要引入的文件中就可以直接使用了：
@import "~css/avatar";
需要注意的是，如果不是通过 import 引入则需要在别名前加上 ~，效果如下：
需求二：要求实现在生产包中直接修改api地址
这个需求，怎么说呢，反正就是需求，就想办法实现吧。
假设有一个 apiConfig.js 文件，用于对 axios 做一些配置，如下：
import axios from 'axios';
axios.defaults.timeout = 10000;
axios.defaults.retry = 3;
axios.defaults.retryDelay = 2000;
axios.defaults.responseType = 'json';
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-type"] = "application/json";
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
export default axios
在 static 文件夹中增加一个 config.json 文件，用于统一管理所有的 api 地址：
{
"base": "/api",
"static": "//static.com/api",
"news": "//news.com.api"
}
打开 main.js，写入下列代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'js/apiConfig'; //import直接引入，不用添加~
Vue.config.productionTip = false;
Vue.use(ElementUI);
let startApp = function () {
let randomStamp = new Date().getTime();
axios.get(`/static/config.json?t=${randomStamp}`).then((data) => {
axios.defaults.baseURL = data.base; //设置一个默认的根路径
Vue.prototype.$axios = axios;
Vue.prototype.$apiURL = data; //将所有路径配置挂载到 Vue 原型上
new Vue({
el: '#app',
router,
components: {App},
template: ''
});
})
};
startApp();
就是先用 axios 获取 api 文件，然后再初始化。
需求三：由后台根据用户权限值返回菜单
菜单是树形结构（PS：就算不是树形结构，你也得处理成树形结构），我这里使用的是 ElementUI ，参考了道友的这篇文章，实现如下：
新建一个 Menu.vue 文件，写入如下代码：
.el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; }
这里主要用到两个东西，一个是 render 函数，一个是递归，如果不熟悉 render 函数的道友请点这里。可能有道友会问为什么不用模板，因为······做不到啊，在 template 中只能有一个根元素，而 Vue 限制了不能对根元素使用 v-for；再者，通过在浏览器中查看代码可以知道，菜单就是 ul 加上 li，如果有了根元素会破坏标签结构（虽然不影响功能，但还是觉得不舒服）。然后，在需要使用的地方：
MenuName MeFelixWang * margin 0 padding 0 html, body, .el-container, .el-aside height 100% .el-aside background-color rgb(84, 92, 100) .el-menu border-right solid 1px rgb(84, 92, 100) .el-header display flex justify-content space-between align-items center background-color aliceblue .el-button--text color: #606266; i font-weight bold
效果如下：
需求四：这个 Select 选项是树形结构，一定得是树形结构
树形结构就树形结构吧，不就是样式嘛，改改应该就可以了。
选择的是：{{tree}} .is-sub:before content '- '
因为 option 接收的是一个一维数组，所以通过递归展平树形结构，在展平的时候设置每项的层级，通过层级来设置缩进及前缀符号，效果如下：
之所以这样做，是因为是管理系统，简单有效，没必要因为这一个组件引个新的插件或者自己写一个（以后用得着的除外哈）；也可以用 input 加上 tree 控件来模拟（PS：最终还是引入了一个插件，哈哈）。
最后叨叨
本文是我最近用到的一些小技巧，如果道友们有更好的实现方法，欢迎在评论区留言讨论，文中错误也欢迎指出，共同学习
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对考高分网的支持。
