【Web】vue开发环境搭建教程(详细)

news2024/11/28 11:52:27

系列文章

C#底层库–记录日志帮助类
本文链接:https://blog.csdn.net/youcheng_ge/article/details/124187709

文章目录

  • 系列文章
  • 前言
  • 一、安装准备
    • 1.1 node.js
    • 1.2 国内镜像站
    • 1.3 Vue脚手架
    • 1.4 element ui
    • 1.5 Visual Studio Code
  • 二、安装步骤
    • 2.1 下载msi安装包
    • 2.2 双击打开,下一步直到安装完成
    • 2.3 检验node.js是否安装成功
    • 2.4 修改npm镜像
    • 2.5 安装vue脚手架
    • 2.6 检查vue脚手架安装是否成功
    • 2.7 创建vue项目
    • 2.8 安装vscode,并且安装插件
  • 三、注意事项及补充
    • 3.1 vscode终端,提示禁止运行脚本
    • 3.2 npm下载速度慢


前言

本专栏为【H5】,主要介绍前端知识点。
在这里插入图片描述

一、安装准备

1.1 node.js

链接:https://nodejs.org/en/download

1.2 国内镜像站

链接:https://developer.aliyun.com/mirror/?spm=a2c6h.25603864.0.0.60dd1a8cRsjAyM
在这里插入图片描述

1.3 Vue脚手架

链接:https://cli.vuejs.org/zh/guide/installation.html
在这里插入图片描述

1.4 element ui

饿了么UI库
https://element.eleme.cn/#/zh-CN
在这里插入图片描述

1.5 Visual Studio Code

链接:https://code.visualstudio.com/Download
在这里插入图片描述

二、安装步骤

2.1 下载msi安装包

LTS稳定版,Current开发版本
32-bit 32位操作系统,64-bit 64位操作系统。
在这里插入图片描述

2.2 双击打开,下一步直到安装完成

在这里插入图片描述

2.3 检验node.js是否安装成功

Ctrl+R 打开cmd命令窗,输入以下命令:

node -v

在这里插入图片描述

2.4 修改npm镜像

npm在国外,没有VPN我们下载会很慢,所以要改成国内的镜像。

//查看当前镜像地址
npm config get registry

//修改镜像地址,为阿里镜像
npm config set registry https://registry.npmmirror.com

在这里插入图片描述
注意:原 http://registry.npm.taobao.org已下线,国内很多资料未及时更新,依旧教你使用旧的。

2.5 安装vue脚手架

一样的cmd命令窗,输入以下命令:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.6 检查vue脚手架安装是否成功

vue -V

注意:此处的V是英文大写。

2.7 创建vue项目

创建一个项目目录,任意位置。
在这里插入图片描述
在红色框处,直接输入cmd,敲回车键,打开cmd命令窗,输入如下命令:

vue create ys-dms

此时项目就创建成功了。

2.8 安装vscode,并且安装插件

红色框推荐安装插件
在这里插入图片描述

三、注意事项及补充

3.1 vscode终端,提示禁止运行脚本

在这里插入图片描述
在这里插入图片描述

解决方案:
1、卸载掉node.js重新安装
2、电脑安装有加密软件,下载时给json文件加密,导致无法验证文件
3、权限不够导致,以管理员身份运行
4、需要解除Execution_Policies(运行策略)的限制。

set-ExecutionPolicy RemoteSigned //设置为RemoteSigned 远程签名的

3.2 npm下载速度慢

解决方案:
1、使用yarn下载
2、使用cnpm下载
3、修改镜像地址,最好先查一下最新的镜像地址是什么。

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

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

相关文章

【考研数学】高等数学第五模块 —— 级数(1,常数项级数)

文章目录 引言一、常数项级数1.1 基本概念1.2 基本性质1.3 两个重要级数1.3.1 p 级数1.3.2 几何级数 1.4 正项级数及其敛散性判断1.5 交错级数及其审敛法1.6 级数的绝对收敛与条件收敛 写在最后 引言 来攻坚级数了,其实也不用这么畏难,几年前刚接触时没…

【力扣每日一题】2023.9.5 从两个数字数组里生成最小数字

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们两个数字数组,要我们用这两个数组里的元素组成一个数字,这个数字里需要同时拥有两个数组里的至少一个元…

10个最强大的基于生成式AI的3D建模工具

推荐:用 NSDT编辑器 快速搭建可编程3D场景 在快速发展的技术世界中,人工智能 (AI) 已经改变了游戏规则,尤其是在 3D 对象生成领域。 AI 驱动的 3D 对象生成器彻底改变了我们创建和可视化 3D 模型的方式,使该过程更加高效、准确且可…

Bigemap如何添加历史影像

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP 打开软件,然后点击选择地图这个按钮,列表中有个添加按钮点进去选择添加地图的方式。 ​ 第一种方式:通过地图配置文件批量解析添加地…

ipad触控笔是哪几款?开学季平价电容笔推荐

许多人已经开始用iPad写字和画画了。而且现在的iPad,偏重于实用性,他们认为,要让iPad更加的实用,必须要有一个好的电容笔才行。事实上,如果你仅仅是想要用它来做笔记的话,有许多的平替的电容笔,…

Shell常用的几个正则表达式:[:alnum:], [:alpha:], [:upper:], [:lower:], [:digit:] 认知

