VUE-脚手架搭建

文章目录

  • 一、概述
  • 二、前提准备
    • 1. 安装 node-js
    • 2. npm 镜像设置
    • 3. 安装 vs-code
  • 三、脚手架搭建
    • 1. Vue-2 搭建
    • 1. Vue-3 搭建


一、概述

官网:http://cn.vuejs.org/

在这里插入图片描述

vue 有两个大版本,分别是 vue-2 和 vue-3,目前新项目的话用 vue-3 的会比较多

vue-2 官方文档:https://v2.cn.vuejs.org/v2/guide/installation.html

vue-3 官方文档:https://cn.vuejs.org/guide/introduction.html

以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。


二、前提准备

1. 安装 node-js

为什么要下载 node-js ?

node 提供了 Javascript 的运行环境,可以让 Javascript 运行在服务端的开发平台

node-js 下载:https://nodejs.org/en/download/

在这里插入图片描述

一般会选择在 LTS 下进行下载,因为 LTS 是稳定版本的,然后根据自己电脑的系统选择安装,比方说我电脑是 windows-64x 的,那我就点击 Windows Installer(.msi) > 64-bit 就会开始下载

在这里插入图片描述

如果想要下载旧版本可在 Previous Release 中查询

在这里插入图片描述
点击 Releases 就能跳转到对应的下载界面

在这里插入图片描述
或者直接在地址上面输入,点击 enter 也能获取

在这里插入图片描述

PS:建议 node-js 的版本最好在 16 以上

点击对应的包即可下载完成

在这里插入图片描述

下载好安装程序包之后,只需要双击打开即可进行安装

在这里插入图片描述

node 的安装也是傻瓜式的,一直 next 即可

在这里插入图片描述

然后点击 finsh

检测 node-js 是否安装成功,只需要 win + R 调起 运行命令框,输入 cmd 打开 cmd窗口,再输入 node -v 查看 node 的版本,如果有显示版本信息,就表明 node-js 安装成功了

在这里插入图片描述
npmnode-js 的包管理和分发工具,当安装完成 node-jsnpm 也随之安装完成,可以通过 npm -v 来校验是否安装成功

在这里插入图片描述

2. npm 镜像设置

vue 中经常会使用 npm 来安装一些包,而 npm 的下载镜像是在国外,所以使用 npm 下载会非常的慢,这里有两种方式来解决这个问题:

  • 方式一:使用 yarn 进行安装

    使用 yarn 安装就需要保证当前系统有下载过 yarn,同样可以在 cmd窗口 中输入 yarn -v 来检测是否安装过 yarn
    在这里插入图片描述
    如果没有就下载,输入:npm i -g yarn,下载完成之后仍旧可以输入 yarn -v 来进行检测
    在这里插入图片描述

  • 方式二:设置 npm 镜像为国内的
    可以在 cmd窗口 中通过 npm config get registry 命令来查询 npm 所使用的镜像
    在这里插入图片描述
    默认使用的镜像是:https://registry.npmjs.org/,如果你 npm 所使用的镜像是这个的话,就换成国内的,比如:
    (1)https://registry.npm.taobao.org/
    (2)https://registry.npmmirror.com
    比如我使用 https://npmmirror.com/ 所提供的镜像 https://registry.npmmirror.com
    在这里插入图片描述
    那就可以通过 npm config set registry https://registry.npmmirror.com 这行命令将镜像设置为 https://registry.npmmirror.com 即可
    在这里插入图片描述

3. 安装 vs-code

vue 推荐使用 Visual Studio Code 作为编辑器,如果你之前用的是其它的编辑器进行开发,建议换成 vs-code

因为

Visual Studio Code 下载:https://code.visualstudio.com/Download

在这里插入图片描述
这个安装就不多做演示了


三、脚手架搭建

1. Vue-2 搭建

(一)安装 vue-cli:

vue-cli 就是 Vue 的脚手架

vue-cli 官方文档:https://cli.vuejs.org/zh/guide/

在这里插入图片描述

可以看到目前 vue-cli 已经处于 维护模式 了,但并不影响对它的使用

从官方文档上可以看到安装 vue-cli 可以执行以下任一命令即可:

npm install -g @vue/cli

或者

yarn global add @vue/cli

例如:在 终端窗口 输入 npm install -g @vue/cli 进行安装

在这里插入图片描述

可以通过 vue --version 查看是否安装成功

在这里插入图片描述

如果能看到版本信息就表明安装成功

升级 vue-cli

  • 如果是通过 npm install -g @vue/cli 进行安装的,那么就用 npm update -g @vue/cli 进行升级
  • 如果是通过 yarn global add @vue/cli 进行安装的,那么就用 yarn global upgrade --latest @vue/cli 进行卸载

