npm创建vue的ts项目

于 2024-07-31 09:25:29 发布
阅读量197 收藏 2
点赞数 6
分类专栏： VUE3 前端 文章标签： npm vue.js 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35204012/article/details/140813711
版权

一、进入项目文件夹

使用cmd进入你想要创建项目的文件夹，此处为 E盘的test文件夹

cd E:\test

E:

二、创建项目

此处项目名为 MyTestProject

npm create vite@latest

输入上述代码，回车后会出现灰色的虚拟名称，此处输入你自己的名称即可，回车后是package name，默认回车即可，下面使用上下键选择Vue 回车，再选择TypeScript，回车后即可创建！

三、运行项目 

使用如下命令运行项目：

  npm install
  npm run dev

注意，js和ts只是在书写上有些许差异，个人推荐vue3的话使用TS更舒适些，推荐一个TS的UI框架：elementUI-PLUS

lytcreate.
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vite+vue3+ts 手把手教你创建一个vue3项目
weixin_59916662的博客
10-17 6万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
npm基于vite制作自己的npm包+ts超详细
07-28
在本文中，我们将深入探讨如何使用npm，Vite和TypeScript来创建一个基于Vue3的自定义播放器项目。这个项目描述中提到的核心技术栈包括Vue.js的最新版本Vue3，Vite作为构建工具，以及TypeScript作为强大的类型系统...
vue3+ts项目创建 使用npm create vue@latest
weixin_38345306的博客
03-06 509
vue3+ts项目创建 使用npm create vue@latest
快速创建vue-ts项目基本结构
m0_56409834的博客
06-13 559
【代码】快速创建vue-ts项目基本结构。
创建一个vue3 + ts + vite 项目
weixin_44244924的博客
03-28 873
创建一个vue3 + ts + vite 项目
利用vite创建vue项目
qq_41199502的博客
04-11 1452
在运行 npm install 命令之后，npm 还会自动更新 package.json 文件中的 package-lock.json（或 yarn.lock）文件，以记录确切的包版本和依赖关系。在 Vite 项目中，vite.config.ts 文件是一个 TypeScript 文件，位于项目根目录下。在HBuilderX工具上打开刚刚创建前端项目，修改 vite.config.ts 文件中的项目启动端口号，添加如下内容，然后保存文件。需要注意的是，vite.config.ts 文件是可选的。
创建vue3+ts项目
qq_48783694的博客
03-12 2969
在开发项目的时候，经常会用到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项目
热门推荐
m0_69502730的博客
08-24 2万+
如何创建vue3项目
如何创建Vue3项目
weixin_43385060的博客
03-15 915
已安装 16.0 或更高版本的 Node.js。
yarn+npm分别创建vue3项目保姆级教程。
CHINA_YoungGuo的博客
03-12 4922
1 ，vue环境 1.1 安装node: 直接下一步下一步官网下载：https://nodejs.org/zh-cn/ 1.2 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 创建vue的工程（需要一个vue脚手架） cnpm install -g @vue/cli 注：如果2、3步报错，清除缓存后重新走2、3步 npm cache clean --force 1.4 命令行下敲 vue -h就会有提示 2
npm发布Vue组件
qq_15509267的博客
01-31 1131
本文主要介绍如何把一个vue组件通过vite编译发布到NPM平台。
vue项目引入ts步骤(小结)
10-16
首先，你需要通过npm或cnpm安装TypeScript和ts-loader作为开发依赖。这两个包是将TypeScript集成到Vue项目中的核心工具。 ```bash cnpm i typescript ts-loader --save-dev ``` 2. **创建tsconfig.json** 在...
解决vue项目运行npm run serve报错的问题
01-18
先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 ；%SystemRoot%\system32;...补充知识：vue npm run serve报错Cannot find module ‘eslint-plugin
vue-cli3 js项目中引入ts混用typeScript1
08-08
由于Vue CLI默认不理解`.vue`文件中的TypeScript语法，所以需要创建一个声明文件`vue-shim.d.ts`来解决这个问题。在项目根目录下创建此文件，并输入以下内容： ```typescript declare module "*.vue" { import Vue...
Vite+vue3+ts 项目初始化底座
02-21
接着，创建一个新的Vue 3项目，同时指定使用TypeScript： ``` create-vite my-vue3-ts-project --template vue cd my-vue3-ts-project ``` 这将生成一个基础的Vue 3 + TypeScript的项目结构。 **5. 配置Vite** 在`...
npm提示 certificate has expired 证书已过期 已解决
最新发布
weixin_43483590的博客
07-24 567
npm提示 certificate has expired 证书已过期 已解决
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 747
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1058
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 921
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
创建vue2 ts项目
08-11
要创建一个Vue 2 TypeScript项目，你可以按照以下步骤进行操作： 1. 确保你的电脑上已经安装了Node.js和npm。你可以在终端中运行 `node -v` 和 `npm -v` 命令来检查它们是否已经安装。 2. 打开终端，进入你想要创建项目的目录。 3. 运行以下命令来创建一个新的Vue项目： ``` npm init @vitejs/app my-vue-project --template vue-ts ``` 这个命令会使用 Vite 工具来创建一个新的Vue项目，并选择 Vue 2 TypeScript 模板。 4. 进入新创建的项目目录： ``` cd my-vue-project ``` 5. 安装项目依赖： ``` npm install ``` 6. 运行开发服务器： ``` npm run dev ``` 这将启动一个开发服务器，并在浏览器中打开一个新的窗口，显示你的Vue应用程序。 现在，你已经成功创建了一个Vue 2 TypeScript项目。你可以在 `src` 目录下找到主要的应用程序文件，并开始开发你的Vue应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lytcreate.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值