• 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模块。

  • 相关阅读:
    第五周:函数
    第四周:循环控制
    第三周:循环
    第二周:判断
    第一周:简单的计算程序
    cocos2dx-lua采用pbc解析proto问题修正
    cocos2dx 3.9.1 mac模拟器log输出bug修正
    基于dragonbones的cocos2dx lua封装
    EF 3.0 要开启 数据库连接复用 MultipleActiveResultSets=true
    找不到资产文件“xxxxobjproject.assets.json
  • 原文地址:https://www.cnblogs.com/LittlePANDA-ZSJ/p/11205213.html
Copyright © 2020-2023  润新知