Vue - SKILL.NULL

vite.config.ts基础配置分享

更多配置参考：https://vitejs.dev

vite.config.ts

const fs = require("fs")

const path = require("path")

// Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中

const dotenv = require("dotenv")

const envFiles = [

/** default file */ `.env`,

/** mode file */ `.env.${process.env.NODE_ENV}`

]

for (const file of envFiles) {

const envConfig = dotenv.parse(fs.readFileSync(file))

for (const k in envConfig) {

process.env[k] = envConfig[k]

}

module.exports = {

alias: {

'/@/': path.resolve(__dirname, './src')

optimizeDeps: {

include: ['echarts']

hostname: process.env.VITE_HOST,

port: process.env.VITE_PORT,

// 引用全局 scss

cssPreprocessOptions: {

scss: {

additionalData: '@import "./src/assets/style/index.scss";'

}

// 压缩

minify: 'esbuild',

// 是否自动在浏览器打开

open: false,

// 是否开启 https

https: false,

// 服务端渲染

ssr: false,

/**

* Base public path when served in production.

* @default '/'

base: process.env.VITE_BASE_URL,

/**

* Directory relative from `root` where build output will be placed. If the

* directory exists, it will be removed before the build.

* @default 'dist'

outDir: process.env.VITE_OUTPUT_DIR,

// 反向代理

proxy: {

api: {

target: "http://www.skillnull.com",

changeOrigin: true,

rewrite: path => path.replace(/^\/api/, "")

}

.env

# loaded in all cases

VITE_HOST = '0.0.0.0'

VITE_PORT = 8080

VITE_BASE_URL = './'

VITE_OUTPUT_DIR = 'dist'

&[……]

2021-01-20by SKILLNULL Vue 阅读(1917)评论(4)

element-ui 表格控制列显隐简单方案

核心是使用v-if控制列的显隐

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<div>

<el-table

:data="item.data"

@filter-change="value => filterChange(value,index, 'tables')"

:span-method="value => cellMerge(value,'tables')"

:header-cell-style="{background:'#fbfbfb'}"

size="mini"

doLayout

border

<el-table-column

v-for="(ele,index) in item.columns"

:label="ele.text"

:prop="ele.value"

show-overflow-tooltip

v-if="ele.flag"

:key="ele.value + index"

:resizable="false"

<span>{{scope.row[scope.column.property]}}</span>

</template>

</el-table-column>

<el-table-column

:key="item.columns.length + 1"

fixed="right"

width="50"

v-if="item.stash_columns"

:filters="item.stash_columns"

:filtered-value="item.filter_value"

:resizable="false"

</template>

</el-table-column>

</el-table>

</div>

</template>

export default {

data () {

return {

tables: [

{

data: [],

columns: [

{

text: '滴滴',

value: 'didi',

flag: true

{

text: '哒哒',

value: 'dada',

flag: true

{

text: '嘿嘿',

value: 'heihei',

flag: true

{

text: '哈哈',

value: 'haha',

flag: false

}

]

}

]

}

methods: {

// 处理数据

handlerData (type) {

const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}]

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

this.$set(this[type][index], 'data', data)

this.$set(this[type][index], 'stash_columns', item.columns)

this.$set(this[type][index], 'filter_value', [])

const columns = item.stash_columns

const filter_value = item.filter_value

columns && columns.length > 0 && columns.map((ele, idx) => {

if (ele.flag) {

filter_value.push(ele.value)

}

})

this.$set(this[type][index], 'filter_value', filter_value)

})

// 控制列显隐

filterChange (value, idx, type) {

switch (type) {

case type:

for (const ele in value) {

this.$set(this[type][idx], 'show_columns', value[ele])

}

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const columns = item.columns

const show_columns = item.show_columns

if (show_columns && show_columns.length > 0) {

columns && columns.length > 0 && columns.map((val, key) => {

this.$set(this[type][index].columns[key], 'flag', false)

show_columns.map((ele) => {

if (val.value === ele) {

this.$set(this[type][index].columns[key], 'flag', true)

}

})

}

})

break

default:

break

}

// 合并单元格

cellMerge ({row, column, rowIndex, columnIndex}, type) {

this.$nextTick(() => {

const tables = this[type]

tables && tables.length > 0 && tables.map((item, index) => {

const show_columns = item.show_columns

const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length

if (columnIndex === length - 1) {

return [1, 0]

} else if (columnIndex === length) {

return [0, 0]

}

})

}

mounted () {

this.handlerData('tables')

}

</script>

2020-09-11by SKILLNULL Vue 阅读(665)评论(0)

一个优质的Vue组件库应该遵循什么样的设计原则

一、组件库的价值

就个人而言，拥有一套自己的组件库，可以让你的开发变得更高效，让你在行业里更有价值。
就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范，让你的团队在公司更具有影响力。
就公司而言，拥有一套公司维护的开源组件库，可以让你的公司在行业里更具有影响力。

[……]

2018-12-19by SKILLNULL Vue 阅读(2723)评论(0)

Vue项目SEO优化的另一种姿态

背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个[……]

2018-12-19by SKILLNULL Vue, Webpack 阅读(2693)评论(0)

在vue中使用import()来代替require.ensure()实现代码打包分离

一、require.ensure() 方法来实现代码打包分离

require.ensure() 是 webpack 特有的，已经被 import() 取代。

require.ensure(

dependencies: String[],

callback: function(require),

errorCallback: function(error),

chunkName: String

)

给定 dependencies 参数，将其对应的文件拆分到一个单独[……]

2018-12-03by SKILLNULL Vue, Webpack 阅读(4246)评论(0)

H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)

</div>

</template>

export default {

data() {

return {

playFlag: true,

playImg: require('../../static/play.png'),

pauseImg: require('../../static/pause.png'),

clickMusicBtn: false

}

mounted() {

this.audioAutoPlay('bgMusic');

document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q

if (this.clickMusicBtn) { // 点击了关闭音乐按钮

if (this.playFlag) {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else {

this.audioPause('bgMusic');

this.playFlag = false;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else { // 网页被呼起

this.audioPause('bgMusic');

this.playFlag = false;

}

} else { // 未点击关闭音乐按钮

if (this.playFlag) {

this.audioPause('bgMusic');

this.playFlag = false;

} else {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioPause('bgMusic');

this.playFlag = false;

} else { // 网页被呼起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

});

methods: {

bgMusicPlayOrPause(id) {

this.clickMusicBtn = !this.clickMusicBtn;

if (this.playFlag) {

this.audioPause(id);

this.playFlag = false;

} else {

this.audioAutoPlay(id);

this.playFlag = true;

}

audioPause(id) {

var audio = document.getElementById(id);

audio.pause();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.pause();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.pause();

}, false);

audioAutoPlay(id) {

var audio = document.getElementById(id);

audio.play();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.play();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.play();

}, false);

}

2018-12-03by SKILLNULL HTML&CSS, Vue, 微信阅读(4507)评论(0)

Vue自定义指令实现点击div以外部分隐藏div

首先新建一个directives.js文件，自定义一个指令：

export const clickOutSide = {

// 初始化指令

bind(el, binding, vnode) {

function documentHandler(e) {

// 这里判断点击的元素是否是本身，是本身，则返回

if (el.contains(e.target)) {

return false;

}

// 判断指令中是否绑定了函数

if (binding.expression) {

// 如果绑定了函数则调用那个函数，此处binding.value就是handleClose方法

binding.value(e);

}

// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听

el.__vueClickOutside__ = documentHandler;

document.addEventListener('click', documentHandler);

update() {},

unbind(el, binding) {

// 解除事件监听

document.removeEventListener('click', el.__vueClickOutside__);

delete el.__vueClickOutside__;

};

然后在组件内：

确认过眼神，不是我的八哥

</div>

</template>

import {clickOutSide} from './directives'

export default {

data() {

return {

closeFlag: true

}

directives: {

clickOutSide

}

</script>

2018-12-03by SKILLNULL Vue 阅读(3279)评论(0)

Vue插件合集(部分插件使用时出现的问题解决方法)

1.vue-easytable (基于vue2.x )
https://github.com/huangshuwei/vue-easytable
http://doc.huangsw.com/vue-easytable/app.html#/table
[crayon-607afa523ee[……]

2018-12-03by SKILLNULL Vue 阅读(4292)评论(0)

vue中使用 echarts3.0 或 echarts2.0

一、echarts3.0(官网: http://echarts.baidu.com/)

首先通过npm安装echarts依赖，安装的为3.0版本

npm install echarts -s

也可以使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -s

引入的方式有两种：

1、main.js中全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

然后在组件中通过 this.$echarts.init(document.getElementById('your_div')) 来初始化

2、只应用基本包，加快加载速度

在需要使用echarts的组建中引入：

let echarts = require('echarts/lib/echarts')

然后通过 echarts.init(document.getElementById('your_div')) 来初始化

使用的话就比较简单，直接将官方实例封装一个为方法，在mounted中调用即可。

二、 echarts2.0(官网: http://echarts.baidu.com/echarts2/)
[crayon-607afa52[……]

2018-12-03by SKILLNULL Vue 阅读(4218)评论(0)

Vue根据URL传参来控制全局 console.log 的开关

如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，

用正则匹配一下参数：

const getQueryStr = (name) => {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

};

当链接中含有这个参数时，将debug的状态置为true，这时console.log是正常可打印状态，否则将debug的状态置为false，

这时重写console.log函数：

console.log = function () {

return false;

}

这时的全局变量就可以用在整个项目中了，用来控制一些调试窗口的显隐。

在Vue中可以直写在stores/index.js中,当然，写在其他入口文件里也可以：

const getQueryStr = (name) => {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

};

/* 若链接后面带上参数 envFlag=monitor

* 则将 debug 置为true，否则置为false

const monitor = 'monitor';

const envFlag = getQueryStr('envFlag');

let debug = monitor ? true : false;

if (envFlag === 'monitor') {

console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");

debug = monitor;

} else {

debug = '';

console.log = function () {

return false;

}

const state = {debug: debug};

export const store = new vuex.Store({state, mutations});

这时候如果你想控制一个组件的显示或隐藏，只需要在vuex的getters中声明一下就可以使用变量debug了：

vuex: {

getters: {

<span style="color: #ff0000;">debug: state => state.debug</span>

}

做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话，

就可以看到项目所有的 console.log 信息。

2018-12-03by SKILLNULL Vue 阅读(4414)评论(0)

2021年四月
一	二	三	四	五	六	日
« 9月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30