卸载 vue-cli

  • 如果是通过 npm install -g @vue/cli 进行安装的,那么就用 npm uninstall -g @vue/cli 进行卸载
  • 如果是通过 yarn global add @vue/cli 进行安装的,那么就用 yarn global remove @vue/cli 进行卸载

(二)搭建脚手架:

可以建一个空白文件夹来存放项目,在该文件夹下调出 终端窗口

在这里插入图片描述

然后输入以下命令创建项目

vue create <product-name>

<product-name> 表示创建项目的名称,值得注意的是 项目名称不能出现大写字母,如:myApp

例如:创建一个名为 my-vue2 的项目

输入 vue create my-vue2 命令,现在默认是创建 vue-3 的脚手架,可以通过 ↑ ↓ 键来选择所需创建 vue 脚手架的版本,这里我就选择 Default([Vue 2] bale, eslint)

在这里插入图片描述

选择之后点击 enter 就会开始自动搭建

在这里插入图片描述

到这里 vue-2 的脚手架就已经搭建完成了,可以将创建完成的项目在 vs-code 当中打开

在这里插入图片描述

新建一个终端,输入 npm run serve 命令运行项目即可

在这里插入图片描述

控制台输入以下内容,表示成功

在这里插入图片描述

可以复制链接到游览器上查看:http://localhost:8080/

在这里插入图片描述


1. Vue-3 搭建

方式一:

可以继续像 vue-2 搭建脚手架那种方式进行搭建,下载 vue-cli,只不过选择 Default([Vue 3] bale, eslint)

在这里插入图片描述

其余步骤与 vue-2 搭建脚手架的步骤一样,就不多做赘述

方式二:

从官方文档中可知

在这里插入图片描述

使用 vue-3node-js 的版本最好是在 16.0 以上

创建 vue-3 的脚手架不需要安装 vue-cli,只需要输入以下命令即可:

npm create vue@latest

例如:创建一个名为 my-vue3 的项目

在一个空白的文件夹下调出 终端窗口

在这里插入图片描述

输入 npm create vue@latest 命令,接着输入项目名称 <your project-name> ,然后一直按 enter 直至结束,就能创建成功

在这里插入图片描述

同样也可以将创建好的项目拖动到 vs-code

在这里插入图片描述

打卡终端工具,先输入 npm install 安装一些必要的包,再 npm run serve 运行即可

在这里插入图片描述

可以复制链接到游览器上查看:http://127.0.0.1:5173/

在这里插入图片描述

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

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

相关文章

Elasticsearch 进阶(索引、类型、字段、分片、副本、集群等详细说明)-06

笔记来源&#xff1a;Elasticsearch Elasticsearch进阶 进阶-核心概念 索引Index 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字…

RT-DETR 图片目标计数 | 特定目标进行计数

全类别计数特定类别计数如何使用 RT-DETR 进行对象计数 有很多同学留言说想学 RT-DETR 目标计数。那么今天这篇博客,我将教大家如何使用 RT-DETR 进行对象计数。RT-DETR 是一种非常强大的对象检测模型,它可以识别图像中的各种对象。我们将学习如何利用这个模型对特定对象进行…

迅为RK3568开发板使用OpenCV处理图像-ROI区域-位置提取ROI

在图像处理过程中&#xff0c;我们可能会对图像的某一个特定区域感兴趣&#xff0c;该区域被称为感兴趣区域&#xff08;Region of Interest, ROI&#xff09;。在设定感兴趣区域 ROI 后&#xff0c;就可以对该区域进行整体操作。 位置提取 ROI 本小节代码在配套资料“iTOP-3…

C++ 学习系列 -- 模板 template

一 C 模板介绍&#xff1f; C 为什么引入模板&#xff1f; 我的理解是&#xff1a; C 引入模板的概念&#xff0c;是为了复用重复的代码&#xff0c;当某些代码除了操作的数据类型不同以外&#xff0c;其他逻辑全都相同&#xff0c;此时就适合采用模板的方式。 定义模板类或者…

黑豹程序员-axios+springmvc传递数组

问题 奇怪的现象&#xff0c;axios在往后台传递数组时&#xff0c;springmvc竟然接收不到 解决 尝试多次无果&#xff0c;突然看一篇文章写vue中的数组不是真正的数组需要强转转化JSON.stringify 将信将疑下测试了一把&#xff0c;还真的传递成功了。 不光要JSON.stringify…

Github 2023-12-15 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2023-12-15统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量TypeScript项目3非开发语言项目3JavaScript项目1Python项目1Rust项目1PHP项目1 基于项目的学习 创建周期&am…

微服务组件Sentinel的学习(3)

Sentinel 隔离和降级Feign整合Sentinel线程隔离熔断降级熔断策略 授权规则&#xff1a;自定义异常 隔离和降级 虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。而要将这些故障控制在一定范用避免雪崩&#xff0c;就要靠线程隔离(舱壁…

