vite创建vue3+ts项目流程

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的使用搭建

1. 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");

之后就可以写代码了