vite+vue3+typescript搭建項目過程

vite和vue3.0都出來一段時間了，嘗試一下搭vite+vue3+ts的項目

相關資料網址

• vue3.0官網：https://v3.vuejs.org/guide/introduction.html#getting-started
• Element對vue3支持——Element Plus
  官網地址：https://element-plus.gitee.io/#/zh-CN
  github地址：https://github.com/element-plus/element-plus

步驟

1. npm i vite -g
vite -v
   根據是否返回版本號判斷是否下載成功
2. npm init vite-app 項目名 創建項目
3. cd 文件夾名
4. npm i
npm run dev
   即可看到網址打開

前五步為vite的使用搭建

5. npm i -S typescript vue-router@next 安裝ts和router

先配置ts：

1. npx tsc --init 創建tsconfig.json文件

2. 把根目錄下的main.js文件改名為main.ts

3. 把根目錄下的index.html中引入的main.js改名為main.ts

4. 同時把.vue文件里的<script>標簽中加入lang="ts"

5. 在項目根目錄創建shim.d.ts文件，同時在其中寫入以下代碼，用於配置ts支持識別.vue文件

   declare module "*.vue" {
   	import { Component } from "vue";
   	const component: Compoent;
   	export default component;
   }

配置router：

1. 在src下建立router目錄並在其中創建index.ts文件，並在其中寫入（此處的地址為自己在根目錄創建views文件夾下創建index.vue文件，可根據自己需要創建）

   import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
   
   const routes: RouteRecordRaw[] = [
     {
       path: "/",
       name: "Home",
       component: import("../views/index.vue"),
     },
   ];
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
   });
   
   export default router;

2. 修改main.ts文件引入vue-router

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

之后就可以寫代碼了