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

系列文章

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.mzph.cn/news/77429.shtml

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

相关文章

骨传导耳机对人体有危险吗?会损害听力吗?

如果在使用骨传导耳机的时候控制好时间和音量,是不会对人体带来危险和造成伤害的。 下面跟大家解释一下为什么骨传导耳机对人体没有危害,最大的原因就是骨传导耳机不需要空气传导,而是通过颅骨传到听觉中枢,传输过程中几乎没有噪…

使用java连接Libvirtd

基于springboot web 一、依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId>&l…

图书管理信息系统分析与设计

一、系统开发的可行性分析 &#xff08;一&#xff09;系统背景.必要性及意义 随着社会经济的迅速发展和科学技术的全面进步&#xff0c;计算机事业的飞速发展&#xff0c;以计算机与通信技术为基础的信息系统正处于蓬勃发展的时期。随着经济文化水平的显著提高&#xff0c;人…

认识网线上的各种参数标号

最近工作需要&#xff0c;接触了很多不同类型的网线&#xff0c;为了能够区分不同型号的网线&#xff0c;特意做一篇笔记用来学习&#xff0c;如有记录有误之处&#xff0c;欢迎大家指正~初步认识网线 常用的网络电缆有三种&#xff1a;双绞线、同轴电缆和光纤电缆&#xff08…

thinkphp6 入门(4)--数据库操作 增删改查

一、设计数据库表 比如我新建了一个数据库表&#xff0c;名为test 二、配置数据库连接信息 本地测试 直接在.env中修改&#xff0c;不用去config/database.php中修改 正式环境 三、增删改查 引入Db库 use think\facade\Db; 假设新增的控制器路径为 app\test\control…

B+Tree 索引结构

文章目录 1. 数据库索引2. BTree 索引结构 1. 数据库索引 索引是为了提高数据的查询速度&#xff0c;相当于给数据进行编号&#xff0c;在查找数据的时候就可以通过编号快速找到对应的数据。索引用的是 B Tree 数据结构。 乱序插入数据&#xff0c;会自动按照 id 进行升序排…

ipad触控笔是哪几款?开学季便宜的ipad电容笔推荐

在新学期的时候&#xff0c;什么样的电容笔才是最好的选择&#xff1f;苹果原装的电容笔&#xff0c;非常的好用&#xff0c;功能也非常的全面&#xff0c;唯一的缺点&#xff0c;就是价格昂贵&#xff0c;不是普通的学生能够负担得起的&#xff0c;而且电容笔非常的重&#xf…

leetcode 15. 三数之和

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 15. 三…

WebServer 解析HTTP 响应报文

一、基础API部分&#xff0c;介绍stat、mmap、iovec、writev、va_list 1.1 stat​ 作用&#xff1a;获取文件信息 #include <sys/types.h> #include <sys/stat.h> #include <unistd.h>// 获取文件属性&#xff0c;存储在statbuf中 int stat(const char *…

kubernetes进阶 (三) 基础练习

前两天朋友给了我几道题&#xff0c;看着挺简单的&#xff0c;但实际做的时候发现坑不少&#xff0c;这里做下笔记 一、镜像构建部署lnmp 1、构建镜像 nginx、php、mysql 要求使用centos7作为基础镜像 2、使用deployment部署上面的容器,要求3个服务要放到一个pod中(虽然这样是…

【工作记录】MQTT介绍、安装部署及springboot集成@20230912

背景 近期公司可能会有物联网设备相关项目内容&#xff0c;提前对用到的mqtt协议做预研和初步使用。 最初接触到mqtt协议应该是早些年的即时通讯吧&#xff0c;现在已经是物联网设备最热门的协议了。 作为记录&#xff0c;也希望能帮助到需要的朋友。 MQTT介绍 《MQTT 协议规…

在 CentOS 7 上安装中文字体

在 CentOS 7 上安装中文字体 1. 安装中文字体包&#xff1a;2. 配置字体&#xff1a;3. 更新字体缓存&#xff1a; 在 CentOS 7 上安装中文字体可以按照以下步骤进行&#xff1a; 1. 安装中文字体包&#xff1a; sudo yum install -y fontconfig sudo yum install -y cjkuni-…

Text Workflow for Mac,简单易用的文本转换工具

如果你需要一个能够将文本转换成多种语言和文件格式的工具&#xff0c;那么Text Workflow for Mac将是你的不二之选。 这个软件支持多种语言翻译和多种文件格式转换&#xff0c;让你可以轻松地将文本转换成你需要的形式。而且&#xff0c;它的操作非常简单&#xff0c;只需要几…

恢复硬盘数据很简单!记好这4个方法!

“我的电脑硬盘里超级多重要的数据&#xff0c;在清理时我一不留神把硬盘中部分文件删掉了。有没有实用的方法可以恢复这些硬盘数据呀&#xff1f;” 在使用电脑时&#xff0c;数据丢失是每个计算机用户都可能面临的问题。不过&#xff0c;当我们丢失数据时&#xff0c;不要太过…

房地产小程序 | 小程序赋能,房地产业务数字化升级

随着科技的不断发展&#xff0c;房地产行业正逐渐向数字化转型。在这个过程中&#xff0c;房地产小程序成为了一种重要的工具&#xff0c;可以帮助房地产企业提供更好的购房体验、增加销售额&#xff0c;并实现管理的便捷化。 优点 便捷购房体验&#xff1a;房地产小程序为用户…

jira流转issue条目状态transitions的rest实用脚本,issue状态改变调整

官方文档链接地址&#xff1a; POST Transition issue Performs an issue transition and, if the transition has a screen, updates the fields from the transition screen. sortByCategory To update the fields on the transition screen, specify the fields in the fiel…

git: ‘lfs‘ is not a git command unclear

首先可以尝试 git lfs install 是否可以&#xff0c;不可以后就看这个连接&#xff1a;https://stackoverflow.com/questions/48734119/git-lfs-is-not-a-git-command-unclear。 我的是ubuntu&#xff0c;所以&#xff1a; 保证这个前提&#xff1a; git-lfs requires git ve…

数据结构(C语言)——单链表

整体结构如上&#xff1a;看似简单&#xff0c;但第一次用C语言实现还是感觉有点吃力&#xff0c;尤其是特别容易让链表断裂 下面是代码&#xff1a;&#xff08;有链表的增删改查&#xff09; 注&#xff1a;这里E类型是用define将int进行了宏定义 #include <stdio.h> …

【面试经典150 | 双指针】验证回文串

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;筛选判断方法二&#xff1a;原地判断 知识回顾回文串双指针字符串操作 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分…

Qt应用开发(基础篇)——菜单 QMenu

一、前言 QMenu类继承于QWidget&#xff0c;它提供了一个菜单样式的小部件&#xff0c;用于菜单栏、上下文菜单和一些弹出式菜单。 QMenu菜单的选项是可选的&#xff0c;它可以是一个下拉的菜单&#xff0c;也可以是独立的上下文菜单。下拉菜单通常作用于当用户单击相应的项目或…