搭建vue3+ts项目流程

已于 2024-04-16 16:35:27 修改
阅读量284 收藏
点赞数 3
文章标签： vue.js 前端 javascript typescript
于 2024-04-16 11:52:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45213494/article/details/137816518
版权
本文详细介绍了使用Vue脚手架(vuecreate)和Vite构建工具创建Vue3项目的方法，包括版本检查、手动配置特性以及vite的全局安装和项目搭建步骤。
摘要由CSDN通过智能技术生成

方法一：使用vue脚手架创建项目

1.检查vue版本：vue -V (需要在4.5.1之后)
2.已安装 16.0 或更高版本的 Node.js

开始创建
1.输入命令 vue create vue3-ts-admin
2.通过上下键选择，选择 Manually select features，按回车，手动进行配置
3.通过上下键选择，通过空格键选中(使用Babel，TypeScript，Router、Vuex、CSS Pre-processors、Linter / Formatter)，按回车
4.选择vue3按回车，后面按照图片所示选择，创建完成
创建项目完成

方法二：使用vite创建项目

全局安装vite： npm install -g vite
查看版本：npm list vite

开始搭建项目
1、npm create vite@latest
2、cd 到项目需要存放的目录
创建项目完成
3、npm install 下载依赖包
4、npm run dev运行项目

