webpack配置vue3项目

用webpack搭建Vue3项目一、项目需要的基本依赖1.vue的依赖2.ui组件库依赖3.AJAX请求库依赖（axios）二、几个loader和webpack配置1.引入库2.目录结构三、main.js入口文件与index.html1.main.js2.index.html*四、webpack配置文件五、路由文件总结声明：本文章采用node的包管理工具和webpack。一、项目需要的基本依赖1.

梦诺七棠

3944人浏览 · 2022-04-29 18:21:01

梦诺七棠 · 2022-04-29 18:21:01 发布

用webpack搭建Vue3项目

一、项目需要的基本依赖
二、几个loader和webpack配置
- 1.引入库
- 2.目录结构
三、main.js入口文件与index.html
- 1.main.js
- 2.index.html
*四、webpack配置文件
五、路由文件
六、babel.config.js
更新中~

声明：本文章采用node的包管理工具和webpack。

一、项目需要的基本依赖

1.vue的依赖

声明一点，自从22年3月依赖vue的默认版本就变成了3.x所有后面需要@指定版本。

npm i vue

2.ui组件库依赖

组件库可以自己选择

npm install element-plus --save

3.AJAX请求库依赖（axios）

npm i axios

二、几个loader和webpack配置

webpack 打包
webpack-cli webpack命令行接口
vue-loader 把vue文件后缀编译
vue-template-compiler vue模板的编译
sass-loader 将sass文件转成css代码
css-loader 将css文件编译
style-loader 将模板中的style标签下的css进行编译
babel-loader 高级语法的兼容性问题
@babel/core babel的核心库
@babel/preset-env 兼容最新语法

1.引入库

代码如下（示例）：

npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loade style-loader babel-loader @babel/core @babel/preset-env

2.目录结构

在这里插入图片描述

三、main.js入口文件与index.html

1.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App) // 创建vue实例
app.use(router) // 使用路由
app.mount('#app') // 挂载到id为app的div

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <title>脚手架学习</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

*四、webpack配置文件

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
  template: './public/index.html', // 这是html模板存放的地址
  filename: './index.html',
})
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.vue$/, use: ['vue-loader'] },
      { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'scss-loader'] },
      { test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset/resource' },
    ],
  },
  // 插件就让多一个功能
  plugins: [new VueLoaderPlugin(), htmlPlugin],
  devServer: {
    open: true, //打包完自动打开文件
    host: '127.0.0.1',
    port: 8080, //实时打包所使用的端口号
    client: {
      logging: 'none',
    },// 关闭客户端的log
  },
}

五、路由文件

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

const routes = []

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

export default router

六、babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
}

更新中~

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^