vite+vue3+typescript搭建项目过程

搭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");
   

之后就可以写代码了