Vue项目中最新用到的一些实用小技巧

写在前面

在最近的某视频剪辑软件项目中，为了完成需求使用了一些小技巧，做个笔记，或许也能帮到道友。

阅读重点

需求一：为路径配置别名

在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（./),我们可以为不同的目录配置一个别名。

找到webpack.base.config.js中的分解配置项，在其别名中增加别名，如下：

创建一个半铸钢钢性铸铁(铸造半钢)文件，随便写点样式：头像显示flex justice-内容中心：align-items:居中；头像-img填充20px边框实心1px #ccc边框-半径5px接着，在我们需要引入的文件中就可以直接使用了：

template div class=' avatar ' img class=' avatar-img ' src=' http : ~ img/avatar。png ' alt=' '/div/模板脚本导出默认值{ name : ' Home ' }/脚本样式范围lang='手写笔@ import ' ~ CSS/avatar '；/style需要注意的是，如果不是通过进口引入则需要在别名前加上~,效果如下：

需求二：要求实现在生产包中直接修改美国石油学会(美国石油协会)地址

这个需求，怎么说呢，反正就是需求，就想办法实现吧。

假设有一个apiConfig.js文件，用于对爱可信做一些配置，如下：

从“axios”导入axiosaxios。默认值。超时=10000；axios。默认值。retry=3；axios。默认值。retrydley=2000axios。默认值。responsetype=' JSONaxios。默认值。带有凭据=真；axios。默认值。标题。post[' Content-type ']=' application/JSON '；//添加一个请求拦截器拉克斯。拦截器。请求。使用(函数(配置){//在发送请求之前做一些事情返回配置；},函数（错误){ //用请求错误做某事返回承诺。拒绝(错误);});//添加一个响应拦截raxios。拦截。回应。使用(函数(响应)){//用响应数据做点什么返回响应；},函数（错误){ //做一些有响应错误的事情返回承诺。拒绝(错误);});导出默认爱可信在静电文件夹中增加一个config.json文件，用于统一管理所有的美国石油学会(美国石油协会)地址：

{ 'base': '/api '，' static': '//static.com/api '，' news': '//news.com.api'}打开main.js，写入下列代码：

//要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/路由器从"元素-用户界面"导入“ElementUIimport”元素-ui/lib/主题-粉笔/index。CSS '；从" js/apiConfig "导入axios/导入直接引入，不用添加~ vue。配置。生产提示=假；vue。使用(ElEMENTui)；/* ESL int-禁用无新功能*/让startApp=function(){ 0让随机时间戳=新日期().getTime()；axios.get(`/static/config.json？t=${randomStamp} `).然后((数据)={ axios。默认值。baseURl=数据。基地；//设置一个默认的根路径vue . prototype . $ axios=axios vue . prototype . $ APiURl=数据；//将所有路径配置挂载到某视频剪辑软件原型上/* ESL int-禁用无新*/新Vue({ el: '#app '，路由器，组件： {App}，模板： ' App/' })；})};startApp()；就是先用爱可信获取美国石油学会(美国石油协会)文件，然后再初始化。

需求三：由后台根据用户权限值返回菜单

菜单是树形结构(PS:就算不是树形结构，你也得处理成树形结构),我这里使用的是ElementUI，参考了道友的这篇文章，实现如下：

新建一个Menu.vue文件，写入如下代码：

