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>