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

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


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

使用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文件中使用lesstypescript,感兴趣的可以亲自去尝试,就当扩展训练吧。


拓展


以上是直接使用webpack搭建的vue的一套开发环境,但是现在市面还是有开箱即用的方案,不需要额外的配置就可以轻松搭建一套vue的开发环境,最具代表的就是vue-clivite


  • vue-cli是官方指定的vue脚手架,提供一整套完整的配置,让你开箱即用。
  • vitevue的作者开发的一个打包工具,针对的场景不仅仅是vue,内部使用的是esModule,对于开发构建速度有很大的提升。


总结


今天没有官方总结,就自己总结了,使用webpack去创建一个vue的开发环境并不难,合理的使用好拼图(loaderplugin)就可以了。

vue-loader会将.vue文件进行转换。


  • <template>会转换成render函数。
  • <script>会转换成JavaScript字面量形式。
  • <style>会根据配置转换成对应的css,或在.js中,或单独存在.css文件中。


目录
相关文章
|
1月前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
49 9
|
2月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
72 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
3月前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
123 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
2月前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
|
2月前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
25 0
|
3月前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
3月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表