用webpack搭建Vue3项目
声明：本文章采用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'], } 更新中~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217915.html原文链接：https://javaforall.net
