用vite创建 vue3 ts项目

原创 已于 2022-11-21 13:54:18 修改 · 601 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #typescript

于 2022-09-22 16:35:57 首次发布
本文分享了作者首次独立使用Vite、Vue3和TypeScript创建项目的全过程，包括安装步骤、项目目录结构及启动界面等内容。

在这里插入图片描述

先看看vite官网

这都2022年了，你肯定玩过vite + vue3 + ts项目吧
原先都是其他同事创建好项目，我直接上手
这次我自己来创建一下，在这里做一下记录

可以直接跟着官方教程走
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

安装

npm create vite@latest

npm create vite@latest my-vue-app --template vue-ts

看下每一步选择，简单
在这里插入图片描述
项目目录
在这里插入图片描述
启动项目界面

在这里插入图片描述

可以开心的玩喽，把工作中用到的收集起来~~

如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2823
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
使用Vite搭建vue3+TS项目
m0_74823863的博客
12-25 793
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。
vite-vue-ts精简模版集成pinia+svg+router+@src
琼楼玉宇
03-22 1211
话不多说，先创建vue-ts模版， npm create vite@latest my-vite-vue-ts -- --template vue-ts 安装其他依赖： npm i vue-router sass sass-loader pinia element-plus axios @element-plus/icons-vue fast-glob vite-plugin-svg-icons npm install --save @types/nprogress ...
使用vite构建一个vue项目
06-02 853
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如：我想构建一个vue+ts的项目。
使用vite创建vue+ts项目，整合常用插件（scss、vue-router、pinia、axios等）和配置
留白声的博客
02-04 4190
scss、vue-router、pinia、axios、element-plus、eslint、prettier、vite-plus-svg-icon等插件及配置
vue3+vite+ts项目搭建运行
总结前端开发中遇到的问题，分享前端知识
02-15 741
关于vite不在介绍了，官网很详细。 # npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-.
004用vite构建vue项目并把发布到nginx
qq_45477065的博客
09-17 2403
好了， 创建成功，我们这条命令中，create是创建的一次，vite@latest是创建最新版本的vite，my-vue-app是我们的项目名称，这个我们可以自己更改的，并且我们创建完之后，下方就显示，完成。然后我们在cmd命令框中输入cd空格 然后直接右键单击粘贴路径，回车，我们发现路径位置并没有变化，是因为我们还没有切换盘符，然后我们输入d：回车就可以切换到我们想要的目录了，对了，这种命令语法叫做DOS语法，感兴趣的同学可以自行百度搜索一下。我们要学习vite项目，可以在官网中一步一步的学习，
vite+vue3+ts 手把手教你创建一个vue3项目
attengtiong的博客
12-21 8598
Vue3+Vite3+TS前端工程化实践
用vite搭建vue3+ts项目
哈喽234的博客
09-27 1968
1：首先vite环境安装或者2：输入项目的名字,在这里用vue3_test3：选择项目类型，这里选择Vue+ts4：出现下图，初始化基本创建完成项目文件目录如下我们可以发现文件有标红提示，找不到依赖文件，这时候我们到项目目录下，执行一下npm install安装一下相关依赖即可，此时可以看到已经不报错了现在我们npm run dev启动看看此时，项目初始化完成。
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2720
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
创建 vite+ts+vue3+pinia 项目（一）
不紧张，真不紧张
10-11 623
3. 选择搭建第一个 Vite 项目，使用第二个圈中的命令。也可以根据自己的需求选择不同的模板。这里选择使用vue-ts模板。5. 如果不是按照上面的使用模板的话，那么就自己选择。选择vite3中文文档（备用）。当然也可以选择第一个。2. 选择开始或者指引菜单。8. 选择TypeScript，也可使用js。4. 创建完成了，按照提示命令执行就ok。7.选择要是用的框架，这里选择Vue。9. 完成创建，按照提示命令即可。6. 创建一个项目的名称，随便起。1. 打开vite官网文档。
vue入门创建项目
naughty0809的博客
07-01 347
通过这些步骤，你就可以创建一个基于 Vue 和 TypeScript 的新项目，并使用。开发服务器启动后，你可以在浏览器中访问。，你需要先进行安装。你可以使用以下命令来安装。
构建使用 Vite 和 Vue 的项目
2301_76541209的博客
11-01 845
构建一个使用 Vite 和 Vue 的项目是一项非常实用且快速的方式，能够帮助开发者迅速搭建起一个现代前端应用的基础架构。以下是根据您提供的信息整理出的一个详细的步骤指南，用于指导如何从零开始创建一个 Vite + Vue 项目。
Vite 脚手架 搭建 Vue项目
灵魂学者的博客
07-22 2798
在之前讲过搭建 Vue 项目的脚手架 Vue-Cli，Vue-Cli目前是处于这个维护阶段，随着Vue3的到来官方推荐使用 Vite 来搭建Vue项目，Vite是一个轻量级的、速度极快的构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。那么本篇就来使用Vite脚手架搭建Vue项目，同时也提供在VScode中需要安装哪些插件可以帮助使用者来更好的编写代码。
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 15万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
构建一个 Vite + Vue 项目
enjoyenjoy576423146的博客
03-23 644
3、打开vite的官网，https://cn.vitejs.dev/guide/，找到最新创建命令。2）npm install是Node.js中的命令，用于安装Node.js包及其依赖项。注： my-vue-app 是你创建的项目文件名。这样就简单新建了一个vite+vue的项目了。1）第一个命令，打开刚刚创建的项目文件夹。1、打开cmd控制台，通过控制台创建。2、通过控制台打开指定位置文件夹。4、创建好的项目默认包含如下项目。
使用vite快速搭建vue3项目
前端打工人的博客
06-08 1178
注意：Vite 需要 Node.js 版本 >= 12.0.0。 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 然后按照提示操作即可！ 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行: # npm 6.x npm init @vitejs/app my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init
创建Vite+Vue3+TS基础项目
爱就码上行动，奔赴热爱，追光而行。愿你带着从容与热爱，拥抱每一天的惊喜与美好
03-02 3532
本篇内容不涉及插件的安装以及配置，本篇只涉及创建Vite+Vue3+TS基础项目相关内容。不讲废话，简单直接直接开撸。先看下完整的项目结构。E:\vue3练习>npm create vite vue3练习2 -- --template vue-ts。
vue3-vite前端快速入门教程 vue-element-admin
m0_61634551的博客
12-07 1562
vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。一上来就看到那么多文件夹确实头疼，咱先不管别的，主要先了解标注部分文件。
vite创建vue3 ts pinia项目
最新发布
03-20
### 创建 Vue 3 + TypeScript + Pinia 项目 要创建一个基于 Vite 的 Vue 3、TypeScript 和 Pinia 架构的前端项目，可以按照以下方法操作： #### 初始化项目 通过运行以下命令来初始化一个新的 Vite 项目，并选择 `vue-ts` 模板作为基础模板[^1]： ```bash npm create vite@latest my-vue-app -- --template vue-ts ``` 进入刚刚创建的项目目录并安装依赖项： ```bash cd my-vue-app npm install ``` #### 配置 Vite 在项目的根目录下创建或编辑 `vite.config.ts` 文件。此文件用于配置构建工具的行为。以下是基本配置示例[^2]: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) ``` #### 添加 Pinia 支持 Pinia 是 Vue 3 中推荐的状态管理库。可以通过以下方式将其集成到项目中。 安装 Pinia 及其类型声明包： ```bash npm install pinia @pinia/nuxt ``` 接着，在应用入口文件（通常是 `main.ts` 或 `src/main.ts`）中注册 Pinia 实例： ```typescript import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' const app = createApp(App) const pinia = createPinia() app.use(pinia).mount('#app') ``` #### 环境变量支持 为了让自定义环境变量能够被 IDE 正确识别和提示，可以在项目中的 `env.d.ts` 文件里扩展 `ImportMetaEnv` 接口[^4]。例如： ```typescript interface ImportMetaEnv { readonly VITE_API_ENV: string; } interface ImportMeta { readonly env: ImportMetaEnv; } ``` #### 插件优化：按需加载组件与 API 为了减少打包体积以及提升开发效率，建议使用插件实现按需引入功能。具体来说，需要安装两个插件——`unplugin-vue-components` 和 `unplugin-auto-import`[^5]。执行如下命令完成它们的安装： ```bash npm install -D unplugin-vue-components unplugin-auto-import ``` 随后更新 `vite.config.ts` 来启用这些插件的功能： ```typescript import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] }) ``` 以上步骤完成后即可拥有一个完整的 Vue 3 + TypeScript + Pinia 开发框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值