基本使用
我们知道 vue 是一个渐进式框架,我们可以在项目中局部使用,并不侵犯其他代码。
vue 最大的作用就是利用虚拟 dom 将开发者从操作 dom 的繁杂中解放出来,使得开发者可以更专注处理数据的逻辑。
安装:npm i vue
然后我们能就在 webpack 的入口 js 中引入 vue,进行使用了。
import {
createApp} from "vue"
const app = createApp({
template: "<h2>Hello World</h2>"
})
app.mount("#app")
上面代码构建后执行,发现网页没有效果。为什么?这和引入的 vue js 文件有关。
警告信息表示当前运行环境不支持 template 模块选项,建议我们手动导入vue/dist/vue.esm-bundler.js
包。
vue 不同的构建版本
import 导入 vue,我们引入的具体是什么?
打开 node_module 文件夹,查看 index.js。发现会根据当前的构建环境导入不同构建版本的 vue js 文件。
打开 dist 目录可以查看 vue 提供的所有构建版本:
构建版本解析
vue(.runtime).global(.prod).js:
- 通过浏览器中的
vue(.runtime).esm-browser(.prod).js:
- 用于通过原生 ES 模块导入使用 (在浏览器中通过
vue(.runtime).esm-bundler.js:
- 用于 webpack,rollup 和 parcel 等构建工具;
- 构建工具中默认是vue.runtime.esm-bundler.js;
- 如果我们需要解析模板template,那么需要手动指定vue.esm-bundler.js;
vue.cjs(.prod).js:
- 服务器端渲染使用;
- 通过require()在Node.js中使用;
运行时+编译器 vs 仅运行时
vue 这么多构建版本,主要分成两类:runtime + compiler 版和 runtime-only 版。
- 运行时+编译器:包含了对 template 模板的编译代码,更加完整,但是也更大一些;
- 仅运行时:没有包含对 template 版本的编译代码,相对更小一些;
上面 webpack 默认引入的就是只有运行环境的版本,没有编译器,所以打包成功了,但是无法渲染到浏览器上展示,浏览器发出警告。
所以我们需要手动指定带有编译器的构建版本:
import {
createApp} from 'vue/dist/vue.esm-bundler.js'
再次构建,就会发现 hello world 已经渲染到浏览器上了。
webpack 构建 SFC 文件
在Vue的开发过程中我们有三种方式来编写DOM元素:
- 方式一:render 函数的方式,使用 h 函数来编写渲染的内容;
- 方式二:template 模板的方式;
- 方式三:通过 .vue 文件中的 template 来编写模板;
这三种方式对引入的 vue 构建包,要求是不同的。
第一种方式 h 函数可以直接返回一个虚拟节点,也就是Vnode节点,所以只需要 vue 的 runtime 就可以。但是后两种都使用了 template 模块,所以还要用的到 vue 中的 compiler 编译模块。
上面的案例就是使用的第二种方式开发,但是在实际开发中,多数情况下我们都是使用** SFC( single-file components (单文件组件) )**。vue 中就是 .vue 文件。
使用 sfc 的方式,引入 vue,也不用去手动引入 webpack 版本了,可直接form "vue"
vscode 中也有插件对 sfc 文件提供支持:
- 插件一:Vetur,从Vue2开发就一直在使用的VSCode支持Vue的插件;
- 插件二:Volar,官方推荐的插件(后续会基于Volar开发官方的VSCode插件);
vue-loader
我们在打包的入口文件中引用 .vue 文件,webpack 肯定是无法解析的,所以需要对应的 loader:vue-loader
安装:npm i vue-loader -D
注意:配置 vue-loader 后,还需要添加它的插件 VueLoaderPlugin
const {
VueLoaderPlugin } = require("vue-loader")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
全局标识配置 vue2 和 dev-tools
我们会发现控制台还有另外的一个警告:
这个警告要求我们全局配置两个变量:__VUE_OPTIONS_API__``__VUE_PROD_DEVTOOLS__
在GitHub上的文档中我们可以找到说明:
一个是使用 Vue 的 Options API,一个是 Production 模式下是否支持 devtools 工具;虽然他们都有默认值,但是强烈建议我们手动对他们进行配置;
options api 这是 vue3 对 vue2 的兼容措施,假如项目中并没有使用到 options API 也就是没用到 vue2 ,则 webpack 打包的时候就会进行 tree shaking,将不必要的 vue2 核心代码剔除。
我们可以在 webpack 的默认插件 definePlugin 中进行手动配置全局变量,告诉 webpack 是否需要剔除 vue2 核心库代码和生成环境下是否对 devtools 工具的支持。
plugins: [
new DefinePlugin({
BASE_URL: "'./'",
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false
})
]