Vue 作为现在比较火的前端框架, 受到了很多人的喜欢. 确实使用Vue 也是方便快捷, 上手简单. 下面我记录下我使用Vue 遇到的一些坑, 及使用方法
- 几个常用的lib
- 说一下开发过程中遇到的坑及使用过程中遇到注意点
记录干货
在data()中写的赋值属性在window chrome 上偶尔会没有生效, 如果Bool 值 = ture , 或者数据为 [] , 最好还在created()方法中再初始化一次.
如果界面不能及时刷新, 可以执行: this.$forceUpdate()
import 文件用 "./../../" 的方式import
加载的本地图片可以用: require(path) , 其中 path 可以是@ 开始, @表示定位到src 文件下.
如果require(path) path 是变量, 这样不行, require 中的路径必须是字符串 ../assets 开头, 比如: require("@/assets/images/" + file name);
正常情况下 a 的href ="#" , 就会回到顶部, 但在某些情况下这个功能会失效, 比如设置了 app 的高度, 这个时候我们可以结合scroll 事件及发出/接收事件来实现回到顶部的功能.
如果切换了语言之后, 最快的做法是: window.location.reload(); 这样整个网页就重新加载了, 本地再处理好 save locale 就可以.
简单说一下关于loading 与errorAlert , 我们可以利用Vuex 的特性, 动态更改全部属性值, 在vuex 中设置一个属性 = true 时loading 出来, 在app.vue 中写好loading的html ,当调用api 时可以设置vuex 的那个属性 = true / false , 这样就起到全局控制loading 的效果. errorAlert 同理.
在app.vue 中添加@scroll="paperScroll($event)"
实现:
import { events } from "./events";
data() {
return {
appElement: null
};
},
created() {
events.$on("scrollToTop", () => {
if (this.appElement) {
this.appElement.target.scrollTop = 0;
}
});
},
method: {
paperScroll(e) {
this.appElement = e;
}
}
// 可看下面的事件传递怎么写, 如果想回到顶部, 只要发出scrollToTop 事件就可以了.
兄弟组件之间通讯, 不用通过父组件
1. 创建一个events.js ,如下内容
import Vue from 'vue'
export const events = new Vue();
2. 使用
2.1 发出事件
import { events } from "./../events";
//发事件
events.$emit("scrollToTop",{params: "params"});
2.2 监听事件
import { events } from "./../events";
events.$on("scrollToTop", (params) => {
// console.log("params:",params);
});
- 事件是一对多的, 就是发出的事件只要有人监听了, 就会收到, 类似于ios 中的通知, ionic 中的events, android 中的广播
怎么build
- 首先, 在build 之前Vue 要配置好vue.config , 可以在根目录自行创建一个: vue.config.js
const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/';
module.exports = {
publicPath: BASE_URL,
//webpack配置
configureWebpack: {
//关闭 webpack 的性能提示
// performance: {
// hints: false
// }
//警告 webpack 的性能提示
performance: {
hints: 'warning',
//入口起点的最大体积 , 500M
maxEntrypointSize: 500000000,
//生成文件的最大体积, 300M
maxAssetSize: 300000000,
//只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
}
- 去掉Log
一般正式的版本我们是不需要log的,这样会影响速度, 在初始化完成时执行下面的代码可以去掉log
console.log = () => {};
- Vue 的build 特別简单
npm run build
- 但平常如果想在build完成后: 比如想移动哪个文件到root ,或者移动某个文件夹到root 等. 是有这样的需求的,所以我们一般都会写一个build.sh
npm run build
cp -rp src/assets/pdf dist # 将pdf 文件夹复制到 dist 下面
cp src/assets/root/* dist # 将root 中的内容全部复制到 dist 下面
a="$(date +'%s')"
sed -i -e "s/@version/${a}/" dist/index.html # 复制/修改一个index.html-e
echo -e "\033[46;30m build end \033[0m"
-
shell 的用法这里就不多说了, 有兴趣的朋友可以自己去了解一下
-
deploy
部署的话, 各个平台都不一样, 就不再多说, 可以看一下官方文档
网友评论