Vite+ Vue2 搭建项目

Vite + Vue2 搭建项目

1. 创建项目（三种方式）

1、pnpm

pnpm create vite

2、npm

npm init vite@latest

3、yarn

yarn create vite

2. 在选择项目类型的时候选择vanilla

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

pnpm install 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 依赖

pnpm install vue@2

pnpm install vue-template-compiler

6. 修改 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')

7. 创建 App.vue 文件

<template>
  <h1>Yunjiang</h1>
</template>

8. pnpm run dev