Category: Vue

vuex

wee / / Vue, Web

vuex 保存
export default {
name: ‘App’,
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(“store”) ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem(“store”))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener(“beforeunload”,()=>{
sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))
})
}
}

vue 路由

wee / / Vue, Web

1 如果 有子路由， 父路由的name 要去掉，否则 不显示
2 为什么在keep-alive组件中使用computed计算属性数据没有变更

Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。 keep-alive组件不会执行created钩子函数
[cc][/cc]来缓存组件状态 用 activated、deactivated 钩子 更新内容

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
beforeEnter: 路由独享守卫
beforeRouteEnter: 路由组件的组件进入路由前钩子。
beforeResolve:路由全局解析守卫
afterEach:路由全局后置钩子
beforeCreate:组件生命周期，不能访问this。
created:组件生命周期，可以访问this，不能访问dom。
beforeMount:组件生命周期
deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
mounted:访问/操作dom。
activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
执行beforeRouteEnter回调函数next。

vue css 作用到子组件

wee / / css, Vue

1. 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
[cc lang=”html”]

[/cc]

上述代码将会编译成：
[cc]
.a[data-v-f3f3eg9] .b { /* … */ }[/cc]

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作

vue cli3.0 分离常用库和 在页面head 注入cdn

wee / / Vue

[cc lang=”javascript”]
const path = require(‘path’);
const CompressionWebpackPlugin = require(‘compression-webpack-plugin’);
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);
const productionGzipExtensions = [‘js’, ‘css’];
const isProduction = process.env.NODE_ENV === ‘production’;

function resolve(dir) {
return path.join(__dirname, dir);
}

// 预发布环境
const isLocalBuild = process.env.IS_LOCAL_BUILD === ‘isLocalBuild’;
console.log(‘前端文件预发布打包- isLocalBuild:’, isLocalBuild);

// 非externals CND前缀设置
const CDN_URL = isLocalBuild ? ‘/’ : ‘//s.zypj.nasetech.com/’;

// 区分生产环境打包和预发布打包，使用不同的CDN
const JS_CDN = isLocalBuild ? [
// 预发布CDN
] : [
// 生产CDN
];

const cdn = {
// css: [],
js: JS_CDN
}

module.exports = {
lintOnSave: true,
baseUrl: isProduction ? CDN_URL : ‘/’,
chainWebpack: (config) => {
// build打包才使用CDN
if (isProduction) {
config.plugin(‘html’)
.tap(args => {
args[0].cdn = cdn;
return args;
})
}

config.resolve.alias
.set(‘assets’, resolve(‘src/assets’))
.set(‘pages’, resolve(‘src/pages’))
.set(‘components’, resolve(‘src/components’))
.set(‘utils’, resolve(‘src/utils’))
},
devServer: {
host: ‘0.0.0.0’,
port: 8080,
https: false,
hotOnly: false,
disableHostCheck: false,
proxy: {
‘/api/v0/’: {
// 目标 API 地址
target: ‘http://127.0.0.1:4545’,
// 将主机标头的原点更改为目标URL
changeOrigin: true,
},
},
},
configureWebpack: config => {
// 生产模式
if (isProduction) {
config.externals = {
‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘moment’: ‘moment’
}
// 打包生产.gz包
config.plugins.push(new CompressionWebpackPlugin({
algorithm: ‘gzip’,
test: new RegExp(‘\\.(‘ + productionGzipExtensions.join(‘|’) + ‘)$’),
threshold: 10240,
minRatio: 0.8
}))
// 添加自定义代码压缩配置
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
)
}
}
}[/cc]

vue 项目搭建注意要点

wee / / Vue

1. vscode 自动保存检查
[cc lang=”javascript”]
{“eslint.enable”: true,
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “html”,
“autoFix”: true
},
{
“language”: “vue”,
“autoFix”: true
}
]}
[/cc]

vue router

2.1 beforeRouteUpadate
只能监听 子组件路由的切换 如 /foo/:id，在 /foo/1 和 /foo/2 之间跳转会触发，
hash， search 变化都不能触发
2.2 watch {
$router(to, from){} // 解决所有变化
}
2.3 beforeRouteEnter
// 只会在 顶层 主路由变化触发，进入，触发

vue 存store
[cc lang=”javascript”]
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(“store”) ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem(“store”))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener(“beforeunload”,()=>{
sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))
})
}[/cc]