从零开始使用 Webpack 搭建 Vue3 开发环境

最新推荐文章于 2024-09-14 10:29:57 发布
最新推荐文章于 2024-09-14 10:29:57 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： Vue JavaScript 文章标签： webpack javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41440282/article/details/123229322
版权
本文详细介绍了如何从零开始使用Webpack搭建Vue3的开发环境，包括创建项目、配置Webpack、安装依赖、创建Vue组件、设置路由、Vuex状态管理以及启动本地服务。通过实例展示了Vue3的按需导入特性，响应式系统的变化以及在组件中使用路由和store的方法。
摘要由CSDN通过智能技术生成

从零开始使用 Webpack 搭建 Vue3 开发环境

前情提要

创建项目

首先需要创建一个空目录，在该目录打开命令行，执行 npm init -y 命令创建一个项目，完成后会自动生成一个 package.json 文件

添加一个 Webpack 配置文件

project

  project-name
+ |- index.html
  |- package.json
+ |- webpack.config.js
+ |- /src
+   |- index.js

webpack.config.js

'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[name][ext]'
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    compress: true,
    port: 8088
  }
}

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

安装依赖

npm install --save-dev css-loader html-webpack-plugin style-loader vue-loader@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server
  • VueLoaderPlugin 的导入方式改变了
  • vue-loader@next 当前需要自行指定版本
  • 新增了 @vue/compiler-sfc 替换原来的 vue-template-compiler
  • 其它都是 Webpack 基本配置

启动本地服务

在 package.json 文件对应的 scripts 处新增命令

package.json

{
  "scripts": {
    "dev": "webpack serve"
  }
}

执行 npm run dev 访问 localhost:8088

Vue

npm install --save vue@next vue-router@next vuex@next

当前均需要自行指定版本

根组件

project

  project-name
  |- package.json
  |- /src
+   |- app.vue

app.vue

<template>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
  <router-view/>
</template>
  • 组件的根元素可以允许为多个
  • <router-view> 是 vue-router 定义的容器组件

入口文件

src/index.js

import { createApp } from 'vue'

import App from '@/app.vue'
import router from '@/router'
import store from '@/store'

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

不同于 Vue2.0 的整包导入方式，Vue3.0 采用了按需导入的方式，比如这里只导入了 createApp 这个方法，这样做的好处是可以支持 Webpack 的 treeshaking， 其它没有用到的部分将不会出现在最终打包文件中

createApp 方法创建了一个实例，额外的东西（router, store 等）均挂载到这个实例上，这样做的好处是不会影响到另外创建的其它实例

Vue3.0 的响应式系统使用了 ES2015 的 Proxy （代理），其浏览器兼容性参考 CanIUse，该特性无法兼容旧浏览器

Router

project

  project-name
  |- package.json
  |- /src
+   |- /router
+     |- index.js

src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: require('@/views/index.vue').default
  },
  {
    path: '/about',
    component: require('@/views/about.vue').default
  },
  {
    path: '/:catchAll(.*)',
    component: require('@/views/404.vue').default
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
  • 导入方式也为按需导入
  • 原来的 mode 参数变为 history
  • 除了 createWebHashHistory，还有 createWebHistory 和 createMemoryHistory
  • 路由未匹配时使用 '/:catchAll(.*)'

创建页面组件

project

  project-name
  |- package.json
  |- /src
+   |- /views
+     |- 404.vue
+     |- about.vue
+     |- index.vue

index.vue

<template>
  <h1>Index</h1>
</template>

在组件中使用 router

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    // 也可以解构
    const { push, go, back } = useRouter()
  }
}
  • router 就是原来实例的 $router，也有 beforeEach, afterEach 等等方法

在组件中使用 route

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
  }
}
  • route 是个响应式的代理对象，和原来实例的 $route 一样，也有 query, params 等属性
  • 不建议将 route 解构，解构后的 query, params 并不是响应式的

Store

project

  project-name
  |- package.json
  |- /src
+   |- /store
+     |- index.js

该文件创建并导出一个 Vuex 实例

src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

export default store
  • 导入方式也为按需导入
  • 其它照旧，没有什么变化

在组件中使用 store

import { useStore } from 'vuex'

export default {
  setup() {
    const { state, getters, commit, dispatch } = useStore()

    return {
      state
    }
  }
}

state 是响应式的代理对象，不通过 commit 提交 mutations 而是直接修改 state 也是可以的，控制台并没有给出什么警告

NPM Scripts

在 package.json 文件对应的 scripts 处新增命令

package.json

{
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  }
}

更多

