【快速开始】vuejs环境搭建第一个项目

news2025/2/24 1:37:20

本篇包含vuejs环境安装以及通过vue客户端快速创建运行第一个项目。(注:以下内容均已windows平台为基准)

目录:

一、安装nodejs

二、配置国内源加速

三、安装vue客户端

四、创建第一个应用

1、安装nodejs:

1.1、下载

官网下载地址:【v18.13.0】

1.2、安装

略(默认下一步即可,其中最好选择将node加入环境变量PATH配置中)

1.3、验证

命令行输入:node -v,若显示具体版本(如下图),则表示安装成功。

nodejs版本验证

2、配置npm国内源加速:

2.1、配置:

控制台执行命令:npm config set registry http://registry.npmmirror.com

2.2、验证:

命令行输入:npm config get registry,若显示具体版本(如下图),则表示配置成功。

nodejs淘宝源验证

3、安装vue-cli:

3.1、安装:

控制台执行命令:npm install -g @vue/cli

3.2、验证:

命令行输入:vue -V,若显示具体版本(如下图),则表示安装成功。

vuejs版本验证


至此,vue项目开发需要的开发环境已经安装完毕,下面开始第一个项目。

4、创建第一个vue应用:

控制台执行命令:vue create vueapp01

4.1、选择版本:

vue版本选择(选择"手动选择")

4.2、选择依赖(在此选择Babel和Router):

选择依赖包

选好后,回车,则会创建项目以及引入相关包,创建完成后,进入目录:cd vueapp01

4.3、控制台执行命令:npm run serve

控制台提示如下内容,则表示运行完成:

vue服务启动成功

此时打开浏览器,访问网址(默认http://localhost:8080/),可以看到如下内容。

第一个项目运行结果

至此,我们已经完成了vuejs相关软件安装第一个项目运行任务。后续将会逐步介绍具体使用技巧。敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/194014.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java】java | smart-doc + tonar | API文档统一管理

一、说明 1、准备舍弃swagger了,拥抱smart-doc 2、win10 3、jdk8 4、idea 二、搭建torna 1)下载zip https://foruda.gitee.com/attach_file/1672544760054905357/torna-1.19.4.zip?token25e02a8e2817a757a0aa47172349cc20&ts1675345098&am…

06 Sentinel规则持久化(3)

Sentinel 持久化模式 Sentinel规则的推送有下面三种模式: 1、原始模式 如果不做任何修改,Dashboard 的推送规则方式是通过 API 将规则推送至客户端并直接更新到内存中: 这种做法的好处是简单,无依赖;坏处是应用重启规则就会消失…

智能网联汽车信息安全敲响「警钟」,如何筑牢防线?

2009年起,谷歌、百度等互联网科技公司就入局自动驾驶,旨在赋予汽车更智慧的大脑。 如今,物流、港口等场景下自动驾驶的商业化落地,众多的网联化接口不仅加强了智能网联汽车与操作环境之间的紧密关联,也促使智能网联汽…

Linux 学习笔记 文件、目录操作与用户群组权限

