一、项目需要的基本依赖

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'],
}

更新中~

webpack配置vue3项目相关推荐

通过webpack配置vue项目页面title
vue 项目创建之后,在index.htm里面的title,使用 htmlWebpackPlugin.options.title 进行的展示. 调整 webpack 配置最简单的方式就是在 vue.c ...
【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
Koa2仿知乎服务端项目：Webpack配置
项目简介该项目为一个后端项目,该项目仿"知乎",模拟实现了: JWT用户认证.授权模块上传图片模块个人资料模块关注与粉丝模块话题模块问题模块答案模块评论模块共计4 ...
webpack初始化vue项目配置整理（一）
webpack+vue2目录 webpack+vue2 初始化依赖文件的配置(二) webpack+vue2 之babel配置(三) 前言一. 初始化项目二.创建build文件夹放webpack ...
vue-cli3搭建项目之webpack配置
vue-cli3搭建项目之webpack配置一.vue.config.js文件 const path = require('path')module.exports = {publicPath: ' ...
给 vite 创建的 Vue3 项目配置 ESLint
目录前言一.下载安装相关的依赖包二.配置 .eslintrc.js 1.重点成员解析 (1).parserOptions 2..eslintrc.js 配置案例三.配置 .eslintigno ...
create-react-app项目webpack配置修改教程
create-react-app脚手架,用于快速搭建react项目,但有些时候需要做一些配置修改以满足项目需求. 已同步更新 create-react-app 至v5.0.0版本一.配置首先需要调 ...
vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
webpack配置及热更新原理
1:配置webpack 1:新建一个vue项目: 进入目录,在终端创建: vue create 项目名: 2:创建新文件对应的文件目录src下新建存放css文件index.css,项目的入口文件ma ...

webpack配置vue3项目

用webpack搭建Vue3项目

一、项目需要的基本依赖

1.vue的依赖

2.ui组件库依赖

3.AJAX请求库依赖（axios）

二、几个loader和webpack配置

1.引入库

2.目录结构

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

1.main.js

2.index.html

*四、webpack配置文件

五、路由文件

六、babel.config.js

更新中~

webpack配置vue3项目相关推荐

最新文章

热门文章