AI 助理
备案控制台
开发者社区 云计算 文章 正文

使用npm构建vite+vue+ts项目的两种方式

2024-06-25 145
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用npm构建vite+vue+ts项目的两种方式

前置条件：node安装正常

一、使用vite@latest

找到合适的文件夹路径，在命令行输入：

npm init vite@latest

输入项目名称

使用上下键选择框架

选择构建使用的语言 完成构建

命令行依次输入

 cd vite-hello
  npm install
  npm run dev


二、使用vue@latest

npm init vue@latest

关键词：
npm项目
npm构建项目
npm vue项目
npm构建
npm vue
好奇的菜鸟
目录
相关文章
我是快乐的嘟嘟
|
2月前
|
JavaScript 安全 测试技术
vue封装组件发布到Npm
【10月更文挑战第17天】
我是快乐的嘟嘟
42 9
邹荣乐
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
355 3
前端徐徐
|
2月前
|
资源调度 JavaScript 前端开发
如何实现一个类似 vite 的脚手架并发布 npm
本文介绍了如何实现一个类似 Vite 的脚手架工具。通过详细解析和实践，文章分享了从零开始构建脚手架的过程，包括技术选型、开发步骤及发布 NPM 包的完整流程。最终目标是让用户能够通过 `yarn create electron-prokit myapp` 快速搭建 Electron 项目。项目源码可在 GitHub 上获取。
前端徐徐
37 5
想飞的雪糕
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考：代码复用带来的隐形耦合，可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧！
最近，我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问，引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题，并提出减少不必要的依赖、重视模块设计等建议，以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历，强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
想飞的雪糕
40 0
邹荣乐
|
2月前
|
前端开发 JavaScript 开发工具
从零开始：构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始：构建、打包并上传个人前端组件库至私有npm仓库的完整指南
邹荣乐
396 0
杀死一只知更鸟debug
|
3月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量，创建一个空文件夹并使用VSCode打开，通过VSCode的终端执行`npm init vue@latest`命令以初始化项目，选择默认配置即可。接着安装项目依赖并启动开发服务器，最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
杀死一只知更鸟debug
355 1
周一同学Zelina
|
3月前
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错：command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法，包括清理缓存、更换npm源、重新安装Node.js等措施。
周一同学Zelina
651 0
8种方法解决vue创建项目报错：command failed: npm install --loglevel error
嗯哼9925
|
数据安全/隐私保护
npm上传自己的项目
嗯哼9925
1462 0
磊哥聊Java
npm上传自己的项目
npm安装就不介绍了，自行度娘。本文介绍npm上传 先初始化：npm init  根据提示填完系统介绍信息（package.json）； 再登录npmjs： npm login 效果如图： 输入注册的用户名、密码、邮箱，如上图说明已经登录了。
磊哥聊Java
790 0
邹荣乐
|
2月前
|
缓存 资源调度 JavaScript
npx与npm的差异解析，以及包管理器yarn与Node版本管理工具nvm的使用方法详解
npx与npm的差异解析，以及包管理器yarn与Node版本管理工具nvm的使用方法详解
邹荣乐
71 0

热门文章

最新文章

  • 1
    npm install —— 从一个简单例子，看本地安装与全局安装的区别
  • 2
    [npm]使用(c)npm安装yarn
  • 3
    GitHub 宣布正式收购 npm | 云原生生态周报 Vol. 42
  • 4
    npm使用指南
  • 5
    node版本与npm版本不对应的解决方案
  • 6
    nvm 安装 node 成功，npm 却安装失败？
  • 7
    NPM 使用介绍
  • 8
    使用npm发布自己包（详细教程）
  • 9
    npm更换成cnpm---------cnpm的安装
  • 10
    vue npm run build打包报错：Class extends value undefined is not a constructor or null
  • 1
    node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题
    794
  • 2
    npm install没问题，但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
    69
  • 3
    发布第一个npm包的过程记录
    89
  • 4
    nvm, node.js, npm, yarn 安装配置
    324
  • 5
    nvm,npm,yarn相关指令，前端配置准备
    66
  • 6
    npm指令
    57
  • 7
    npm install 太慢？解决方法
    7046
  • 8
    深入剖析NPM： Node包管理器的介绍和使用指南
    89
  • 9
    使用npm install时遇到问题:npm ERR! code ERESOLVE
    179
  • 10
    npm报错：npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED，npm ERR! npm ERR! If you are behind a
    169

    • 相关课程

    更多
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • Node.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 基于FAAS构建NPM同步CDN
  • 23-Vue.js在前端...1506518547.pdf

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境

    • 推荐镜像

    更多
  • NPM
  • pypi
  • composer
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS