1.软件的准备
vscode宇宙第一,官网下载以后安装一些插件:
然后基于Beautify插件可以进行一些基本的配置:
第一步:点击设置
第二步:找到beautify的设置
第三步:打开setting.json
第四步:添加自定义代码
本人的如下:
// 解决Vue换行问题
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
基于koroFileHeader插件的设置:
"fileheader.cursorMode": {
"Description": "",
"Version": "1.0",
"Autor": "pmy",
"Date": "Do not edit",
"LastEditors": "pmy",
"LastEditTime": "Do not edit"
}
到此,软件的基础就差不多完事了,可以开始搭建vue项目了;
2.项目的搭建
别人写的挺好的,这个地方给个链接自己看去:vue cli3.0快速搭建项目详解(强烈推荐) - coober - 博客园
如果要安装vue3+ts看这个:
https://blog.csdn.net/weixin_47529373/article/details/119052636
3.vue项目开发可能遇到的一些问题
(1)关于echarts问题
首先是图缩小的问题变成宽高100px(解决思路是外部dom消失了)
例如:用display显隐,echart先加载dom获取不到dom的width就会导致这个问题,用v-if去控制显隐,可以销毁dom从而解决
(2)关于flv.js问题
别人写的很好:vue项目中使用flv.js实时播放 断流重连 关闭断流开发心得_Davi的博客-CSDN博客_flvjs断流重连
(3)关于rem兼容分辨率的问题
首先要明确火狐可以支持12px以下字体,chome,ie11,360只能支持到12px,这就是最大的问题了
配置很简单,直接vue.config.js 配置一下就可以了:
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 10
}), // 换算的基数
]
}
}
},
然后配置一下自己生成一个rem.js文件,然后在main.js里面去调用方法就可以了:
rem.js代码段如下:
export function setRemInit() {
// postcss-px2rem的内容
// 基准大小
const baseSize = 10;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = `${baseSize * scale}px`;
let baseNumber = 10;
// 这个if语句代码,是用来屏幕的最小字体大小,不需要可以可以不写
if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= baseNumber) {
document.documentElement.style.fontSize = baseNumber + 'px';
}
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
// window.addEventListener('resize', setRem);
}
(4)关于高德地图的使用
到时候再出一篇蚊帐讲,都放一个蚊帐打蚊子太累了。
(5)关于element-ui
饿了么ui,也是再拿一个纹章讲,纹章不好修炼,而且还是蛮多的。
(6)page里面自动调用组件的方法
从所周知,每写一个调用一个很头疼,所以要用懒人的办法,让他自己动:
var comObj = {};
// 引入所有需要的动态组件
const requireComponent = require.context(
"@/components/views", //组件所在目录的相对路径
true, //是否查询其子目录
/\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
requireComponent.keys().forEach(fileName => {
// 获取文件名
var names = fileName
.split("/")
.pop()
.replace(/\.\w+$/, "");
// 获取组件配置
const componentConfig = requireComponent(fileName);
// 若该组件是通过"export default"导出的,优先使用".default",否则退回到使用模块的根
comObj[names] = componentConfig.default || componentConfig;
});
const requireComponent2 = require.context(
"@/components/common", //组件所在目录的相对路径
false, //是否查询其子目录
/\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
(7)头部历史菜单栏以及缓存问题
点击菜单栏以后,保留历史的页面,也可以关闭清掉,效果如下:
主要是利用了keepalive组件保留页面:
至于头部则是使用了这个组件el-tabs:
<el-tabs v-model="editableTabsValue" type="card" :closable="editableTabs.length>1" @tab-remove="removeTab" class="myElTab" @tab-click="handleClick" v-show="editableTabs.length>0">
<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
{{item.content}}
</el-tab-pane>
</el-tabs>
实现的机理就是往store里面传值,分别传当前已经点击的历史菜单栏List,以及当前活跃的菜单栏activeMenu,后者用于跳转页面,前者用于记录。
移除的方法放一下:
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
//移除点击的菜单
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
this.$store.dispatch("updateActiveMenuList", this.editableTabs);
//删除以后默认高亮最后一个
this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].name;
this.$store.dispatch("updateActiveMenu", this.editableTabsValue);
},
添加的方法放一下:
addTab(targetName) {
//设置高亮标签页
this.editableTabsValue = this.activeMenu;
//循环找到英文对应中文名
let tabName = "";
GlobalSetting.MenuList.forEach(v => {
v.children.forEach(vv => {
if (vv.index == targetName)
tabName = vv.name
})
})
//判断菜单列表中是否已存在,若已存在则不再添加
let flag = this.editableTabs.some(function (v) {
return v.name == targetName
})
if (!flag) {
this.editableTabs.push({
title: tabName,
name: targetName,
content: targetName
});
this.$store.dispatch("updateActiveMenuList", this.editableTabs);
}
},
就写到这叭