原课程中会讲单文件构建和服务端渲染,这里我将其拆成两个部分做笔记,这篇主要讲单文件构建。
使用vue-loader
处理.vue
文件
*.vue
文件就是Vue SFC(Single File Component)文件,是使用类 HTML 语法描述 Vue 组件的自定义文件格式,和之前的的.css
一样,webpack
不能识别这种类型的文件,这个时候就需要借助vue-loader
。
- 安装依赖:
npm i -D vue vue-loader
课程中少写了
vue
项目的创建和使用,如果直接按照课程中的来大概率是不能成功的,所以这里根据我的理解直接多安装了一个vue
。
- 根据我上一节的节奏来,直接在
base.config.js
文件中添加对vue
的配置,如下
// base.config.js // 引入 vue-loader,vue-loader 会自带一个 VueLoaderPlugin const { VueLoaderPlugin } = require("vue-loader"); module.exports = { module: { rules: [ // 对于 .vue 文件使用 vue-loader 进行处理 { test: /.vue$/, use: { loader: 'vue-loader' } } ] }, plugins: [ // 这里还需要使用 VueLoaderPlugin new VueLoaderPlugin() ] }
上面的配置默认是带有之前章节的配置信息的,上的配置都是新增的配置信息,之后不再赘述。
- 新建一个
App.vue
文件,内容如下
<template> <div> <h1>{{ message }}</h1> <h1>{{ setupMessage }}</h1> </div> </template> <script> // 这里没有使用 setup 语法糖 export default { // vue3是支持setup的 setup() { return { setupMessage: 'hello setup' } }, // 同时也支持 options api data() { return { message: 'hello Vue' } } } </script> <style scoped> h1 { color: orange; } </style>
- 修改
index.js
的内容如下
import {createApp} from 'vue' import App from './App.vue' createApp(App).mount('#app')
- 上一章讲
html-webpack-plugin
的时候,新建了一个index.html
,现在里面的内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack</title> </head> <body> <div id="app"></div> </body> </html>
- 现在可以运行
npm run dev
ornpm run build
查看效果啦。
至此一套
vue
的开发环境已经配置完成,本篇只讲了一个loader
,就完成对一整套的vue
开发环境的配置,这还是建立在之前学习的很多loader
。现在使用之前的配置是可以在
.vue
文件中使用less
和typescript
,感兴趣的可以亲自去尝试,就当扩展训练吧。
拓展
以上是直接使用
webpack
搭建的vue
的一套开发环境,但是现在市面还是有开箱即用的方案,不需要额外的配置就可以轻松搭建一套vue
的开发环境,最具代表的就是vue-cli
和vite
。
vue-cli
是官方指定的vue
脚手架,提供一整套完整的配置,让你开箱即用。vite
是vue
的作者开发的一个打包工具,针对的场景不仅仅是vue
,内部使用的是esModule
,对于开发构建速度有很大的提升。
总结
今天没有官方总结,就自己总结了,使用webpack
去创建一个vue
的开发环境并不难,合理的使用好拼图(loader
、plugin
)就可以了。
vue-loader
会将.vue
文件进行转换。
<template>
会转换成render
函数。<script>
会转换成JavaScript
字面量形式。<style>
会根据配置转换成对应的css
,或在.js
中,或单独存在.css
文件中。