一:通配符命令简介: 匹配符合相关条件的符号,匹配文件名查找。 通配符类型: *:匹配任意长度的任意字符 ?:匹配任意单个字符 []:匹配指定范围内的任意单个字符 [^]:匹配指…

Odoo|5分钟创建自定义的业务系统唯一序列号

在业务操作中,经常会遇到需要生成全局唯一序列号数据的情况,比如订单号、报价单号等。为了确保数据的唯一性和准确性,通常我们会使用Redis或其他分布式锁机制来实现。然而,很多人可能不知道,odoo框架本身提供了一个原生…

各种工具集锦(持续更新ing...)

诸神缄默不语-个人CSDN博文目录 用LLM(大规模预训练语言模型)或者说AI的,特见我写的这篇博文:在线LLM应用集锦(持续更新ing…) 本篇博文不会重复该博文中写过的内容。 文章目录 1. 视频制作1. 视频剪辑软件…

CVE-2023-3450:锐捷 RG-BCR860 命令执行漏洞复现

锐捷 RG-BCR860 命令执行漏洞(CVE-2023-3450)复现 0x01 前言 本次测试仅供学习使用,如若非法他用,与本文作者无关,需自行负责!!! 0x02 漏洞描述 Ruijie Networks RG-BCR860是中国锐捷网络(R…

标绘一张图系统

一、概况 智慧武装三维电子沙盘是一种结合了智能技术和虚拟现实技术的沙盘模拟系统。它通过使用三维投影技术和交互式触控技术,将实际战场的地形、建筑物、人员等元素以虚拟的形式呈现在沙盘上。 智慧武装三维电子沙盘可以实时获取各种战场数据,并通过智…

python数据分析基础—取某列字符的前几个字符

文章目录 前言取某列前几个字符方法一:[x[:7] for x in data["calling_nbr"]]方法二:data[calling_nbr].str[:7] 前言 在进行数据分析时,有时候我们需要提取单列的前几个字符串进行分析。本文主要讲述针对这种情况处理方法。 取某…

工业互联网龙头企业研祥智能加入 openKylin

导读近日,研祥智能科技股份有限公司(以下简称 “研祥智能”)签署 openKylin 社区 CLA(Contributor License Agreement 贡献者许可协议),正式加入 openKylin 开源社区。 研祥智能于 1993 年 12 月 31 日成立…

mysql建表考虑那些,怎么建

在使用MySQL进行数据库建表时,需要考虑以下几点: 1 数据库设计 在建表前,需要进行数据库设计,包括确定数据库的名称、表的数量、表之间的关系等,这是建表的前提。 2 表的命名规范 建表时需要注意表名的命名规范&am…

基于SpringBoot的Web开发案例过程讲解-项目准备

基于SpringBoot的Web开发案例过程笔记-项目准备 1)环境搭建【1】准备数据库表【2】创建Springboot项目并引入相关依赖【3】配置application.properties文件【4】创建相关的包和类 2) 三层架构工作流程3)开发规范-Restful4)相关的注解5)项目开…

【数据结构与算法】栈

文章目录 前言一:基本概念1.1 介绍1.2 入栈和出栈示意图1.3 栈的应用场景 二:使用数组模拟栈2.1 思路分析2.2 代码实现2.3 测试 三:使用栈模拟中缀表达式计算器3.1 整体思路3.2 验证32*6-2133.2.1 定义栈3.2.2 返回运算符的优先级3.2.3 判断是…

如何通过Instagram群发消息高效拓展客户?

之前小S有跟大家说过关于独立站+Instagram如何高效引流,发现大家都对Instagram的话题挺关注的。Instagram作为全球最受欢迎的社交媒体之一,对于许多商家和营销人员来说,Instagram是一个不可忽视的营销平台,他们可以通过…

痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU硬件那些事(2.3)- 串行NOR Flash下载算法(J-Link工具篇)

https://www.cnblogs.com/henjay724/p/13770137.html 大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家介绍的是J-Link工具下i.MXRT的串行NOR Flash下载算法设计。 在i.MXRT硬件那些事系列之《在串行NOR Flash XIP调试原理》一文中,痞…

通过rabbitmq生成延时消息,并生成rabbitmq镜像

通过rabbitmq生成延时消息队列,并生成rabbitmq镜像 整体描述1. 使用场景2. 目前问题3. 前期准备 具体步骤1. 拉取镜像2. 运行镜像3. 安装插件4. 代码支持4.1 config文件4.2 消费监听4.2 消息生产 5. 功能测试 镜像操作1. 镜像制作2. 镜像导入 总结 整体描述 1. 使用…

MySql学习笔记08——事务介绍

事务 基本概念 事务是一个完整的业务逻辑,是一个最小的工作单元,不可再分。 一个完整的业务逻辑包括一系列的操作,这些操作是整个业务逻辑中的最小单元,这些操作要么同时成功,要么同时失败。 由于只有DML语句中才会…

C++那些事之Step by step上手grpc

C那些事之grpc小Demo github上比较火的rpc有grpc、brpc,腾讯内部比较牛逼的trpc等等,这些rpc支持不同的语言、不同平台。今天来聊聊如何使用grpc,从一个简单的demo入手,整个项目使用CMake构建,一个非常标准的rpc项目管…