vue3+vite+typeScript项目搭建步骤

原创已于 2022-04-21 17:35:56 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #javascript

于 2022-03-09 16:31:40 首次发布

工作笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用npm命令创建一个基于Vite的Vue项目，并逐步集成TypeScript、Vue Router、Element Plus UI库以及Axios库。首先通过npm初始化Vite项目，然后安装依赖并启动开发服务器。接着安装TypeScript并修改文件配置，确保项目支持TS。同时，为了解决Vue组件的类型问题，创建了shims.d.ts文件。最后，安装vue-router和axios，以便在项目中实现路由管理和API请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在想要创建项目的目录下输入以下指令，创建vite项目

  # npm 6.x
  npm init vite@latest <project-name> --template vue

  # npm 7+，需要加上额外的双短横线
  npm init vite@latest <project-name> -- --template vue

2. 切换到项目目录，安装依赖，运行项目

  cd <project-name>
  npm install
  npm run dev

3. 安装typescrpit

 npm install typescript

4. 将main.js文件名称更换为main.ts，且在index.html文件中修改引入main.js文件为main.ts

5. 在main.js同级目录，新建文件shims.d.ts，新建内容如下

  declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
  }

6. 安装vue-router、element-plus、axios

  npm install vue-router@next axios --save

  npm install element-plus --save