vue3.0 搭载webpack5-一一网

就是想感受从0到1的过程，就是不想用vue cli.于是就有了这篇文章。我就喜欢最新的npm包。?

这里需要着重注意。用啥版本的框架（其实也是包）决定了你的其它包的版本限制，慎重选择包版本，其实也不是越新越好。但是越久总感觉给人不好。小声BB：就像我公司给我装win7,我的node 只能用12版本，伐开心 ?

~~之前看到这样一句话，不标注环境的配置全是耍流氓。我觉得很有道理~~
环境：win7 node:12.19.1 yarn:1.22.10 vscode

起势

新建一个文件夹，随便叫啥。我就加test.（万物皆可test :laughing: ）
打开你的cmd(shell)

yarn init -y

这句话会生成package.json包依赖。-y表示默认的意思。不加的话会有一些选项让你选。这里直接默认。
接着，我是先建文件。这里参考了vue cli的文件结构，不过平时也差不多也这样。

第一式：装包 ?

接下来就可以安装各种包了
我们来分析一下。既然是webpack打包vue3.0.那就需要(先别装，看完这一段，版本问题)我的文字顺序对应包功能。

打包tool：webpack webpack-cli webpack-dev-server
解析：vue:vue vue-loader vue-template-compiler
解析js：babel-loader babel-cli babel-core babel-preset-env
解析css less：css-loader less-loader style-loader
打包:mini-css-extract-plugin
压缩：optimize-css-assets-webpack-plugin（可以用其它）
打包html：html-webpack-plugin

6.压缩js:uglifyjs-webpack-plugin
7.清除之前打过的包clean-webpack-plugin

其它：路由vue-router url-loader file-loader element-plus 包分析webpack-bundle-analyzer 缓存cache-loader 请求xios vue-axios 按需加载element-plus babel-plugin-component

看完这段就可以装了?：vue3.0使用 vue-template-compiler改为@vue/compiler-sfc，@babel/core，@babel/preset-env
webpack5包相关都用最新的?（其实我自己装的时候因为包兼容，各种报错 ? ?️ ）
最后的包请参考源文件

第二式：配置climingl

在package.json 添加

  "scripts": {
    "start": "webpack server --hot --open --mode development",
    "build": "webpack --mode production",
    "dll": "webpack --config webpack.vender.config.js"
  },
复制代码

注意webpack5 用的是webpack server。之前的版本用的是webpack-dev-server 这是webpack-cli命令。具体配置查看官网。–hot 热更新 –open 启动自动打开浏览器 –mode 模式

第三式：搭建页面

首先是webpack入口文件：index.js(名字随便取，和webpack enrty对应上就可)

import {createApp} from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import Axios from 'axios';
import VueAxios from 'vue-axios';

const app = createApp(App) 
app.use(VueAxios)
.use(VueAxios,Axios).
use(ElementPlus)
.use(VueRouter)
.use(router)

app.config.errorHandler = (err,vm,info)=>{}
app.config.performance = false

app.mount('#app')
复制代码

vue3写法上有些区别。vue3 是从vue 中引入createApp方法，然后将你的App.vue根页面传入，再链式调用方法。

你看这里引入了App.vue 根页面。所以我们去写App.vue,怎么写不要紧，这里是将路由匹配到的页面放这里显示的。
所以只要写了<router-view></router-view>就好了

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
</script>

<style scoped>
#app{
    width: 7.5rem;
    height: auto;
    font-size: 12px;
    color: black;
}
</style>
复制代码

你看兜底的App.vue引入了路由匹配的页面，所以我们现在去写页面就好了。

<template>
  <div class="home">
    <h1>我是home</h1>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
}
</script>

复制代码

这里随便写个home页面。你看虽然有页面了，但是我们的app怎么去找到对应的网页（组件）呢，这就要路由

import Home from '../src/pages/home/home.vue'
import { createRouter, createWebHistory } from 'vue-router'
  const routes = [
    {
      path:'/',
      name:'home',
      component: Home
    }
  ]

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

  export default router
  
复制代码