Vue 使用的注意点

Vue 作为现在比较火的前端框架, 受到了很多人的喜欢. 确实使用Vue 也是方便快捷, 上手简单. 下面我记录下我使用Vue 遇到的一些坑, 及使用方法

• 几个常用的lib

• Vue
• Vant,UI框架
• Element,UI框架
• AXIOS
• VUE-Router
• VUEX
• vue-i18n
• vue-awesome-swiper
• vue-awesome-swiper-npm
• vue-parallaxy
• vue-parallaxy-2

• 说一下开发过程中遇到的坑及使用过程中遇到注意点

记录干货

在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

部署的话, 各个平台都不一样, 就不再多说, 可以看一下官方文档