提前说明
# 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
