用vite创建 vue3 ts项目

原创已于 2022-11-21 13:54:18 修改 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #typescript

于 2022-09-22 16:35:57 首次发布

vue3 专栏收录该内容

4 篇文章

订阅专栏

本文分享了作者首次独立使用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

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

启动项目界面

在这里插入图片描述

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Aurora_juan

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何创建一个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

791

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。

参与评论您还未登录，请先登录后发表或查看评论

创建 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官网文档。

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-.

vite+vue3+ts 手把手教你创建一个vue3项目

attengtiong的博客

12-21

8597

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

2719

在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。

004用vite构建vue项目并把发布到nginx

qq_45477065的博客

09-17

2402

好了，创建成功，我们这条命令中，create是创建的一次，vite@latest是创建最新版本的vite，my-vue-app是我们的项目名称，这个我们可以自己更改的，并且我们创建完之后，下方就显示，完成。然后我们在cmd命令框中输入cd空格然后直接右键单击粘贴路径，回车，我们发现路径位置并没有变化，是因为我们还没有切换盘符，然后我们输入d：回车就可以切换到我们想要的目录了，对了，这种命令语法叫做DOS语法，感兴趣的同学可以自行百度搜索一下。我们要学习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

3531

本篇内容不涉及插件的安装以及配置，本篇只涉及创建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项目