创建 vite + vue3 + ts 项目简单笔记

已于 2024-02-18 09:37:30 修改
阅读量623 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 笔记 vue3 Vue.js 文章标签： vue.js javascript vue
于 2023-09-16 12:55:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33365152/article/details/132917242
本文介绍了使用 Vite 创建 Vue3 项目的三种方法，重点讲解了推荐的第三种方法，包括解决大量引入问题、配置环境变量、集成路由、状态管理和axios。还涉及了错误处理和构建包分析，提供了详细的步骤和配置示例。

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

创建 vue3 项目

共 3 种方法，推荐使用第3种方法

通过官方脚手架初始化项目：

  • 全局安装 vue/cli
npm install @vue/cli –g
  • 查看 vue/cli 版本号
vue -V

第一种方法：

  • 这种方式除了可以创建 vue 项目，还可以创建其他类型的项目，比如 react 项目
  • 1、执行命令：
npm init vite@latest
  • 2、输入项目名称：
    在这里插入图片描述
  • 3、选择框架（Vue）:
    在这里插入图片描述
  • 4、选择 TypeScript 语法：
    在这里插入图片描述
  • 5、安装依赖包：
    在这里插入图片描述
  • 6、自动启动浏览器配置：
    • 在 vite.config.ts 文件中添加 server 属性：
import {
   
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [vue()],
  server: {
   
   
    open: true,
  },
});

第二种方法：

  • 直接快速通过参数生成
  • 执行下面命令，按提示选择即可：
npm init vite@latest project-engineer --template vue-ts

第三种方法（推荐）：

  • 这种方式是 vite 专门为 vue 做的配置，这种方式创建的项目在创建时会提示是否需要安装各种插件配置
  • 1、执行命令：
npm create vue@latest
  • 2、提示询问的相关问题：
Project name: … // 项目名称，默认值：vue-project，可输入想要的项目名称，此处不建议中文。
Add TypeScript? … No / Yes // 是否加入TypeScript组件？
Add JSX Support? … No / Yes // 是否加入JSX支持？
Add Vue Router for Single Page Application development? … No / Yes // 是否为单页应用程序开发添加Vue Router路由管理组件？
Add Pinia for state management? … No / Yes // 是否添加Pinia组件来进行状态管理？
Add Vitest for Unit Testing? … No / Yes // 是否添加Vitest来进行单元测试？
Add an End-to-End Testing Solution? » No // 是否添加一个端到端测试解决方案?
Add ESLint for code quality? … No / Yes // 是否添加ESLint来进行代码质量检查？
Add Prettier for code formatting? … No / Yes // 是否添加Prettier代码格式化?
  • 生成的项目目录如下图：
    在这里插入图片描述

初始化项目

1、解决 import { ref,reactive... } from 'vue' 大量引入的问题

  • 安装插件 unplugin-auto-import
  • unplugin-auto-import 这个插件是为了解决在开发中的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题。这个插件会在根目录生成一个 auto-import.d.ts ，这个文件会将所有的插件导入到 global 中，这样在使用的时候直接就可以使用了。
npm install -D unplugin-auto-import
  • 配置文件 vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

plugins: [
      vue(),
      // 自动导入
      AutoImport({
   
   
        imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
        dts: './auto-imports.d.ts' // 自动导入类型定义文件路径
      })
    ],

注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可。+

  • 解决 ref 找不到问题方法
  • 在项目根目录 tsconfig.app.json 文件中添加 auto-imports.d.ts 文件的
{
   
   
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
   
   
    "composite": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
   
   
      "@/*": ["./src/*"]
    }
  }
}

2、配置环境变量

  • 在项目根目录中创建 .env.xxx 文件，文件内容如下：
  • 开发环境
  • .env.dev 文件
# 开发环境
VITE_ENV = 'dev'

# 端口号
VITE_PORT = 8889

# 是否浏览器自动启动
VITE_OPEN = true

# 公用接口地址
VITE_BASE_API = '/api'

# 是否开启 WebSocket
VITE_WS = false

