Vue项目常用总结
常用插件
模块分析插件
安装以后，重新运行项目的时候，会自动打开项目分析页面
安装
npm i -D webpack-bundle-analyzer
vue.config.js 配置
const { defineConfig } = require("@vue/cli-service");
const path = require("path");
// 打包分析插件 -----
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
css: {
loaderOptions: {
sass: {
// @是src的别名
additionalData: `
@import "@/style/_var.scss";
@import "@/style/general.scss";
`,
},
},
},
devServer: {
// disableHostCheck: true,
proxy: {
"/dev/api/": {
target: "http://demo.365chanlun.com/",
changeOrigin: true,
pathRewrite: {
"^/dev/api": "",
},
},
"/pro/api/": {
target: "https://365chanlun.com/",
changeOrigin: true,
pathRewrite: {
"^/pro/api": "",
},
},
},
},
publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/",
// 打包分析插件 -----
configureWebpack: (config) => {
config.plugins.push(new BundleAnalyzerPlugin());
},
});
vue-slim-better-scroll 移动端滚动插件
实例文档：https://github.com/wannaxiao/vue-slim-better-scroll/blob/master/demo/default/App.vue
vue-slim-better-scroll 是开箱即用的/渐进式的 vue 移动端滚动组件/插件，基于 better-scroll
1.下载安装
npm i -D vue-slim-better-scroll
2. 引入
方式一：插件形式 全局 引入
// 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)
方式二：组件形式引入
import Scroll from 'vue-slim-better-scroll'
export default {
components: {
Scroll
},
}
3. 使用
1. Template中的Scroll配置
<Scroll
ref="scroll"
:listen-scroll="true"
:pull-up-config="pullUpConfig" //配置项
:style="{height: scrollHeight}" //配置项
class="container"
@pullingDown="refresh" //refresh下拉刷新回调
@pullingUp="loadMore" //loadMore上拉加载更多回调
>
//滚动区域的内容//
</Scroll>
3. data()里面的配置
//滚动区域的配置项
pullUpConfig: {
threshold: 0, // 提前触发 pullingUp 的距离 默认100
txt: {more: '上拉加载', noMore: '— 没有更多文章 —'},
},
scrollHeight: undefined
4. 监控数据的设置
watch: {
comments: {
handler(val) {
if (!val.length) return;
if (this.$refs.scroll) {
this.$refs.scroll.update();
}
},
immediate: true,
deep: true,
}
},
5. refresh回调函数和loadMore回调函数
//下拉刷新数据
refresh() {
//获取品读列表信息
this.getListen({tags: this.tag, head: true});
},
//上拉加载更多数据
loadMore() {
//获取更多
this.getMoreListen({tags: this.tag});
}
设置全局共享变量 _var.scss
创建一个 _var.scss 文件，利用:export {} 导出需要的变量
$mainColor:#324157;
$mainText:#bfcbd9;
:export {
mainColor: mainColor;
mainText:$mainText;
}
vue.config.js 中配置 css.loaderOptions
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
css: {
loaderOptions: {
sass: {
// @是src的别名
additionalData: `
@import "@/style/_var.scss";
@import "@/style/general.scss";
`,
},
},
}
});
nextTick()
作用：在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM
activated和deactivated生命周期
<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。- 当组件在
<keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 - 如
<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了，而且A组件的文字颜色也是我们之前设置过的。
@click.native和@click.stop和@click.self
1. vue @click.native 原生点击事件
- 给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）
- 等同于在自组件中：子组件内部处理click事件然后向外发送click事件：$emit("click".fn)
2. vue @click.stop 阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
3. vue @click.prevent 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
在js数据中如何引用图片
- 因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。
- 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么
let imageUrl = require("./img/marker_green.png");
webpack中配置别名alias
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'img': resolve('static/img'),
}
},
- CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径，
在使用时加上~,告诉加载器它是一个模块，而不是相对路径
<img src="~img/navbar/demo.png" alt="" />
- 在js中使用相对路径时，不需要加~
<script>
import 'assets/css/style.css'
</script>
Vue项目打包部署到apache服务器
参考文档：
https://www.cnblogs.com/ykCoder/p/11022572.html
引入阿里图标库
1. 下载图标库，解压项目
2. main.js 全局引入
// 引入阿里图标库
import "@/assets/iconfonts/iconfont.css";
3. 使用图标
<div class="iconfont icon-zhanghugaikuang"></div>
相同component 不同参数
比如：发表文章和编辑文章都是使用同一的个组件 article
{ path: "/create",component: article, name:'发表文章'},
{ path: "/edit/:id",component: article, name:'编辑文章'},
默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，此时可以在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
还有另外一种方式，就是通过meta设置参数来区分
{ path: "/create",component: article, name:'发表文章'},
{ path: "/edit/:id",component: article, name:'编辑文章',meta:{isEdit:true}},
判断是否是 编辑页面
computed: {
isEdit() {
return this.$route.meta.isEdit // 根据meta判断
}
}，
created() {
if (this.isEdit) {
this.fetchData();
}
},
路由懒加载
const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
Vuex 常用
获取state的状态
使用辅助函数
import { mapState } from 'vuex';
computed: {
...mapState('userCenter', {
userInfo: state => state.userInfo,
}),
...mapState({
screenOrientationType: state => state.screenOrientationType
}),
},
不使用辅助函数
this.$store.state.userCenter.userInfo
触发actions方法
使用辅助函数
methods:{
...mapActions("userCenter", ["getUserInfo"]),
}
created(){
// 调用
this.getUserInfo()
}
不使用辅助函数
this.$store.dispatch('userCenter/getUserInfo');
获取getters
使用辅助函数
computed: {
// 获取getters
...mapGetters(['evenorOdd'])
// 如果是模块管理
...mapGetters('users', ['evenOdd'])
}
不使用辅助函数
this.$store.getters.evenOdd
// 如果是模块管理
this.$store.getters["users/evenOdd"]