RosyClouds~
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3&TS: Vue-cli4脚手架，Vue3+TS的项目搭建
干饭搬砖两不误。
01-16 4557
通过 Vue-cli4 创建的 Vue3+TS 的项目，并进行一些基础使用的举例
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和...
创建vue3+ts项目
qq_48783694的博客
03-12 2924
在开发项目的时候，经常会用到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创建项目的两种方法
最新发布
05-18 407
由于我们这个项目是基于vite创建的，我们命名为vite-demo,框架选择vue,然后选择typeScript接下来执行指令进入文件夹vite-demo当中，执行指令安装项目相关依赖执行指令可以看到ctrl+鼠标左键打开网址项目创建完毕。
【超详细前后端项目搭建】前端vue3+ts项目（引入ElementPlus、Axios）、后端springboot搭建（创建接口操作mysql数据库）实现前后端联调
热门推荐
m0_47791238的博客
12-13 1万+
本项目为简易的全栈项目，其中前端项目使用到了vue3、ts、Element Plus、axios等技术栈；后端项目使用到了springboot、jdbc、mysql、maven等技术
vue3+ts项目搭建
fmoment的博客
08-06 1486
vite+vue3.0+ts+pinia+element-plus项目搭建，基本实现企业及项目所需要的配置，注意：vue、vue-router、element-plus的API的按需加载的，不需要手动import。源码已提交github，可下载后看详细配置。地址：https://github.com/fremember/vueDemos/tree/master/vue-test
VUE3+TS项目搭建
立场简单的博客
03-14 9606
项目的创建 运行 vue create ‘项目名称' 或 vue ui 图形化配置项目 选择自己配置： 选择基础配置： 选择是否使用类样式组件： 是否使用babel编译TS： 选择router模式： 选择css预处理器： 选择eslint规范：（我选第三 eslint+prettier) 选择eslint的时间： 配置文件存放： 一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编
搭建一个vue3+ts项目（超祥/必看）
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
Vue3+Vite4+TS 后台模板
06-08
综合这些技术，Vue3+Vite4+TS后台模板为开发者提供了一个高效、易用且功能丰富的开发基础，能够快速搭建后台管理系统，节省时间和精力，同时确保代码质量。在实际项目中，开发者可以根据具体需求进行定制和扩展，以...
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架源码
11-04
在Vue3项目中，使用TS可以确保代码的类型安全，减少运行时错误。 **Vue Router**： Vue Router是Vue.js官方的路由管理器，它与Vue.js深度集成，使单页应用（SPA）的导航变得简单。Vue Router允许定义路由规则，处理...
vue3+ts+vite4脚手架
07-10
在Vue3项目中，TypeScript可以增强组件的可维护性和团队协作效率。它通过定义组件的Prop类型和返回值类型，确保了数据类型的正确性，同时TypeScript的枚举和模块系统也有助于规范项目的结构。 **Vite4**： Vite是由...
vue-cli创建vue3+ts项目
sonic
04-19 772
本文记录vue-cli创建vue3+ts项目
从0搭建一个最最最基础的vue3+ts项目（包含element plus引入，路由跳转）
weixin_52062077的博客
03-21 293
vue3项目搭建，路由跳转
vue3加ts构建项目步骤
pengxiangfei666的博客
04-10 788
2.通过上下键选择，通过空格键选中(使用Babel，TypeScript，Router、Vuex、CSS Pre-processors、Linter / Formatter)，按回车。10.是否保存当前创建 Vue3 项目的特性配置，下次再创建 Vue 项目的时候，可以选择该特性，然后回车确认即可创建完成。5.Babel 和 TS 是否一起使用，用于现代模式、自动检测的 polyfills 和转译 JSX，此处输入【y】，然后回车确认；4.是否使用 Class 风格装饰器，此处输入【y】，然后回车确认；
vite+vue3+ts 手把手教你创建一个vue3项目
attengtiong的博客
12-21 7234
Vue3+Vite3+TS前端工程化实践
2024年Web前端最全vite+vue3+ts 手把手教你创建一个vue3项目_vite创建vue3项目，前端面试数据结构算法
2401_84616399的博客
05-11 978
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料VanillaVueReactPreactLitSvelte选择ts,?
vue 3.0 + Typescript + Element 搭建项目
weixin_44872023的博客
11-23 2855
vue 3.0 创建项目 创建项目 选择自行配置 配置 Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处 Progressive Web App(PWA)：使用渐进式网页应用（PWA） Router：使用vue-router Vuex：使用vuex状态管理器 CSS Pre-processors：使用CSS预处理器，比如：less，sass等 Li
如何构建Vue3+typescript脚手架项目
weixin_41884808的博客
06-23 266
1.首先安装node和Vue脚手架vue-cli node去官网下载安装即可，至少保证10.0版本以上，越新越好 vue-cli 墙裂推荐更新一下，至少保证4.5.0以上，因为这个版本才能支持创建最新版Vue3的基础项目 npm install -g @vue/cli 2.创建项目 创建名为vue3-demo的项目 vue create vue3-demo 没有Vue3说明cli是旧版本，需要先更新，选择最后一个Manually select features选项(因为我们要添加ts，需要手动选择特
【Vue3】使用vue-cil脚手架搭建vue3+ts项目
Qxn530的博客
09-20 468
使用vue-cil脚手架搭建vue3+ts项目
vue3 + ts项目搭建
03-06
Vue 3是一种流行的JavaScript框架，它提供了一种简单、灵活和高效的方式来构建用户界面。结合TypeScript，可以增加代码的可维护性和可靠性。下面是一个简单的Vue 3 + TypeScript项目搭建的步骤： 1. 安装Vue CLI：首先，你需要安装Vue CLI，它是一个用于快速搭建Vue项目的命令行工具。你可以使用以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建项目：使用Vue CLI创建一个新的Vue项目。在命令行中运行以下命令： ``` vue create my-project ``` 然后按照提示进行选择，包括选择Vue 3和TypeScript。 3. 进入项目目录：进入到项目目录中，使用以下命令： ``` cd my-project ``` 4. 启动开发服务器：运行以下命令来启动开发服务器： ``` npm run serve ``` 这将启动一个本地开发服务器，并在浏览器中打开你的应用程序。 5. 开始编写代码：现在你可以开始编写Vue组件和TypeScript代码了。在`src`目录下创建你的组件文件，并在`main.ts`中引入和注册你的组件。 6. 构建和部署：当你完成了开发，可以使用以下命令构建生产版本的应用程序： ``` npm run build ``` 这将生成一个用于部署的`dist`目录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值