• Vue3 carry webpack

Just want to feel the process from 0 to 1, just don’t want to use vue CLI. Hence this article. I love the latest NPM package. 😃

It’s important to note here. What version of the framework (or package) you use determines the version limits of your other packages. Choose the package version carefully, and the newer is not always the better. But the longer it gets, the worse it feels. Small voice BB: like my company to install win7 to me, my node can only use 12 versions, cut happy 💢

Before I saw such a sentence, do not mark the configuration of the environment is playing rogue. I think that makes sense

Environment: Win7 node:12.19.1 YARN :1.22.10 VScode

  • The potential

Create a new folder, whatever you want to call it. I’m just going to add test. Open up your CMD for laughing.

yarn init -y

This statement generates package.json package dependencies. -y indicates the default value. If not, you’ll have a few options to choose from. This is the default. And then, I’m building the file. This is a reference to the vue CLI file structure, but it’s usually pretty much the same.

  • Type 1: packing 🌲

Now you can install various packages and let’s analyze them. Since it is Webpack to pack Vue3.0, then I need (don’t install, read this paragraph, version problem) my text order corresponds to the package function.

  1. Package tool: webpack webpack-cli webpack-dev-server
  2. Vue :vue vue-loader vue-template-compiler
  3. Js: babel-loader Babel -cli babel-core babel-preset-env
  4. CSS less: csS-loader less-loader style-loader package: mini-CSS -extract-plugin: optimize- CSS-assets -webpack-plugin
  5. Packaging HTML: html-webpack-plugin

Uglifyjs-webpack-plugin 7. Unpack the previous package clean-webpack-plugin

Other: Route Vue-router URl-loader file-loader element-plus package analysis Webpack-bundle-Analyzer Cache cache-loader requests Xios vue-axios Load elder-plus babel-plugin-component as needed

After reading this section can be installed 🍀 : Vue3.0 uses vuUE -template-compiler to @vue/ compiler-sFC, @babel/core, @babel/preset-env webPack5, and is used in the latest 😁. Various errors 🙃 🕳️) for the final package please refer to the source file

  • Type 2: Configure CLI commands

In the package. Add json

  "scripts": {
    "start": "webpack server --hot --open --mode development"."build": "webpack --mode production"."dll": "webpack --config webpack.vender.config.js"
  },
Copy the code

Note that Webpack 5 uses WebPack Server. Previous versions used webpack-dev-server which is the webpack-cli command. Check the official website for detailed configuration. — Hot update — Open Start automatically open browser –mode

  • Type 3: Build the page

The first is the webpack entry file: index.js.

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')
Copy the code

Vue3 is written differently. Vue3 takes the createApp method from vue, passes in your app. vue root page, and chain-calls the method.

You see the app. vue root page introduced here. So we’re going to write app.vue. It doesn’t matter how we write it. Here we’re going to display the page that the route matches. So just write

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

<script>
</script>

<style scoped>
#app{
    width: 7.5 rem;
    height: auto;
    font-size: 12px;
    color: black;
}
</style>
Copy the code

You can see App. Vue in the bottom of the pocket introduces a routing match page, so we’ll just write the page now.

<template>
  <div class="home">
    <h1>I am home</h1>
  </div>
</template>

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

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

Copy the code

So I’m going to write a random home page here. You see, although there is a page, how can our app find the corresponding page (component), which requires routing

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
  
Copy the code

At this point, the basic one is ready to run. Other options, such as multithreaded packaging, subcontracting, package volume analysis, and requests, can be referenced in my previous article.

  • finishing

Later I also saw that Vue3.0 has a default configuration. Our Utah is still very thoughtful of the ah-ha ha ❣️

Official reference I chestnut

  • legacy

Although run out, but this error do not know how to do. By reason, I installed vue-loader or version 16. By reason I also imported according to his version of the importconst { VueLoaderPlugin } = require('vue-loader')💣😰. Which big brother if read this article please guide.

Message: send Italy when tsuen not observed, I in my blade heart