Introduction to the

The next generation of Vite front-end development and build tools, the speed of Vite build projects is undeniable

However, Vite does not provide a way to create Vue2. For those who have not learned VUe3, they cannot intuitively feel the power of Vite

Using Vite you can also rebuild old projects, so that your build speed flies. 

Initialize the project

There are three ways to initialize a VUE3 project using Vite

NPM init vite@latest // Use yarn yarn create vite // Use PNPM PNPM create viteCopy the code

The first two methods are commonly used for the front end. Beginners are advised to use the first method.

NPM install is used to install dependencies. Vite initialization projects do not install dependencies, so you need to manually install dependencies.

The directory structure

. ├ ─ ─ public │ ├ ─ ─ the favicon. Ico ├ ─ ─ the SRC ├ ─ ─ the gitignore ├ ─ ─ index. The HTML ├ ─ ─ package - lock. Json ├ ─ ─ package. The json ├ ─ ─ The README. Md └ ─ ─ vite. Config. JsCopy the code

Depend on the file

1. The installationvite 对 vue2Supported plug-ins

Prerequisite: To run the vue2 project in Vite, you need to install a vite plugin: vite-plugin-vue2

// Run NPM NPM install viet-plugin-vue2 -d // run CNPM CNPM install viet-plugin-vue2 -d // Run yarn yarn add viet-plugin-vue2 -DCopy the code

Introduce the viet-plugin-vue2 plug-in and register it with the plug-in registration method provided by Vite

After the installation is successful, you need to configure the following parameters in vite.config.js:

import { createVuePlugin } from 'vite-plugin-vue2'
 
export default {
  plugins: [createVuePlugin()]
}
Copy the code

2. Install vue2 dependencies

Prerequisites: After vite is installed, you need to install vue and VUE-template-Compiler

// Run NPM NPM install vue ue- template-compiler-s // Run CNPM CNPM install vue ue- template-compiler-s // run yarn yarn add  vue vue-template-compiler -SCopy the code

Once the installation is successful, you can start configuring the project.

Modifying project files

. ├ ─ ─ public │ ├ ─ ─ the favicon. Ico ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ the main, js / / entry documents ├ ─ ─ the gitignore ├ ─ ─ index. The HTML ├ ─ ─ ├─ package-lock.json ├─ Package. json ├─ readme.me.config.jsCopy the code

The project structure is basically set up successfully

Delete the entire SRC directory and create a new SRC directory. Add main.js and app. vue to the SRC directory

src/main.js

import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App)
}).$mount('#app')
Copy the code

src/App.vue

<template>
  <div>Hello Vite Vue2</div>
</template>
Copy the code

Run the project

NPM run dev // Succeeds instantlyCopy the code

Vue-router and VUex were added to the project

1. Install dependencies

NPM install vue-router vuex-s // YARN Install vue-router and vuex yarn add vue-router vuex-sCopy the code

2. Modify the file

/ / modified file directory structure. ├ ─ ─ public │ ├ ─ ─ the favicon. Ico ├ ─ ─ the SRC │ ├ ─ ─ the router │ ├ ─ ─ index. The js │ ├ ─ ─ store │ ├ ─ ─ index. The js │ ├ ─ ─ views │ ├─ About.vue │ ├─ Home.vue │ ├─ app.vue │ ├─ main.js // import File ├─.index.html ├─ package-Lock. json ├─ Package. json ├─ readme.├ ─ download.config.jsCopy the code

Created according to the vue2 create directory structure

SRC /main.js Adds vue-router and vuex

import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import store from './store' new  Vue({ router, store, render: h => h(App) }).$mount('#app')Copy the code

src/router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '.. /views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default routerCopy the code

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
Copy the code

src/views/About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
}
</script>
Copy the code

src/views/Home.vue

<template>
  <div class="home">
    This is an Home page
  </div>
</template>

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

The end! And flowers!