手动搭建webpcak5x +vue3.2.x + element-plus
第一步新建文件夹 test
初始化package.json
mkdir test
cd test
npm init -y
第二步 新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
第三部 安装webpack webpack-cli webpack-dev-server
npm install webpack webpack-cli webpack-dev-server
yarn add webpack webpack-cli webpack-dev-server
安装 vue3.2.x vue-router4x vue-loader
npm install vue vue-router -D
npm install vue-loader
安装 loader
npm install css-loader style-loader less less-loader
安装 bebel
npm install babel-loader @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-plugin-import
npm install @babel/runtime
安装plugin
npm install clean-webpack-plugin html-webpack-plugin
安装element-plus
npm install element-plus
yarn add element-plus
./src/main.js
import { createApp } from "vue"
import appd from "./app.vue"
import router from "./router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(appd)
app
.use(ElementPlus)
.use(router)
.mount('#app')
./src/app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup>
console.log('进来啦')
</script>
<style>
html,body,#app{
height: 100%;
100%;
}
*{
margin: 0;
padding: 0;
}
</style>
./src/router/index.js
import {createWebHistory,createRouter,createWebHashHistory} from "vue-router"
const router = createRouter({
history:createWebHashHistory(),
// history:createWebHistory(),
routes:[
{
path:'/',
redirect:"/home"
},
{
path:"/home",
name:"home",
component:()=>import(/* webpackChunkName: "home" */'../views/layout/index.vue')
},
{
path:"/sun",
name:"sun",
component:()=>import(/* webpackChunkName: "sun" */'../views/sun/index.vue')
}
]
})
export default router
./src/views/layout/index.vue
<template>
<div class="common-layout">
<div class="common-layout-header">Header</div>
<div class="common-layout-container">
<div class="common-layout-container-aside">
<asideMenu />
</div>
<main class="common-layout-container-main">Main</main>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import asideMenu from "./aside.vue"
</script>
<style lang='less' scoped>
.common-layout {
height: 100%;
100%;
display: flex;
flex-direction: column;
}
.common-layout-header {
height: 50px;
background-color: aqua;
}
.common-layout-container {
height: calc(100% - 50px);
display: flex;
}
.common-layout-container-aside{
200px;
background-color: skyblue;
}
.common-layout-container-main{
flex:1;
background-color:yellow;
}
</style>
package.json
{
"name": "vue3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.18.5",
"@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"babel-loader": "^8.2.5",
"babel-plugin-import": "^1.13.5",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"style-loader": "^3.3.1",
"vue-loader": "^17.0.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2"
},
"devDependencies": {
"@babel/runtime": "^7.18.3",
"element-plus": "^2.2.6",
"vue": "^3.2.37",
"vue-router": "^4.0.16"
}
}
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { HotModuleReplacementPlugin } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: "./src/main.js",
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: "inline-source-map", //报错直接定位到行 列
devServer: {
host: "localhost",
port: 8888,
hot: true,
open: true,
compress: true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'test', //页面标题
template: 'index.html'
}),
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
// cacheDirectory: true,
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-transform-runtime',
]
}
}],
},
{
test: /\.vue$/,
use:[ 'vue-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader'],
}
]
}
}