一、命令行提示符 1.1 命令行基础 bearpi:当前用户名,在前是用户名 ubuntu:用户所在的域名,在后面,这是我自定义的,默认应该是主机名 ~ 波浪线为目前所在目录,~代表家目录(home d…

【LMI传感器】LMI Gocator线激光传感器环境变量配置

文章目录1 打开系统环境配置界面2 环境变量配置1 打开系统环境配置界面 控制面板>系统和安全>系统>高级系统设置 系统属性>高级>环境变量 2 环境变量配置 环境变量配置 GENICAM_GENTL32_PATH E:\Program Files(x86)\GoCator\Release_5.3.22.22(SR1)\Integ…

ios pod更换三方库source

无法访问github,pod无法添加三方库,此时gitlab上有这个三方库并且可以访问。以FMDB为例子本地路径:/Users/用户名/.cocoapods/repos/trunk/Specs/f/4/e/FMDB/2.7.5修改podspec.json内sourcegithubgitlab"source": { "git"…

Pipenv:作为 Python 开发人员为什么应该使用它

Pipenv 是一个旨在将所有打包世界中最好的东西带到 Python 世界的工具。它将 Pipfile、pip 和 virtualenv 整合到一个命令中。它会自动为您的项目创建和管理虚拟环境,并在您安装/卸载包时从您的 Pipfile 添加/删除包。在深入研究之前,让我们先看看 Pipen…

抓包对抗原理与案例

服务端校验客户端 案例:爱奇艺 平时我们碰到的HTTP和HTTPS都在应用层,SOCKS在会话层,TCP和UDP在传输层,IP在网络层。 HTTP未加密主要有这些不足 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装…

2月2日 读书笔记

段的起始地址用32位来表示,被称为段的基址,在本书中被分成了3段,分别为2字节、1字节、1字节。之所以这么做,主要是为了与80286时代的程序兼容。有了这样的规格,80286用的操作系统,也可以不用修改就在386以后…

不忘初心,勇攀高峰!低代码公司流辰信息紧抓机遇,努力超前冲!

在数字化发展趋势越来越激烈的当下,市场变得风云变幻,作为一家致力于提升企业办公自动化效率的低代码公司平台服务商,流辰信息矢志不渝,不忘初心,紧跟时代发展潮流,坚持围绕客户需求研发创新,提…

马哥架构第4周课程作业

docker应用一. docker常用命令博客1.1 Docker安装及基础命令介绍1.1.1 Docker 安装准备1.1.2 安装和删除方法1.1.2.1 Ubuntu 安装和删除Docker1.1.2.2 CentOS 安装和删除Docker1.1.2.3 Linux 二进制安装1.1.2.4 安装 podman1.1.2.5 在不同系统上实现一键安装 docker 脚本1.1.2.…

HBase入门概念

文章目录HBase存储结构数据模型table 逻辑结构切分存储table 物理结构架构 todo使用DDLDMLphoenixHBase nosql (k,v) 以HDFS为基础存储数据 存储结构 数据模型 nameSpace: 命名空间table: 表(需要声明…

浅谈C/S和B/S架构的工作原理及优缺点

C/S架构 一、C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内。在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架构,不过一直很流行也比…

蓝桥杯刷题019——观光公交(贪心)

题目描述 风景迷人的小城 Y 市,拥有 n 个美丽的景点。由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务。观光公交车在第 0 分钟出现在 1 号景点,随后依次前往 2、3、4……n 号景点。从第 i …

使用Workbook读取表格问题总结

使用Workbook读取表格问题总结一、Workbook类型二、问题总结1.SXSSFWorkbook为什么我Create了一万行Row但是却获取不到?2.读取表格一、Workbook类型 Workbook分三种类型: 1.HSSFWorkbook 用于Excel2003版及更早版本(扩展名为.xls)的导出; 2.…

苹果手机备忘录密码忘记了怎么办?快速解锁,亲测有效

很多小伙伴喜欢使用苹果手机的备忘录来记录重要的事情,并且还会给备忘录设置密码。可是使用的时间长了,就忘记了自己备忘录密码了。苹果手机备忘录密码忘记了怎么办?别担心,今天小编分享一个亲测有效的方法,快来看看吧…

纳瓦电子前向77GHz毫米波雷达获国内新能源头部车企定点!

伴随着中国自主品牌新车搭载ADAS功能的高速增长,中国本土毫米波雷达供应商迎来了前所未有的机遇期。 高工智能汽车研究院监测数据显示,今年1-11月中国市场(不含进出口)乘用车前装标配搭载前向毫米波雷达交付上险755.53万颗&#…

一站式开发平台 赋能办公全场景

近几年,数字化办公迎来了新的机遇,根据亿欧智库《2022中国数字化办公市场研究报告》推算,数字化办公2021年的市场规模达到973.89亿元,至2025年将达到1768.16亿元,整体增速保持平稳,2018-2025年的CAGR为15.8…

写IB EE(Extended Essay)时容易犯的五大错误

EE的重要性无需多言,EE和TOK一共占IB45分总分的3分,其中一门拿到E的话,就会fail,拿不到IB的diploma。虽说和学校老师会有meeting讨论的机会,但时间有限,提供的精准指导也有限。EE的要求很严谨,很…

基于java SSM springboot动物检疫信息管理系统设计和实现

基于java SSM springboot动物检疫信息管理系统设计和实现 博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获…