当前位置: 首页 > article >正文

VUE 3.0 如何新建项目 详细教程 附环境搭建 推荐

本人新入手一台电脑,需要安装各种环境配置,顺便把过程记录一下,方便自己以后查看,也欢迎大家参考交流。

目录

一、环境搭建:

1.Node.js安装

2.国内淘宝镜像设置

3.安装vue 环境

二、新建vue项目

1.vue脚手架新建项目

2.命令行运行启动项目

3.查看运行结果以及测试修改信息


首先查看自己开发环境 也可参考:vue从零开始配置-CSDN博客

一、环境搭建:
1.Node.js安装

:Node.js — 下载 Node.js?安装后win+r 命令行查询出现版本号 就表示安装成功了。npm不用单独安装,node安装之后就会附带npm一起安装的

2.国内淘宝镜像设置

命令行执行代码配置:npm config set registry https://registry.npmmirror.com

可参考:npm国内淘宝镜像registry镜像过期-CSDN博客

输入cnpm -v 查询到cnpm版本号说明安装成功了

3.安装vue 环境

命令行输入 cnpm i -g vue @vue/cli 安装

安装成功后 vue -V 出现对应的版本号即表示安装成功,环境安装好了,现在我们来新建一个vue项目。

vue项目编码必备插件参考:必备插件自取 vue3.0 在vscode提升编码效率-CSDN博客

二、新建vue项目
1.vue脚手架新建项目

在命令行输入vue create todolist 其中 todolist 是你所新建的项目名称,安装包下载成功界面如图所示。

现在我们用vscode编辑器 打开刚刚新建的vue项目 ,可以看到项目结构目录。

vscode安装配置可参考:vscode下载安装配置一步到位超简单-CSDN博客

2.命令行运行启动项目

打开命令行输入npm run serve运行项目。

根据项目运行结果提示 访问本地地址。

3.查看运行结果以及测试修改信息

运行结果默认是vue的初始页面

我们把页面中显示的welcome to Your Vue.js App 信息改成 Hello world!信息,保存后可以看到页面信息已经变化。

现在我们已经成功新建了一个vue项目了。欢迎大家参考交流,谢谢。

如需学习react可参考:React 开发环境搭建 超详细 全面 推荐-CSDN博客


http://www.kler.cn/a/451193.html

相关文章:

  • 重温设计模式-外观模式和适配器模式的异同
  • langchain使用FewShotPromptTemplate出现KeyError的解决方案
  • WEB UI 创建视图
  • Move AI技术浅析(二):输入与预处理
  • 使用 acme.sh 申请域名 SSL/TLS 证书完整指南
  • 突发!!!GitLab停止为中国大陆、港澳地区提供服务,60天内需迁移账号否则将被删除
  • SAP SD销售订单处理流程
  • 《探秘 OpenCV 各版本的奇妙世界》
  • 施耐德变频器ATV320系列技术优势:创新与安全并重
  • React 第十九节 useLayoutEffect 用途使用技巧注意事项详解
  • 大语言模型中的Agent优势及相关技术;Agent和RAG区别
  • 对BG兼并点的理解-不断刷新版
  • golangci-lint安装与Goland集成
  • 《算法》题目
  • 13. 导出与导入镜像
  • 边缘计算收益稳定
  • 信息安全技术——物理环境与设备安全、虚拟专用网
  • 【YashanDB知识库】XMLAGG方法的兼容
  • DevExpress WPF中文教程:Grid - 如何移动和调整列大小?(二)
  • Refusal in Language Models Is Mediated by a Single Direction
  • GESP CCF C++五级编程等级考试认证真题 2024年12月
  • 第20天:JS信息收集-Web应用JS架构URL提取数据匹配Fuzz接口WebPack分析自动化
  • springboot-starter版本升级es版本问题
  • 目标检测——基于yolov8和pyqt的螺栓松动检测系统
  • Spark和MapReduce之间的区别?
  • HTML5适配手机