Vue的两个版本

leehome
693 阅读2分钟

Vue项目的搭建

  • 方法一：使用@vue/cli

1.搜索@vue/cli,进入官网

2.安装@vue/cli

//可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli

3.打开创建一个项目章节

4.运行以下命令来创建一个新项目：

vue create vue-demo-1

5.然后选择配置


6.进入目录，运行yarn serve开启webpack-dev-server（npm run serve）


1.进入网站，点击create a sandbox

2.点击vue项目

3.这样就可以在线调试或者完成后导出zip压缩文件

  • 方法三自己从零搭建vue项目

1.使用webpack或者rollup从零开始

2.适合使用vue半年以上的老手

Vue的两个版本(cdn引入)

  • 完整版vue.js：同时包含编译器和运行时的版本

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

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

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

  • 运行时版本vue.runtime.js:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.js"></script>

把 vue.runtime.js 换成 vue.runtime.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

完整版 vs. 运行时版本

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

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

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

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

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

深入了解两种版本的区别



最佳实践：总是使用非完整版，然后配合vue.loader和vue文件

思路：

1.保证用户体验，用户下载的js文件体积更小，单只支持h函数

2.保证开发体验，开发者可直接在vue文件中写HTML标签，而不是写h函数

3.脏活让loader来做，vue-loader的任务就是把HTML转化为h函数


参考：Vue.js中文文档和@vue/cli官网


前端小白，如有错误请留言指正！！！


avatar
文章
阅读
粉丝