Vue相关知识点记录

1.安装

1. vue不支持ie8以下版本（无法模拟ECMAScript5特性），支持所有兼容ECMAScript5的浏览器。

2. 浏览器安装Vue Devtools， 可以在更友好的界面中审查和调试Vue应用。

3. 直接下载用script标签引入，Vue会被注册成一个全局变量。

4. 开发环境不要使用压缩版本，否则没有常见错误的相关警告。生产环境使用压缩版本，是一个更小的构建，获得更快的速度体验。

5. 用Vue构建大型应用时推荐使用NPM安装，它能很好的和谐webpack、Browserify模块打包器配合使用，

6. Vue提供了官方的CLI，为单页面应用（SPA）快速搭建繁杂的脚手架。（热重载，保存时lint校验，生产环境可用的构建版本）。

7. vue.js有多个构建版本（npm包的dist目录下）
   
   a. 完成版：同时包含编译器和运行时的版本
   
   b. 编译器：用来将模板字符串编译成JS渲染函数的代码
   
   c. 运行时：用来创建Vue实例，渲染并处理虚拟Dom等的代码

8. 客户端编译模板（运行时+编译器），当使用vue-loader或vueify的时候，*.vue文件内部的模板会在构建时预编译成js。
   
   最终打好的包里是不需要编译器的，只用运行时版本即可。（体积要比完成版体积小大约30%）
   
   ps. 仍希望使用完整版配置,代码如下：

// webpack
module.exports = {
   //..
   resolve: {
       alias: {
           // webpack1时需用'vue/dist/vue.common.js'
           'vue$': 'vue/dist/vue.esm.js'
       }
   }
}

// rollup
const alias = require('rollup-plugin-alias')

rollup({
    //..
    plugins: [
        alias({
            'vue': require.resolve('vue/dist/vue.esm.js')
        })
    ]
})

// Browserify,添加到项目的package.json
{
    // ..
    "browser": {
        "vue": "vue/dist/vue.comme.js"
    }
}

// parcel,添加到项目的package.json
{
    // ..
    "alias": {
        "vue": "./node_modules/vue/dist/vue.comme.js"
    }
}

2.开发环境和生产环境的配置

UMD版本的开发环境/生产环境是硬编码好的，开发环境下用未压缩代码，生产环境下使用压缩代码。

CommonJs和ES Module版本用于打包工具，不提供压缩版本，需要自行压缩。

CommonJs和ES Module虽保留原始的process.env.NODE_ENV检测，以决定运行在什么模式下。但是我们应该使用适当的打包工具替换这个环境变量，来控制Vue运行的模式。

ps. 把process.env.NODE_ENV替换为字符串字面量可以让UglifyJS之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终文件尺寸.

// webpack4+,使用mode选项
module.exports =  {
    mode: 'production'
}

// webpack3及更低版本，使用DefinePlugin
var webpack = require('webpack');

module.exports = {
    //..
    plugins: [
        //..
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        })
    ]
}

// rollup使用rollup-plugin-replace
const replace = require('rollup-plugin-replace')

rollup({
    //..
    plugins: [
        replace: ({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
}).then(...)

// Browserify,为包应用一次全局的envify转换
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

3.CSP环境

Google Chrome Apps，会强制应用内容安全策略(CSP),不能使用new Function()对表达式求值,这时可以用CSP兼容版本。完整版本依赖该功能编译模板，所以无法在这些环境下使用。

另一方面，运行时版本完全兼容CSP，当通过webpack+vue-loader或者Browserify+vueify构建时，模板将被编译为render函数，可以在CSP环境中完美执行。

4.开发版本(*)

Github仓库的/dist文件夹只有在新版本发布时才会提交，如果想要使用Github上VUE最新的源码，需要自己构建。

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_module/vue
npm install
npm run build

5.Bower

Bower只提供UMD版本

# 最新稳定版本
$ bower install vue

6.AMD模块加载器

所有UMD版本都可以直接使用AMD模块。