Vue项目中实用小技巧有哪些
这篇文章将为大家详细讲解有关Vue项目中实用小技巧有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站从2013年开始,先为洛南等服务建站,洛南等地企业,进行企业商务咨询服务。为洛南企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
需求一:为路径配置别名
在开发过程中,我们经常需要引入各种文件,如图片、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 引入则需要在别名前加上 ~,效果如下:
需求二:要求实现在生产包中直接修改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); /* eslint-disable no-new */ 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 原型上 /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {App}, template: '' }); }) }; startApp();
就是先用 axios 获取 api 文件,然后再初始化。
需求三:由后台根据用户权限值返回菜单
菜单是树形结构(PS:就算不是树形结构,你也得处理成树形结构),我这里使用的是 ElementUI ,参考了道友的这篇文章,实现如下:
新建一个 Menu.vue 文件,写入如下代码:
这里主要用到两个东西,一个是 render 函数,一个是递归,如果不熟悉 render 函数的道友请点这里。可能有道友会问为什么不用模板,因为······做不到啊?,在 template 中只能有一个根元素,而 Vue 限制了不能对根元素使用 v-for;再者,通过在浏览器中查看代码可以知道,菜单就是 ul 加上 li,如果有了根元素会破坏标签结构(虽然不影响功能,但还是觉得不舒服?)。然后,在需要使用的地方:
MenuName
MeFelixWang
效果如下:
需求四:这个 Select 选项是树形结构,一定得是树形结构
树形结构就树形结构吧,不就是样式嘛,改改应该就可以了。
选择的是:{{tree}}
因为 option 接收的是一个一维数组,所以通过递归展平树形结构,在展平的时候设置每项的层级,通过层级来设置缩进及前缀符号,效果如下:
之所以这样做,是因为是管理系统,简单有效,没必要因为这一个组件引个新的插件或者自己写一个(以后用得着的除外哈);也可以用 input 加上 tree 控件来模拟。
关于“Vue项目中实用小技巧有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前标题:Vue项目中实用小技巧有哪些
文章地址:http://scyanting.com/article/iecgig.html