10-13 01:14 阅读 98

关注

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

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"); 复制代码

之后就可以写代码了

作者：阿邶的bug改完了
链接：https://juejin.cn/post/7018201224776253476