vue3+vite2+tsx 脚手架搭建

基本步骤

1. 安装nodejs（版本12+）

   下载地址 https://nodejs.org/en/
   

2. 初始化工程

   //官方脚手架
   npm init @vitejs/app
   //输入项目名称
   vite-project
   //选择模板
   vue-ts
   //进入目录
   cd ./vite-project
   //安装基础依赖
   npm install
   //进入调试运行模式
   npm run dev
   

   PS D:\WorkSpace2\demo-babylon-learn> npm init @vitejs/app
   npx: installed 5 in 4.292s
   √ Project name: · vite-project
   
   Scaffolding project in D:\WorkSpace2\demo-babylon-learn\vite-project...
   √ Select a template: · vue-ts
   
   Done. Now run:
   
     cd vite-project
     npm install
     npm run dev
   

3. 配置vite

   //vite.config.ts
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [
       vue()
     ],
     resolve: {
       //配置短路径
       alias: [
         { find: /^\/@\//, replacement: "/src/" },
         { find: /^\/@c\//, replacement: "/src/components/" },
         { find: /^\/@v\//, replacement: "/src/view/" },
         { find: /^\/@u\//, replacement: "/src/utils/" }
       ],
     }
   })
   
   

4. 添加vue-router路由支持

   • 安装vue-router依赖

   npm install vue-router@4.0.4
   
   

   • 添加router/router.ts

   import { RouteRecordRaw, createRouter, createWebHistory ,createWebHashHistory} from 'vue-router';
   
   const routes: RouteRecordRaw[] = [
       {
           path: "/",
           name: "Home",
           component: () => import("/@c/HelloWorld.vue")
       }
   ]
   
   const router = createRouter({
       history: createWebHashHistory(),
       // history: createWebHistory(),
       routes,
   });
   
   export default router;
   

   • 修改App.vue，添加路由桩

   <template>
     <div id="app">
       <router-view />
     </div>
   </template>
   

   • 修改main.ts，添加路由

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from "./router"
   
   createApp(App).use(router).mount('#app')
   
   

5. 添加jsx/tsx语法支持

   • 安装@vitejs/plugin-vue-jsx

   npm install @vitejs/plugin-vue-jsx -D
   

   • 配置vite.config.ts

   //vite.config.ts
   //...
   import vueJsx from '@vitejs/plugin-vue-jsx'
   
   export default defineConfig({
     //...
     plugins: [
       //...
       vueJsx({
         // options are passed on to @vue/babel-plugin-jsx
       })
     ]
     //...
   })
   

6. 最终vite.config.ts

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   //support jsx/tsx 
   import vueJsx from '@vitejs/plugin-vue-jsx'
   
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       vueJsx({
         // options are passed on to @vue/babel-plugin-jsx
       })
     ],
     resolve: {
       alias: [
         { find: /^\/@\//, replacement: "/src/" },
         { find: /^\/@c\//, replacement: "/src/components/" },
         { find: /^\/@v\//, replacement: "/src/view/" },
         { find: /^\/@u\//, replacement: "/src/utils/" }
       ],
     }
   })