Dockerfile创建镜像--LNMP+wordpress

实验准备&#xff1a; nginx&#xff1a;172.111.0.10 docker-nginx mysql&#xff1a;172.111.0.20 docker-mysql php&#xff1a;172.111.0.30 docker-php 自定义网段&#xff1a;172.111.0.0/16mkdir nginx mysql php mv nginx-1.22.0.tar.gz wordpress-6.4.2-zh_CN.ta…

Polkadot 品牌焕新提案:重返前卫,市场营销的创新愿景

波卡的品牌形象和营销策略也许将迎来新变化。长久以来一些社区成员批评道&#xff0c;波卡的形象过于保守、太企业化&#xff0c;缺乏 Crypto 行业应有的先锋气质。 在前阵子的 Parity “去中心化” 变革中&#xff0c;Parity 的营销团队经历了大幅的变动&#xff0c;随后建立…

UGUI 鼠标悬浮UI出现弹框,鼠标在图片边缘出现闪烁

1、背景&#xff1a;鼠标悬浮在UI上出现提示框 public class SpecialParam_list : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler {public void OnPointerEnter(PointerEventData eventData){TipBox.Instance.ShowBox(Input.mousePosition, value);}public void …

如何实现免费的文档翻译

文中有彩蛋&#xff0c;请一定要看完。 目录 文中有彩蛋&#xff0c;请一定要看完。 一、问题的提出 二、文档翻译现状 三、如何免费海量文档翻译 1. 采用CAT工具机器翻译API法 2. 采用小牛文档翻译 四、学后反思 一、问题的提出 随着互联网和人工智能技术的飞速发展&…

Kubernetes 容器编排(2)

可视化部署 官方Dashboard 部署Dashboard # kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.4.0/aio/deploy/recommended.yaml # kubectl edit svc kubernetes-dashboard -n kubernetes-dashboard # 注意将 type: ClusterIP 改为 type: NodePo…

案例064:基于微信小程序的考研论坛设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

php入门、安装wampserver教程

php声称是全世界最好的语言&#xff0c;今天这篇文章就带大家入门学习php&#xff0c;php和python、javasript一样&#xff0c;是一种弱类型的脚本语言。 一、php开发环境搭建 作为初学者&#xff0c;学习php建议安装wampserver&#xff0c;wampserver是包含了apache、php和mys…

MFC逆向之CrackMe Level3 过反调试 + 写注册机

今天我来分享一下,过反调试的方法以及使用IDA还原代码 写注册机的过程 由于内容太多,我准备分为两个帖子写,这个帖子主要是写IDA还原代码,下一个帖子是写反调试的分析以及过反调试和异常 这个CrackMe Level3是一个朋友发我的,我也不知道他在哪里弄的,我感觉挺好玩的,对反调试…

VMP泄露编译的一些注意事项

VMP编译教程 鉴于VMP已经在GitHub上被大佬强制开源&#xff0c;特此出一期编译教程。各位熟悉的可以略过&#xff0c;不熟悉的可以参考一下。 环境&#xff08;软件&#xff09; Visual Studio 2015 - 2022 &#xff08;建议使用VS2019&#xff0c;Qt插件只有这个版本及以上…

vscode的文件和文件夹的警告标志如何消去

由于平时用vscode写一些java的小demo, 但是这个vscode的警告和错误管理很奇怪, 这个警告信息会显示在这个侧边的文件和文件夹中, 我上网上找能不能把这个给去掉的办法, 找了半天没找到。 于是我就自己去查了一下这个vscode的设置, 真让我找到了这方面的开关, 把下面的这个关闭…

Linux学习笔记-Ubuntu下ssh服务器连接异常Connection reset

文章目录 一、问题问题现象1.1 连接重置无法访问的的问题1.2 查看服务器连接状态1.3 使用调试模式查看的信息 二、临时解决方法三、从根源解决问题3.1 问题分析3.2 服务器的ssh日志3.3 修改ssh配置禁止root登录3.4 配置允许所有ip访问3.5 修改认证方法 角色&#xff1a;百世经纶…

selenium+xpath爬取二手房标题

贝壳找房标题爬取需要注意的是&#xff0c;在页面中间有一个小广告 而他就在ul的li下面&#xff0c;当我们进行title所以输出时&#xff0c;会报错。 所以在进行页面解析之前必须把广告叉掉&#xff0c;不然也把广告那一部分的li给爬取下来了 所以&#xff0c;我们&#xff0…

软件测试职业规划

软件测试人员的发展误区【4】 公司开发的产品专业性较强&#xff0c;软件测试人员需要有很强的专业知识&#xff0c;现在软件测试人员发展出现了一种测试管理者不愿意看到的景象&#xff1a; 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)&#xff1b; 2、业务…