vite创建vue2项目，并支持setup语法糖

vite创建vue2项目，并支持setup语法糖

1. 项目创建

npm init vite@latest

// 或

yarn create vite

2. 这里选择 vue，然后选择 TypeScript

3. 打开package.json文件，将vue 版本改为2.6.14并 删除 @vitejs/plugin-vue；

4. 安装vite-plugin-vue2

yarn add vite-plugin-vue2

5. 修改 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [createVuePlugin()],
})

6. 安装 add vue-template-compiler版本为 2.6.14

yarn add vue-template-compiler

7. 修改main 文件

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

8. 修改App.vue, 并删除多余文件。运行

9. 安装 @vue/composition-api用于支持组合式api

yarn add @vue/composition-api

10. 安装完成后，在main中注册

import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

11. setup 语法糖支持，安装unplugin-vue2-script-setup

yarn add unplugin-vue2-script-setup --dev

12. vite.config.js中注册

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import ScriptSetup from 'unplugin-vue2-script-setup/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin(),
    ScriptSetup({}),
  ],
})

13，配置完成，这时候可以使用setup语法糖和组合式API了

<script setup lang="ts">
import { ref } from "@vue/composition-api";

const message = ref("HelloWorld")
</script>

<template>
  <div>
    Message: {{ message }}
  </div>

</template>

<style scoped>

</style>

14. 效果

15. 完整代码地址：https://gitee.com/wang_bi_you/bige-web