如何用vue3 + vite + ts 搭建一个新项目

最新推荐文章于 2023-05-15 23:10:14 发布
最新推荐文章于 2023-05-15 23:10:14 发布
阅读量205 收藏
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44290725/article/details/126243748
版权

最近开始学习Vue3新特性，也听说了vite的“快”，决定用vue3+vite+ts搭建一个自己的项目，顺便学习新语法，提高自己的技术水平。在此记录一下，搭建新项目的步骤。

官网可自取： 快速上手 | Vue.js

创建项目

使用vite创建项目

npm init vite "项目名" -- --template vue

安装依赖：npm i

启动：npm run dev 

sugar-er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+ Vite + ts 项目配置
松烟入墨
10-28 1428
配置eslint 安装 yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier .eslintrc.js module.exports = { parser: "vue-eslint-parser", parserOptions: { par
vite-vue-ts项目搭建
Zhu_hualong的博客
06-24 2589
快速搭建vite-vue-ts项目
Vue3搭建项目
浮游的博客
03-14 5449
写这篇文章，主要是因为我记性不太好，所以记录下来，方便以后查看，距离2020 年 9 月 19 号的发布，已经有一年多了，是时候可以学起来了。 一、在开始之前，请确保已经正确安装了 node.js （1）如何检查是否安装了node.js 在命令提示符面板中，输入命令：node -v，出现版本号即为已安装，如下图。 （2）若未安装node.js 下载地址 https://nodejs.org/en/download/，选择对应你系统的Node.js版本进行下载。安装步骤不再赘述，直接下一步、下一步，完成。
手把手教你使用vite简单搭建ts+vue3全家桶
ganle的博客
10-20 1万+
一、vite环境搭建，构建vite-vue-ts项目 1、安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 2、使用vite初始化vite+vue+ts的项目 npm init @vitejs/app app-name 或者 yarn create @vitejs/app app-name 3、选择项目类型为vue+ts（小tips:git bash中直接按上下键切换选择自己想要的选项，虽然界面中不会动态展示切
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
lonelysnowman的博客
11-22 1119
🔈今天学习一下如何初始化一个 Vue3 + Ts + Vite 的项目🔊与时俱进 开始用全新的技术。本文包含以下内容：基础框架的搭建，别名配置，vue-router配置，pinia配置，axios配置，ESLint配置。
Vue3+Vite4+TS 后台模板
06-08
综合这些技术，Vue3+Vite4+TS后台模板为开发者提供了一个高效、易用且功能丰富的开发基础，能够快速搭建后台管理系统，节省时间和精力，同时确保代码质量。在实际项目中，开发者可以根据具体需求进行定制和扩展，以...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
uniapp + vue3 +vite + ts + pinia 框架模板
最新发布
01-31
这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在框架中的作用。 **uni-app** 是一个跨平台的开发框架，它允许开发者使用一套代码来...
Vue3+vite4 +TS后台模板
06-08
Vue3+vite4+TS后台模板是一个现代前端开发的高效解决方案，它结合了Vue.js的最新版本、vite构建工具的第四版以及TypeScript的强大类型系统。这个模板为开发复杂的后台管理系统提供了良好的基础，旨在提高开发效率和...
vue3+vite+antd 后台管理系统基础模板
02-06
这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速搭建后台管理系统的项目起点。它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env....
初始化 VUE 3.0 项目
weixin_49133874的博客
06-07 262
1.构建项目 npm init vite-app demo cd demo npm install // 建议使用淘宝镜像 cnpm install npm run dev 2.路由 cnpm install vue-router@next -S 在src 目录下新建 rourer 文件夹，在文件夹下新建 index.js 文件，添加如下内容： import {createRouter, createWebHashHistory} from 'vue-router' export default
Vue老项目由js转换ts指南
Aren的博客
08-23 9408
Vue（2.x）老项目由js转换ts指南 其实在网上有不少关于，vue迁入ts的教程，但是很多并不完善，故做此篇 本项目基于 vue-admin-template进行改造 ，它是有ts版本的，因此本文章讨论的是老项目，由vue-cli构建的迁移 如果你的项目是由vue-cli构建的那么转换项目并不需要手动去添加各种配置文件等，因为vue-cli有内置的ts迁入命令进入项目 vue add typescript 如果使用git管理代码，请先保证工作区clear，输入完命令后，终端会自动为你安装 @vue/cl
使用vite搭建vue3.2项目，包含vuex+router+element-plus+ts；项目初始化完整版教程
Shivy_的博客
05-21 1814
使用vite搭建vue3.2项目，包含vuex+router+element-plus+ts;项目初始化完整版教程
vue2项目改造成Ts
02-07 2110
ps：研究阶段 一代版本： （无法修改main.js因为，main.js是vue-cli的启动文件，需要修改配置了） 1、主要注意Ts的版本，install一下 "ts-loader": "^4.4.2", "tslint": "^6.1.3", "tslint-config-standard": "^9.0.0", "tslint-loader": "^3.5.4", "typescript": "^3.5.2", "vue-property-decorator": "^9.1.2", "v
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 1万+
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
vite 创建 vue3 项目 TS 类型
大家好，我是 ed.
07-28 1372
之前学习过vue2的宝子们是知道的，当时我们开发vue2项目呢，使用的是js编码。当vue3发布之后，很多小伙伴尝鲜，很多人都已经知道了vue3的底层是用ts来写的，所以呢，vue3对于ts的支持和适配已经是相当不错了，所以说呢，现在开发vue3的时候呢，有必要了解一下ts版本的开发。无论是js还是ts开发，其实都是一样的哈，在开发项目的时候呢，ts版本可以从一开始就能避免很多类型上的问题，所以说呢，先看一下ts项目的创建吧。......
vue3项目中引入ts
热门推荐
一缕阳光@的博客
07-13 2万+
基于vue3项目的基础上引入ts
vue3中使用ts
weixin_50736511的博客
10-11 1万+
在创建vue脚手架的时候吧typescript选上 app.vue <template> <!-- <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> --> <div i
Vue3 项目初始化配置规范
A535366的博客
10-19 1725
项目搭建规范： 一. 代码规范 1.起始创建项目 2.选择vue3 3.是不是使用类样式的组件语法，选择是no 4.是不是使用Babel中TypeScript 选择yes 5.是使用history路由还是哈希路由 选择yes 6.使用什么样的css预处理器 选择Less 7.选择一个查看linter格式化器配置 选择最漂亮的 ESLint+Prettire 8.选择在...
vue3+vite+ts项目搭建
05-20
打开命令行工具，使用以下命令创建一个新的 Vue3 项目： ``` npm init vite-app cd npm install ``` 3. 添加 TypeScript 支持 通过以下命令安装 TypeScript： ``` npm install --save-dev typescript ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值