Let me say a few words of nonsense first.

Vite does not provide a Vue2 creation method at the time of this writing.

I’m sure some developers haven’t learned Vue3 yet, but want to try Vite. That can refer to the way of eating in this article.

If impatient, “0, brief introduction” can skip.




0, introduction

At the time of this writing, Vite does not provide a Vue2 project creation method by default.

Vue projects created using Vite are temporarily Vue3.

Vite is a high-level encapsulation of build tools. It’s actually a Rollup inside.

Vite is a tool released by Yuyuxi along with Vue3.

Originally Vite was a tool for Vue3, but with the release of Vite 2.0, Vite is now a standalone build tool.

In addition to building Vue3, Vite can build React and other projects.


Projects that Vite can build include:

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts


For a more detailed introduction, please see

Vite Website (Chinese version)

Vite making address








1. Initialize the Vue2 project

At the time of this writing, Vite does not provide Vue2 project creation options by default.

We can create a native project with Vite and then install Vue2’s ecology for development.

1.1. Initialize the project

First go to where the project is stored, and then run the following command to create the project.

npm init vite@latest
Copy the code


If you are using Vite for the first time, you will be asked if you want to continue, here reply y.

Ok to proceed? (y)Copy the code


After that, just enter the name of the project. The name of my new project here is vite-vue2.

Project name: vite-vue2
Copy the code


After completing the above steps, select the following project to create.

Just choose Vanilla, and then you’ll be asked whether you want native or TS, depending on your needs.

I’m going to go native here.


After the project is created successfully, three prompt commands are displayed.

# [1] Enter the project
cd vite-vue2

# [2] Initialize the project
npm install

# [3] Run the project
npm run dev
Copy the code


Note: There may be some minor problems with the second step initialization using NPM Install. It is recommended to use YARN to initialize the project.

The project directory is shown below


Install vite plugins supported by VUE2

To run the vue2 project in Vite, you need to install a plug-in for Vite: vuite-plugin-vue2

npm install vite-plugin-vue2 --dev
Copy the code

If NPM cannot be installed, use CNPM or YARN.


To use the Vite plug-in, you need to create the vite.config.js file in the root directory of your project.

Enter the following code in vite.config.js.

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}
Copy the code

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

Note that createVuePlugin() is followed by parentheses and is executed!


1.3. Install vUE dependencies

Use the following command to install VUE2.

npm install vue -S
npm install vue-template-compiler
Copy the code

At the time of this writing, install vue via NPM install vue, which will still install the 2.x version.

If vuE3 has been fully updated and vuE2 needs to be installed, add the version number to the above command.


1.4. Modify project file dependencies

1.4.1 create SRC directory

Create a SRC directory in the project root directory.

Then move main.js into the SRC directory.


1.4.2. Modify index.html

After the project starts, the entry file is index. HTML, which originally introduced main.js, so you need to change the pointing of the index. HTML file.

<script type="module" src="/src/main.js"></script>
Copy the code


Create app. vue file

Create the app.vue file and enter the following code

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


1.4.4 modify SRC /main.js

The code in this step is a bit like the main.js operation in the vue-cli project.

import Vue from 'vue'
import App from './App.vue'

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


1.5. Run the project

After the configuration of the previous steps, run the following command to get the project running.

npm run dev
Copy the code


1.6, packaging,

Run the command to package the project.

npm run build
Copy the code

The packaged project directory name is: dist








2. Install the Vue-Router

2.1, install,

npm install vue-router
Copy the code

As of this writing, vuE-Router installed with the above command is Vue2 project supported.

If the vue-router installed by using this command supports Vue3, you need to add a version number.


2.2 Creating a Route Directory

2.2.1 creating a routing Table

Create a router directory under the SRC directory and create the index.js file under the router directory.

Enter the following code in SRC /router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue' // Introduce the Home page component

// Register the routing plug-in
Vue.use(VueRouter)

// 
const routes = [
  {
    path: '/'.name: 'Home'.component: Home
  },
  {
    path: '/about'.name: 'About'.component: () = > import('.. /views/About.vue')}]const router = new VueRouter({
  routes
})

export default router
Copy the code


2.2.2. Create the page component to which the route points

Create a views directory under the SRC directory to house the page components.

Create two pages in the SRC /views directory: home.vue and about.vue

Home. Vue content

<template>
  <div>
    Home
  </div>
</template>
Copy the code

About the vue content

<template>
  <div>
    About
  </div>
</template>
Copy the code


2.3 Global Registration

2.3.1 Register in main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

new Vue({
  router,
  render: h= > h(App)
}).$mount('#app')
Copy the code

Import the Router and register it with new Vue.


2.3.2 Creating and Displaying a Route Forward Label

Example Modify the app. vue file

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>
Copy the code

Use the

tag to define the forward address.

Use the

tag to display the content.








3. Install vuEX

3.1 installation

npm install vuex --save
Copy the code

At the time of this writing, the VUex installed with the above command supports the Vue2 project.

If the vuex installed by this command supports Vue3, you need to add a version number to the constraint.


3.2 Creating a VUex Directory

Create the store directory under the SRC directory and the index.js directory under the Store directory.

Enter the following code in the index.js file

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count
    }
  },
  mutations: {
    addCount(state, num) {
      state.count += num
    }
  },
  actions: {}})Copy the code

In the above code, create a variable count in state to use as a counter.

Provide a method in getters to get the count.

Provides a way to modify the count in mutations.


3.3 Global Registration

3.3.1 Register in main.js
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

Import the store and register with new Vue.


3.3.2 used in home.vue
<template>
  <div>
    <h1>Home</h1>
    <div>count: {{ count }}</div>
    <button @click="addCount">+ 1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count; }},methods: {
    addCount() {
      this.$store.commit("addCount".1); ,}}};</script>
Copy the code








4, reference

Vite official document

Vite supports plug-ins for Vue2: vuite-plugin-vue2 documentation