vue -- 小知识

本篇提要

• vue-cli快速开始
• build 打包过滤console.log（）日志
• webpack+vue自定义路径别名
• 关于vuejs中使用事件名
• vue文件中的样式不生效
• vue组件异步加载
• 指令keep-alive
• v-if与v-show的区别

正文

1、vue-cli快速开始

兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

命令行工具 (CLI)：Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
   npm install --g vue-cli
# 创建一个基于 webpack 模板的新项目
   vue init webpack my-project
# 安装依赖，走你
   cd my-project
   npm install
   npm run dev

若要使用IE系列浏览器打开网址，则需要借助babel-polyfill来实现高级特性转换。

cnpm i babel-polyfill -S    //注意这里是生产依赖

在main.js中引入即可：

import 'babel-polyfill'     // 由于是语法转换的作用，所以要尽量靠前放，建议第一行

2、build 打包过滤console.log（）日志

在webpack.base.conf.js 的 plugins 里面加上

plugins: [
    ...
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
        }
    })
]

3、webpack+vue自定义路径别名

vue-cli 用的是webpack，也可以使用webpack自定义别名这个功能，自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径，直接使用自定义别名就可以找到文件的位置。

设置地址：build/webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'assets': path.resolve(__dirname, '../src/assets'),
        'static':path.resolve(__dirname, '../static'),
        'components': path.resolve(__dirname, '../src/components')
    }
  },

使用：

<template>
    <img src="~assets/images/logo.jpg" />
    <img :src="imgURL" alt="">
    <img :src="imgURL2" alt="">
</template>

<script>
    import imgURL from 'assets/images/bgms/title.png'
    
    data() {
        return {
            imgURL: imgURL,
            // imgURL:require('../../assets/img/bgms/title.png'),   //实际的相对路径
            // imgURL:require('assets/img/bgms/title.png') ,        //别名
            imgURL2:require('static/img/pubm/nullbg.png') ,  
            // imgURL2:require('~assets/img/bgms/title.png') ,       //错误
        }
    }
</script>

<style>
    .logo {
        background: url('~asset/images/bg.jpg')
    }
</style>

在别名前面加一个~，是告诉加载器它是一个模块，而不是相对路径。

注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么。

4、关于vuejs中使用事件名

在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用@click="event",这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写@click="myEvent"而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制！

5、vue文件中的样式不生效

按照Vue官方给出的说法，style身上加上scoped可以让样式“私有化”(即只针对本vue文件中的代码有效，不会对别的代码造成样式覆盖问题)。很多时候，我们引入了第三方UI，在vue文件中进行样式覆盖不生效，多半问题是style上的scoped导致的。

解决方案：少量的可另写一个style标签不加scoped，大量的可以另写css文件，总之解除scoped的限制，若使用sass或者其他，可以在最外层进行嵌套防止污染或冲突。

6、vue组件异步加载

将一个组件（以及其所有依赖）改为异步加载，只需要把：

import HelloWorld from '@/components/common/HelloWorld'

//改成
const HelloWorld = () => import('@/components/common/HelloWorld')

8、指令keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

<component :is='currentView' keep-alive></component>

9、v-if与v-show的区别

v-if直接不渲染这个DOM元素，而v-show是会渲染DOM元素，只是使用display:none隐藏，打开开发者工具可以看到该DOM。

待续……