Let a project development start ten times faster scheme discussion. The original language finches

0 by

Recently, Vite is quite popular, especially Vite2, the new Logo, around Vite tweets and likes, the code keeps: can be really liver power!

Vite2 further decoubles from Vue and becomes more and more technology independent, Vue3, React projects run the same.

The question is, can Vite2 run as well as the Vue2? There is no vue2 in the official Vite template.

After testing, the answer is yes. This share does not speak already obsolete Vite1 principle, (really learn not to move to), speak application: with Vite2 to Vue2 family barrel.

This time to share the outline of ideas:

1 Vue2 project

No more talking. Let’s do it. This project code I set up a Git repository, guys –> stamp this check <–.

Building a project is relatively easy:

Vue2 + router + vuex + + less + ts + prettier

vue add element

The final project runs through Yarn Serve.

2 Introduce Vite dependencies

Thanks to the mechanism of the Vite plugin, to migrate from vue-CLI to Vite, do the following:

npm i vite vite-pugin-vue2 -D
Copy the code

Change script.dev=”vite” in package.json.

SRC /index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html: public/index.html

<! DOCTYPEhtml>
<html lang="zh-CN">
  <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" />
    <title>vue2 vite2</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
Copy the code

We need to prepare the configuration file, please refer to my configuration file/viet.config.js

import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
  alias: {
    "@": path.resolve(__dirname, "src")},base: "/".plugins: [
    // vue()
    createVuePlugin()
  ]
});
Copy the code

Here we set the base=/ and alias configurations.

There is one more configuration to deal with, because the default router/index.ts uses environment variables, which needs to be changed according to the Vite documentation

const router = new VueRouter({
  mode: "history".base: import.meta.env.BASE_URL,
  routes
});
Copy the code

Changed from process.env to import.meta.env

All things considered, try it:

npm run dev
Copy the code

Here we go: Router working, Element working, Vue2 Devtools working, modifying files hot update working.

That’s the end of it.

Wait, Vue3’s Composition API is so popular, so try it

3 try CompositionAPI

Reference documents github.com/vuejs/compo…

Installation, configuration, use of a dragon

npm install @vue/composition-api
Copy the code

Modify the SRC/main. Ts

import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
Copy the code

Modify the page

<template>
  <div class="about">
    <h1>info</h1>
    <p>{{ number }}</p>
    <el-button @click="addCount" type="primary">add</el-button>
    <p>I am {{obj.name}}</p>
    <p>{{prettyAge}}</p>
  </div>
</template>
<script lang="ts">
import { ref, reactive, defineComponent, computed } from "@vue/composition-api";
interface TypeInfo {
  name: string; age: number; hobby? : string[]; }export default defineComponent({
  setup() {
    const number = ref(0);
    const obj: TypeInfo = reactive({
      name: "xinbao".age: 18
    });
    const addCount = () = > number.value++;
    const prettyAge = computed(() = > obj.age + "Age");
    return{ number, prettyAge, obj, addCount }; }});</script>

Copy the code

Run again, and you’re running

4 Preliminary Conclusions

The theory works. It runs.

I’ve tried to run in my other events, but I still have a problem. I’ll wait for a follow-up.

Technical benefits:

  • Webpack dev mode

  • Vite mode

4584/407 is about 11.3, so do you think I got 10x faster by switching from WebPack to Vite?

Welcome to leave a message.