提前说明

# npm 6.x
npm create vite@latest 项目名称 --template 模板名称

# npm 7+, extra double-dash is needed:
npm create vite@latest 项目名称 -- --template 模板名称

# yarn
yarn create vite 项目名称 --template 模板名称

# pnpm
pnpm create vite 项目名称 --template 模板名称

选择所需的模板（vue2 选择 vanilla）

模板列表

示例（vue为2.7.14版本）

1.创建项目 vite-vue2-js

yarn create vite vite-vue2-js --template vanilla

2.下载依赖

yarn

3.下载 vue2 相关依赖

yarn add vue@2.7.14 vue-router@3.5.2 vuex@3.6.2
yarn add vue-template-compiler@2.7.14 -D

yarn add vite-plugin-vue2 -D

4.修改相关文件

• 在根目录创建vite.config.js

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

export default {
  plugins: [createVuePlugin()],
  server: {
    port: 5164,
    open: true
  }
}

• 创建src目录，将main.js文件移入src中

• 修改index.html内容

  
  index.html

• 将main.js默认内容全部删除，改为如下

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

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

5.运行项目

yarn run dev