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

最新推荐文章于 2024-03-14 16:08:45 发布
最新推荐文章于 2024-03-14 16:08:45 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： Vue JavaScript 文章标签： webpack javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41440282/article/details/123229322
版权

从零开始使用 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"
  }
}

更多

小明爱折腾
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用vue-cli+webpack搭建vue开发环境的方法
08-28
主要介绍了使用vue-cli+webpack搭建vue开发环境的方法,需要的朋友可以参考下
使用Webpack 搭建 Vue3 开发环境过程详解
11-20
从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录，在该目录打开命令行，执行 npm init 命令创建一个项目，这个过程会提示输入一些内容，完成后会自动生成一个 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
webpack 搭建 vue3 项目
最新发布
lilier233的博客
03-14 332
npm init -y（y是yes的缩写，即npm后面需要手动配置的选项采用默认配置）
vue init webpack 建vue项目报错的解决方法
10-17
今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
创建第一个vue3项目
u014520406的博客
05-19 417
一、使用@vue/cli作为脚手架搭建 1.全局安装@vue/cli，安装脚本如下： npm i @vue/cli -g 或者 yarn global add @vue/cli 2.安装完成后验证版本在v4.5以上 PS D:\WorkSpace\web\workspace-vue> vue -V @vue/cli 5.0.4 或者 PS D:\WorkSpace\web\workspace-vue> vue --version @vue/cli 5.0.4 3.使用
vue3结合webpack创建项目
zt199718的博客
09-09 467
创建vue3.0项目+webpack 新建一个项目 vue init webpack mypro//注意名字可能命名会提示出错 一个提示，关于vue2.0和vue3.0 输入提示命令 npm install -g @vue/cli-init 安装成功，再次输入新建一个项目命令（1） ...
vue3.0项目构建流程
qq_30764777的博客
12-13 754
前言 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
使用 Webpack 从 0 到 1 构建 Vue3 项目
Lyrelion的博客
12-21 3020
使用 Webpack 从 0 到 1 构建 Vue3 项目
02｜Webpack编译搭建：如何用Webpack初构建Vue3项目？
sucaiwa的博客
03-01 832
这节课我们讲了这么多关于Webpack的Vue.js 3项目编译配置的知识，核心展示了企业级项目是怎么做编译配置的。用Webpack搭建Vue.js 3项目，主要包括配置项目目录、根据要求安装依赖（Plugin和Loader）、开发模式和生产模式的设置这几个步骤，其中你要特别注意开发模式和生产模式的配置复用和配置隔离。我们前面也说了，我们选择Webpack，是为了面向企业级项目的学习目标考虑。
使用webpack搭建vue3的项目（新手）
mcymmycm的博客
05-27 5850
首先是对应的文件目录，
使用webpack5搭建vue3项目过程记录(详细注解)
qq_41867900的博客
08-18 2380
webpack5搭建详细记录
使用webpack搭建vue环境的教程详解
10-15
主要介绍了使用webpack搭建vue环境的教程,本文通过实例的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
webpack4手动搭建Vue开发环境实现todoList项目的方法
10-16
主要介绍了webpack4手动搭建Vue开发环境实现todoList项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何用Webpack搭建Vue.js 3项目?
wb1991wb的博客
01-03 793
我们就在src的文件夹里新增两个Vue.js 3的源码内容，为后续编译做准备。当你完成了步骤一的项目目录的结构设计和源码准备后，就可以进行。这里的npm模块分成两种，一种是源码所在的npm模块，另外一种是开发过程中所需要的npm模块。两种npm模块的安装方式都一样，区别就是安装命令要带上不同参数。这里源码代码依赖是 Vue.js 的官方源码库，这时候会自动增加依赖声明到 package.json文件的dependencies字段里。
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 3万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
【vue3】vue.config.js打包配置（vue3 + webpack + 多环境）
zxsy19966的博客
11-02 9935
【VUE3】vue.config.js打包配置
VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理
m0_55170432的博客
11-14 1021
学习
vue-cli3搭建项目之webpack配置
怎么办我好菜啊
01-24 3156
vue-cli3搭建项目之webpack配置 一、vue.config.js文件 const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/we
vue3+webpack快速创建新项目
qq_18390335的博客
06-08 1339
vue create vue-next-test 创建vue3.0项目
使用webpack搭建vue2项目
09-09
对于使用Webpack搭建Vue2项目，你可以按照以下步骤进行操作： 1. 确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来验证它们是否已安装： ``` node -v npm -v ``` 如果没有安装，可以前往 Node.js 官方网站（https://nodejs.org/）下载并安装最新的稳定版本。 2. 创建一个新目录，作为你的项目根目录，并进入该目录。 3. 初始化一个新的npm项目，运行以下命令并按照提示进行操作： ``` npm init ``` 4. 在项目根目录下安装所需的依赖，包括Vue、Vue Loader、Vue Router等。运行以下命令： ``` npm install vue@2 vue-loader@15 vue-router@3 webpack webpack-cli --save-dev ``` 5. 在项目根目录下创建一个`webpack.config.js`文件，并配置Webpack的基本设置。可以参考以下示例： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, ], }, resolve: { alias: { vue$: 'vue/dist/vue.esm.js', }, extensions: ['*', '.js', '.vue', '.json'], }, }; ``` 6. 在项目根目录下创建一个`src`目录，并在其中创建一个`main.js`文件作为Vue应用的入口文件。 7. 在`src`目录下创建一个`components`目录，并在其中创建你的Vue组件。 8. 创建一个简单的Vue组件，并在`main.js`中引入该组件： ```javascript import Vue from 'vue'; import App from './components/App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 9. 创建一个HTML文件作为你的应用的模板，例如`index.html`： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> ``` 10. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "build": "webpack" } ``` 这将允许你在终端中运行`npm run build`命令来构建你的Vue项目。 11. 运行以下命令来构建和打包你的Vue项目： ``` npm run build ``` 这将生成一个`dist`目录，并将打包后的Vue应用文件输出到其中。 12. 打开你的HTML文件，

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值