脚本导出默认{ name: 'MenuItem '，prop : { data : { type : Array }，collapse: { type:布尔值} }，methods: { //生成菜单项createMenuItem(数据，CreateElement){返回数据。map(item={ if(item。子项目。孩子们。长度)} { return CreateElement(' El-子菜单，{ prop : { index : item。身份证。tostring()} }，[ createElement('template '，{slot: 'title'}，[ createElement('i '，{ class: item.icon })，])，此。递归])} else { return create element(' El-menu-item '，{ prop s : { index : item }。路径} }，[ createElement('i '，{class: item.icon})，createElement('span '，{slot: 'title'}，[item.title])，])}，//选中菜单onSelect(key，keyPath) { console.log(key，key path)；} }，render(create element){ return create element(' El-menu '，{ prop s : { background Color : ' # 545 c 64 '，textColor: '#fff '，activeTextColor: '#ffd04b '，collapse: this.collapse，router:true }，class 33: ' El-menu-vertical-demo '，3333333: { select 3333333: this。onselect } }，this.createMenuItem .el-menu-vertical-demo:not(.El-menu-collapse){宽度： 200 px最小高度： 400像素；}/样式这里主要用到两个东西，一个是提出函数，一个是递归，如果不熟悉提出函数的道友请点这里。可能有道友会问为什么不用模板，因为做不到啊，在模板中只能有一个根元素，而某视频剪辑软件限制了不能对根元素使用v-for；再者，通过在浏览器中查看代码可以知道，菜单就是保险商实验所加上李，如果有了根元素会破坏标签结构（虽然不影响功能，但还是觉得不舒服)。然后，在需要使用的地方：

模板埃尔-容器埃尔-侧边宽度='自动'菜单：数据='菜单' :折叠='是折叠'/菜单/El-侧边埃尔-容器埃尔-标题El-button type=' text ' icon=' El-icon-d-arrow-left ' @ click=' is callabled=！名为“/El-button h3MenuName/H3 spanmefilixwang/span/El-header El-主路由器-视图/路由器-视图/El-主/El-容器/El-容器/模板”脚本从@/组件/菜单'导入菜单；导出默认{ name: 'App '，data(){ return { menu : [{ title : }导航一，id: 1，path: ' '，icon: 'el-icon-search '，children: [ { title: '导航一杠一，id: 2，path: ' '，icon: ' '，children: [ {title: '导航一杠一杠一，id: 4，path: '/test '，icon: ' '，children: []}，{ title: '导航一杠一杠二，id: 5，path: ' '，icon: ' '，children: [ {title: '导航一杠一杠二杠一，id: 6，path: '/6 '，icon: ' '，children: []}，{title: '导航一杠一杠二杠二，id: 7，path: '/7 '，icon: ' '，children: [] }，] }，]}，{title: '导航一杠二， id: 3，path: '/3 '，icon: ' '，children: []} ] }，{title: '导航二，id: 8，path: '/8 '，icon: 'el-icon-setting '，children: []}，{title: '导航三，id: 9，path: '/9 '，icon: 'el-icon-document '，children: []}，{ title: '导航四，id: 10，path: ' '，icon: 'el-icon-date '，children: [ {title: '导航四杠一，id: 11，path: '/11 '，icon: ' '，children: []}，{ title: '导航四杠二，id: 12，path: ' '，icon: ' '，children: [ {title: '导航四杠二杠一，id: 14，path: '/14 '，icon: ' '，children: []} ] }，{title: '导航四杠三，id: 13，path: '/13 '，icon: ' '，children 3360[]}，]}，]，isCollapsed: false } }，methods: { handleOpen(key，keyPath) { console.log(key，key path)； }，handleClose(键，键路径){ console.log(键，键路径);} },组件： { Menu } }/scriptstyle lang='手写笔' *边距0填充0 html，正文，埃尔集装箱公司.埃尔-一旁高度100%。埃尔-一旁的背景色rgb(84，92，100).埃尔-菜单边框-右实心1px rgb(84，92，100).El-header显示flex alize-内容间距-对齐-项目居中背景色aliceblue .埃尔按钮文本颜色： # 606266;字体粗细粗体/样式效果如下：

需求四：这个挑选选项是树形结构，一定得是树形结构

树形结构就树形结构吧，不就是样式嘛，改改应该就可以了。

模板div El-select v-model=' tree ' placeholder='请在选项' : key=' index ' : label=' item . label ' : value=' item . id ' : style=' { padding left 3360(item . level * 10 20)' px ' } ' : class=' item level '？is-sub ' : ' '/El-option/El-select:{ { tree } }/div/模板脚本导出默认值{name :' home '，data () {return {tree : ' '，Options : []，origin data : [{label : '这是根一'，id : 1，children :[{ label : '这是茎一'，id 3: 2，children 3: ID : 7，Children: []}，]}，{label: '这是Stem 14 '，id: 5，children: []}，]}，{label: '这是root 2 '，ID 3: 8，Children: []，}，{label: '这是root 3 '，ID 3: 9，children 3360[{ label 3: '这是stem trinity '，ID }，methods: {//分解树(数组，级别){ let tmpar=[]；(函数分解(arr，lev) { for(让I=0；一、长度；I){ let tmpObj={ }；let item=arr[I]；item.level=levtmpObj=Object.assign({}，item)；tmparr . push(tmpObj)；if (item.children) {分解(item.children，lev 1)；//递归}删除tmpObj.children//删除其子项，避免数据过大(不要删除，以后可能有用)} })(数组，级别)；返回tmpArr}}}/scriptstyle作用域为lang=“手写笔”。is-sub : before content '-'/style因为option接收一维数组，树结构递归展平，展平时设置每个项目的级别，缩进和前缀符号通过级别设置。效果如下：

这样做的原因是因为它是一个管理系统，简单有效。没有必要为这个组件引入一个新的插件或者自己编写一个(除了以后需要的)；也可以用输入加树控来模拟(PS:最后介绍一个插件，哈哈)。

最后，这篇文章是我最近使用的一些技巧。如果朋友们有更好的实现方法，请在评论区留言讨论。也请指出文章中的错误，一起学习

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。