• 没有引入ts

创建项目

pnpm create vite

在选择项目类型的时候选择vanilla //原生js

安装 vite 对 vue2 支持的插件

pnpm install vite-plugin-vue2

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

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自动打开浏览器
			port: 1567 //端口号
		},
		resolve: {
            // 别名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})

安装vue2依赖

pnpm install vue@2  

修改 src/main.js

import Vue from "vue";
import App from "./App.vue";

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

修改 index.html 入口

 <link rel="shortcut icon" href="/favicon.ico" />
<script type="module" src="/src/main.js"></script>

 创建 App.vue 文件

<template>
  <div>hello world</div>
</template>

项目目录结构

运行项目

pnpm run dev

后续有各种坑，下面分享我解决后的配置，不想麻烦的直接复制install

package.json

{
  "name": "project-name",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.3.2"
  },
  "dependencies": {
    "@vitejs/plugin-vue2": "^2.2.0",
    "autoprefixer": "^10.4.14",
    "element-ui": "^2.15.13",
    "pinia": "^2.0.35",
    "postcss": "^8.4.23",
    "sass": "^1.62.1",
    "tailwindcss": "^3.3.2",
    "vue": "2.7.14",
    "vue-router": "^3.6.5"
  }
}

vite.config.js

import { defineConfig } from "vite"; // 动态配置函数
import vue from "@vitejs/plugin-vue2";
import { resolve } from "path";

export default () =>
  defineConfig({
    plugins: [vue()],
    envDir: "./viteEnv", //这里使用相对路径，绝对路径其实也可以
    envPrefix: ["VITE"],
    server: {
      open: true, //自动打开浏览器
      port: 1567, //端口号
    },
    resolve: {
      // 别名
      alias: [
        {
          find: "@",
          replacement: "/src",
        },
      ],
    },
  });

mian.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia, PiniaVuePlugin } from "pinia";
import "@/styles/init.css"; //初始化样式
import "./index.css"; //引入Tailwind
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
new Vue({
  router,
  pinia,
  render: (h) => h(App),
}).$mount("#app");

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};