# 后端服务地址
VITE_APP_SERVICE_API = 'http://localhost:8888'
  • 线上环境
  • .env.prod 文件
# 线上环境
VITE_ENV = 'prod'

# 端口号
VITE_PORT = 8889

# 是否浏览器自动启动
VITE_OPEN = true

# 公用接口地址
VITE_BASE_API = '/api'

# 是否开启 WebSocket
VITE_WS = false

# 后端服务地址
VITE_APP_SERVICE_API = 'http://localhost:8888'
  • 然后配置 package.json 文件内容：
"scripts": {
   
   
    "serve": "vite --mode dev",	// 默认开发环境
    "serve:prod": "vite --mode prod",	// 生产环境
    "build": "run-p type-check \"build-only {@}\" --",
    "build:dev": "vite build --mode dev",
    "build:prod": "vite build --mode prod",
  }
  • 配置 vite.config.js 文件，内容如下：
import {
   
    fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import {
   
    defineConfig, loadEnv, ConfigEnv } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

const viteConfig = defineConfig((mode: ConfigEnv) => {
   
   
  // 获取 .env 环境配置文件
  const env = loadEnv(mode.mode, process.cwd())

  return {
   
   
    plugins: [vue()],
    resolve: {
   
   
      alias: {
   
   
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
   
   
      // host: 'localhost', // 只有本地能访问
      host: '0.0.0.0', // 局域网所有人能访问
      port: env.VITE_PORT as unknown as number, // 服务器端口号
      open: env.VITE_OPEN === 'true', // 浏览器自动启动
      hmr: true, // 启动热更新
      proxy: {
   
   
        // 处理跨域问题
        [env.VITE_BASE_API]: {
   
   
          target: env.VITE_APP_SERVICE_API, // 目标服务器地址
          ws: env.VITE_WS === 'true', // 是否启用 WebSocket
          changeOrigin: true, // 是否修改请求头中的 Origin 字段
          rewrite: (path) => path.replace('^' + env.VITE_BASE_API, '')
        }
      }
    }
  }
})

export default viteConfig

3、vite + vue3 脚手架项目中安装使用 scss 方法

  • 安装 sass
npm install sass -D
  • 配置 vite.config.js
export default defineConfig({
   
   
  plugins: [vue()],
  resolve: {
   
   
    alias: {
   
   
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
   
   
    open: true,
  },
  css: {
   
   
    preprocessorOptions: {
   
   
      scss: {
   
   
        additionalData: '@import "@/assets/styles/main.scss";', // 全局通用 scss 样式文件，路径必须对应
      },
    },
  },
});
  • 定义全局样式变量
  • 在 main.scss 文件中设置全局样式变量
$blue: #c00000;
  • 在页面中使用
<style scoped lang="scss">
h2 {
     
     
  p {
     
     
    color: $blue;
  }
}
</style>

4、集成 vue-router 路由

5、集成 Element Plus

  • 安装
npm install @element-plus/icons-vue
npm install element-plus -S
  • 在 main.ts 文件中注册，代码如下
// 集成 Element-plus
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'

// 注册 Element-plus 所有图标
import * as ElementPlusIcons from '@element-plus/icons-vue'
Object.keys(ElementPlusIcons).forEach((iconName) => {
   
   
  app.component(iconName, ElementPlusIcons[iconName as keyof typeof ElementPlusIcons])
})

app.use(ElementPlus, {
   
    size: 'small', locale: locale })

6、集成 pinia

7、封装 axios

  • 安装 axios
npm install axios
  • vite.config.js 文件中配置基础地址和跨域问题，文件内容如下：
import {
   
    fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import {
   
    defineConfig, loadEnv, ConfigEnv } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

const viteConfig = defineCo
最低0.47元/天 解锁文章

200万优质内容无限畅学
如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2705
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3538
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
创建vue3+ts项目
qq_48783694的博客
03-12 5921
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3621
Vite+Vue3+Ts+sass+Router+pinia+axios,Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
TS+vue3项目的创建
m0_56072671的博客
09-16 313
Component name "XXX" should always be multi-word vue3+TS创建项目
搭建一个vue3+ts项目（超祥/必看）
热门推荐
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 2274
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
【electron+vite+vue3】项目搭建
最新发布
占星安啦的博客
10-24 425
electron文档vite+electron+vue3 搭建参考。
vue3+vite+ts+pinia+router4 （一）vue3项目初始化
qq_45124084的博客
03-08 612
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。话不多说直接来 配置@别名 vite.config.ts tsconfig.json 这时候path报错未找到模块 安装下面的依赖@types/node 是一个 TypeScript 类型定义文件的包，主要用于提供 Node.js API 的类型定义 项目格式化工具 Prettier - Code formatter 在vscode中安装插
使用 Webpack 从 0 到 1 构建 Vue3 项目 + ts
m0_64544033的博客
09-11 901
去 webpack.config.js 中指定 mode —— 如果指定为 开发环境，那么打包出来的代码，不会被压缩。可以考虑不打包 vue，在 public/index.html 中，采用 cdn 方式引入 vue，进而减小体积。这样，main.ts 里就不会爆红了，因为 ts 现在认识 vue 了。为了排除打包文件，在 webpack.config.js 中，补充配置。利用设置好的别名 @，在 main.ts 中进行引入，发现报错了。在 webpack.config.js 中，补充配置。
vue3 + ts + vite 写h5页面相关简单配置
dzry_lr的博客
12-27 792
项目根目录下添加types文件夹，文件夹下创建components.d.ts文件。2. 配置路径别名@（注意：这里需要安装@types/node）1. 配置px单位转换 ( 可以直接代码中写UI稿上的大小 )项目index.html中可以加下边代码控制不可以进行页面缩放。同时tsconfig.json中需要添加下边代码。vite.config.ts添加相关配置代码。在vite.config.ts添加相关配置。
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 1万+
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
Vue3+Vite+Ts(手把手教你创建项目)
唯见青山不见君
11-08 2864
手把手教你用Vue3+Vite+Ts搭建vue3项目
vite+vue3+ts【创建项目】基础配置
爱玩亚索的程序员
05-21 689
vue3 vite 搭建
vue3+ts+vite创建新项目完整流程
G10_10_0817的博客
10-16 677
使用vite创建vue3+ts全部流程
vite+vue3+ts项目搭建
weixin_44298215的博客
06-06 2408
从0开始搭建一个vue3+vite+ts项目
从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier、stylelint、husky、lint-staged、pinia、axios、loding、动态路由…
技术前端，忠于热爱 @0.活在风浪里
04-04 6665
从零搭建VIte + Ts + Vue3项目并集成eslint 、prettier、stylelint、husky、lint-staged
创建Vite+Vue3+TS基础项目
zhangxueyou2223的博客
03-02 3508
本篇内容不涉及插件的安装以及配置，本篇只涉及创建Vite+Vue3+TS基础项目相关内容。不讲废话，简单直接直接开撸。先看下完整的项目结构。E:\vue3练习>npm create vite vue3练习2 -- --template vue-ts。
使用 Vite+TypeScript 打造一个 Vue3 组件库
ox4f5da2的博客
02-12 1634
使用 Vite+TypeScript 打造一个 Vue3 组件库
如何用vite+vue3+ts创建项目
01-25
使用vite+vue3+ts创建项目的步骤如下： 1. 首先，确保你已经安装了Node.js和npm。可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 使用以下命令全局安装vite脚手架： ```shell npm install -g create-vite ``` 3. 创建一个新的vite+vue3+ts项目。在终端中运行以下命令： ```shell create-vite my-v3 --template vue-ts ``` 这将创建一个名为my-v3的项目，并使用vue-ts模板。 4. 进入项目目录： ```shell cd my-v3 ``` 5. 安装项目依赖： ```shell npm install ``` 6. 启动开发服务器： ```shell npm run dev ``` 这将启动一个本地开发服务器，并在浏览器中打开项目。 现在，你已经成功创建了一个vite+vue3+ts项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

W.Y.B.G

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值