《Webpack5 核心原理与应用实践》学习笔记-> 搭建Vue环境

田八
219 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

原课程中会讲单文件构建和服务端渲染，这里我将其拆成两个部分做笔记，这篇主要讲单文件构建。

使用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 or npm 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文件中。
avatar
文章
阅读
粉丝