使用vite来创建vue2项目

使用vite来创建vue2项目

1、创建项目

npm init vite@latest

// 或

yarn create vite

2、在选择项目类型的时候选择Vanilla

3、安装 vite 对 vue2 支持的插件

yarn add vite-plugin-vue2

4、要使用 vite 插件，需要在项目的根目录创建 vite.config.js 文件

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

5、安装 vue 依赖

yarn add vue@2
yarn add vue-template-compiler

6、创建src文件夹，将main.js拉到src目录下

7、修改 src/main.js

import Vue from "vue";
import App from './App.vue';
 
new Vue({
  el: '#app',
  render: h => h(App)
})
 
或
 
import Vue from 'vue'
import App from './App.vue'
 
new Vue({
  render: h => h(App)
}).$mount('#app')

8、在src下创建 App.vue 文件

<template>
  <div id="app">
    111
  </div>
</template>

9、整理一下目录，没用的可以删掉，大概就是这个样子

10、npm run dev运行

翻译自：https://blog.csdn.net/lililill_/article/details/130708598