Vite + TypeScript 项目从零搭建

Vite 介绍

Vite是一种新型的前端构建工具，它能显著改善前端开发体验。

TypeScript 介绍

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改

步骤

基础环境搭建

1. 执行npm init vite@latest

2. 选择vanilla 创建一个空项目。因为选择vue 会创建vue3的项目

3. 想使vite支持vue2.7 需要安装插件 npm i @vitejs/plugin-vue2 -D

4. 创建vite.config.js, 内容如下

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue2';
   export default defineConfig({
     plugins: [vue()],
   });
   

5. 修改main.ts

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

6. 在项目目录执行 npm run dev 即可启动项目