vue.config.js 文件配置详情

module.export = {
    //选项 ...
}

基本配置

module.exports = {
    productionSourceMap: false,  //生产环境是否要生成 sourcemap
    publicPath:'./',
    outputDir:'',
    assetsDir:'',
    devServe:{
        port:8090,
        host:'0.0.0.0',
        https:false,
        open:true
    },
    //其他配置
    ...
}

换肤方案 —— 常用的网站主题切换方案

类名切换

:root {
    --background:#fff;
    --color:#000;
    --font_size:14px;
}

dark.vars.css

:root{
    --background:#000;
    --color:#fff;
}

切换时可通过补丁文件或嵌入style的方法来覆盖变量的定义，从而实现主题的切换··

function SwitchTheme (theme) {
    
     const themeFile = `${theme}.vars.css`;
     const themeLink = document.createElement('link');
     themeLink.rel = 'stylesheet';
     themeLink.href = `/css/themes/${themeFile}`;
     document.head.appendChild(themeLink);
    
}

该方案一般用于一些特殊节日时为网站变灰使用，一段代码即可搞定。

:root {
    filter: grayscale(100%);
}

vue中路由跳的转的进度条和数据加载Loading 显示

路由跳转进度条__ NProgress.js

安装

npm install --save nprogress

在 router.js 配置

//如果在main.js 引入并挂在Vue实例上，请最在顶部引入，
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to,from,next)=>{
    NProgress.start() //显示进度条
    next()
})
router.afterEach(()=>{
    NProgress.done() //完成进度条
})

VUE动态绑定class的几种方法

一、对象语法

1、给v-bind:class 设置一个对象 ，可以动态地切换class，例如：

<div id="app">
	<div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})
</script>

对象中也可存在多个属性，动态切换class，：class 可以合class共存

条件判断时

<span :class="{'class1':row.id == '1','class2':row.id == '2'}"></span>

2022-9-29-因规范提交git失败问题

s2:按照规范来提交代码

其实按照规范来提交代码可以大大增加提交时的可读性，git commit 提交规范的语法为 ：

git commit -m “feat: 你的内容”每个规范的含义上图已经给出，可以根据不同的情况来提交。

feat: 新功能（feature）

fix: 修补bug

docs: 文档（documentation）

style: 格式（不影响代码运行的变动）

refactor: 重构（即不是新增功能，也不是修改bug的代码变动）

chore: 构建过程或辅助工具的变动

revert: 撤销，版本回退

perf: 性能优化

test：测试

improvement: 改进

build: 打包

ci: 持续集成

image-20220929114950794

image-20220929115008656

Vscode插件

commit Message Editor

ESlint

Prettier - code formatter

nginx 简单理解 http 的服务器 专门http服务器，just 高性能高并发，反向代理，负载均衡

node 业务处理服务器 不会用node做的服务器对外暴露