Vue入门(1)——简介与安装

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue入门(1)——简介与安装

whuer凌晨 2018-08-06 20:45:00 浏览1022
展开阅读全文

本章节大部分内容均摘自官方文档,目前使用的Vue版本为v2.5.17建议参考官方文档,更为详细。写本篇文章,只是为完善【Vue入门】系列,此外,关于如何使用vue-cli3.0搭建一个新项目,以及如何将vue-cli2.0构建的项目升级到vue-cli3.0,可以参考Vue-cli 3.0搭建Vue项目

vue.js是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

兼容性

Vue不支持IE8及以下版本,因为Vue使用IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器
Vue目前最新版本v2.5.17,更新日志请看Github

安装方式:直接用<script>引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

请确认了解不同构建版本并在你发布的站点中使用生产环境版本,把 vue.js 换成 vue.min.js。这是一个更小的构建,可以带来比开发环境下更快的速度体验

安装方式:命令行工具(CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档

基本的使用,可以参考我的另一篇文章:Vue-cli 3.0搭建Vue项目

对不同构建版本的解释

NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别:

UMD CommonJS ES Module
完整版 vue.js vue.common.js vue.esm.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
完整版 (生产环境) vue.min.js - -
只包含运行时版 (生产环境) vue.runtime.min.js - -

术语

  • 完整版:同时包含编译器运行时的版本
  • 编译器:用来将模板字符串编译成为Javascript渲染函数的代码
  • 运行时:用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本上就是除去编译器的其它一切。
  • UMD: UMD版本可以通过<script>标签直接用在浏览器。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)
  • CommonJS: CommonJS版本用来配合老的打包工具比如 Browserifywebpack 1。这些打包工具的默认文件(pkg.main)是只包含运行时的CommonJS版本(vue.runtime.common.js)
  • ES Module: ES module 版本用来配合现代打包工具比如 webpack 2Rollup。这些打包工具的默认文件 (pkg.module) 是只包含运行时的 ES Module 版本 (vue.runtime.esm.js)。

运行时 + 编译器 vs. 只包含运行时

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:

webpack

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

Rollup

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

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

Parcel

package.json中添加

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

开发环境 vs. 生产环境模式

对于 UMD 版本来说,开发环境/生产环境模式是硬编码好的:开发环境下用未压缩的代码,生产环境下使用压缩后的代码。

CommonJS 和 ES Module 版本是用于打包工具的,因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。

CommonJS 和 ES Module 版本同时保留原始的 process.env.NODE_ENV 检测,以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块,以减少最终的文件尺寸。

webpack

在 webpack 4+ 中,你可以使用 mode 选项:

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中,你需要使用 DefinePlugin

var webpack = require('webpack')

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

网友评论

登录后评论
0/500
评论
whuer凌晨
+ 关注