小明爱折腾
关注
专栏目录
从0到1 Webpack搭建Vue3开发、生产环境
qq_43447509的博客
12-01 741
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。
webpack构建vue3项目
weixin_55508765的博客
01-16 2232
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
使用Webpack创建vue脚手架并搭建路由---详解
最新发布
m0_74079648的博客
09-14 1111
Webpack配置vue3以及vue-router vue 是一个非常好用的 javascript 库，现在已经发行了 vue 3，我们可以直接导入使用库文件，也可以使用单文件（SFC）的形式，直接使用库文件会简单一点，我们先来试一下吧。
使用webpack搭建vue3的项目（新手）
mcymmycm的博客
05-27 6241
首先是对应的文件目录，
使用 Webpack 从 0 到 1 构建 Vue3 项目
Lyrelion的博客
12-21 3287
使用 Webpack 从 0 到 1 构建 Vue3 项目
使用 Webpack 从 0 到 1 构建 Vue3 项目 + ts
m0_64544033的博客
09-11 808
去 webpack.config.js 中指定 mode —— 如果指定为 开发环境，那么打包出来的代码，不会被压缩。可以考虑不打包 vue，在 public/index.html 中，采用 cdn 方式引入 vue，进而减小体积。这样，main.ts 里就不会爆红了，因为 ts 现在认识 vue 了。为了排除打包文件，在 webpack.config.js 中，补充配置。利用设置好的别名 @，在 main.ts 中进行引入，发现报错了。在 webpack.config.js 中，补充配置。
从零开始搭建一个基于Webpack的Vue开发环境
08-12
本教程将详细介绍如何从零开始搭建一个基于Webpack的Vue开发环境。 首先，你需要确保已经安装了Node.js，因为Webpack和Vue.js的构建工具依赖于Node.js环境。你可以通过访问 https://nodejs.org/ 下载并安装最新版本...
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
09-02
在本文中，我们将深入探讨如何使用Webpack从零开始搭建一个基于Vue3、Sass、Element-Plus和TypeScript的项目。Webpack是一个强大的模块打包工具，它能够处理JavaScript、CSS和其他资源，将它们打包成优化过的单一...
详解如何从零开始搭建Express+Vue开发环境
10-18
【Express+Vue开发环境搭建详解】 在现代Web开发中，集成前后端框架能够极大地提高开发效率和项目的可维护性。本文将详细介绍如何从零开始搭建一个基于Express（Node.js的Web应用框架）和Vue（渐进式JavaScript框架...
webpack4+vue3.0+element-plus创建基于vue3的项目
Mr_XiMu的博客
01-15 3817
webpack4+vue3.0+element-plus创建基于vue3的项目
vue init webpack 建vue项目报错的解决方法
10-17
今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3.0项目构建流程
qq_30764777的博客
12-13 785
前言 19年8月份的时候，vue-cli更新到了3.X，新版本的脚手架封装度更高，配置起来简单许多，旨在让用户把精力都放在编写业务代码中，3.X脚手架已经自动搭建在webpack4上，所以不用大家再去从webpack3升级到webpack4,当然性能也提高了很多，所以推荐大家使用cli3.X版本去搭建自己的项目，通过这篇教程帮大家熟悉使用vue cli3去搭建vue项目。 安装 1.卸载旧版本cli 如果你之前都是基于vue-cli2.X,你需要先卸载它： #卸载vue-cli npm unin
创建vue3.0项目
weixin_45043548的博客
03-11 1477
创建vue3.0项目 安装odejs并配置npm包的cache和global地址 安装vue ： npm install vue@next 安装vue手脚架： npm install -g @vue/cli 安装vue初始化：npm install -g @vue/cli-init 初始化项目，并按照提示走到最后：vue init webpack ...
vue3结合webpack创建项目
zt199718的博客
09-09 491
创建vue3.0项目+webpack 新建一个项目 vue init webpack mypro//注意名字可能命名会提示出错 一个提示，关于vue2.0和vue3.0 输入提示命令 npm install -g @vue/cli-init 安装成功，再次输入新建一个项目命令（1） ...
Vue_03_webpack的使用
LycLhsYYY的博客
06-20 198
开始
Vue之3——webpack创建vue项目
堂哥码财的博客
04-19 297
1、先创建一个空目录，初始化 cd demo npm init 执行后，有一系列选项，按回车键快速确认，最终项目目录下生成 package.json文件。 2、本地局部安装 webpack npm install webpack --save-dev 安装 webpack-dev-server npm install webpack-dev server --save -dev 3、增加webpack.config.js webpack.config.js文件 var path= require ('
vue - 开始vue3项目的搭建
sunshime的博客
08-23 631
  近期开始学习vue3，所以在这里记录一下，主要使用的是脚手架的方式搭建的项目。注意点：我这里是直接在vue2.x的基础上全局安装vue3脚手架的，达到vue2.x和vue3可以同时使用的效果，所以跟官网的安装介绍会有所不同。 一、环境搭建 1、安装node环境   版本需要在8.9以上，包括8.9版本。可以使用 node -v 检查自己安装的node版本。 2、搭建脚手架 vue-cli3.0 （全局安装） npm install @vue/cli -g 可以使用 vue -V 检查是否安装成功。
vue3学习——vue安装及项目创建
sydjcwx
05-02 851
环境安装： win10 安装vue环境及pycharm中编辑vue 创建项目： 项目创建命令： vue init webpack runoob-vue3-test 一路回车，根据提示如下选择： ? Project name runoob-vue3-test ? Project description A Vue.js project ? Author andy ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint y
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值