【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.hqwc.cn/news/106230.html

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

相关文章

FGO:使用chaIdea获取抽卡数据(mitmproxy抓包)

需求描述 最近逛贴吧看到好多master贴出自己的抽卡概率截图,本非洲杂鱼master也对自己的脸黑程度产生了好奇(曾经15单芭娜娜池子1五星,6单道满池子1五星,梅莉池子330抽1五星,最近的芭娜娜复刻又330抽1五星&#xff09…

八种十倍提升API性能的方式

提起API,作为程序员来说并不陌生,很多程序员的大部分工作都是围绕着它, 然而,有些内容被大家忽略,API的性能会直接影响产品的用户体验,比如,一个视频软件,播放1s后需要加载5s&#x…

Java学习笔记------抽象类和抽象方法

抽象方法 抽象方法:将共性的行为(方法)抽取到父类之后,由于每一个子类执行的内容是不一样的,所以,在父类中不能确定具体的方法体,该方法就可以定义为抽象方法抽象类:如果一个类中存…

uniapp项目实践总结(十三)封装文件操作方法

导语:在日常 APP 开发过程中,经常要进行文件的保存、读取列表以及查看和删除文件等操作,接下来就看一下具体的方法。 目录 原理分析方法实现实战演练案例展示 原理分析 主要是以下 API。 uni.saveFile:保存文件到本地缓存列表…

【LeetCode-中等题】39. 组合总和

文章目录 题目方法一:递归回溯 题目 这题的nums数组里面不存在重复元素,所以也就无需做去重操作 但同一个元素可以被无限次取,说明每次递归中的for循环的开始位置就是自己 nums数组里面存在重复元素,去重版本: 方法一…

Linux学习之基础工具一

1.Linux 软件包管理器 yum 首先我们需要知道的是在Linux下,现存的软件和指令是一定的,而有的时候我们想需要更多的指令或者软件,而这在Linux本身下是没有的,故我们可以利用指令yum指令安装或卸载你想要或者不需要的软件&#xff…

angular中多层嵌套结构的表单如何处理回显问题

最近在处理angular表单时,有一个4层结构的表单。而且很多元素时动态生成,如下: this.validateFormthis.fb.group({storeId: ["test12"],storeNameKey:[],config:this.fb.group({ tableSize:this.fb.group({toggle:[false],groupSiz…

第69步 时间序列建模实战:ARIMA建模(R)

基于WIN10的64位系统演示 一、写在前面 这一期,我们使用R进行SARIMA模型的构建。 同样,这里使用这个数据: 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Re…

【设计模式】二、UML 类图概述

文章目录 常见含义含义依赖关系(Dependence)泛化关系(Generalization)实现关系(Implementation)关联关系(Association)聚合关系(Aggregation)组合关系&#x…

SpringBoot原理-自动配置-原理分析-源码跟踪

自动配置原理 SpringBootApplication 该注解标识在SpringBoot项目的启动类上,是SpringBoot中最为重要的注解,该注解由三个部分组成。 SpringBootConfiguration:该注解与Configuration注解作用一样,用来声明当前类为一个配置类Comp…

redis缓存详解

一、Redisson分布式锁存在问题 1、基于redis实现的分布式锁,如果redis集群出现master宕机,而从节点没有接收到锁对应的key,被选举成新的master就可能存在被其它线程加锁成功则存在加锁问题 2、 基于上面的问题,可以把redis分为多…

便捷查询中通快递,详细物流信息轻松获取

在如今快节奏的生活中,快递已成为人们生活中不可或缺的一部分。然而,快递查询却常常让人头疼,因为需要分别在不同的快递公司官网上进行查询,耗费时间和精力。为了解决这个问题,固乔科技推出了一款便捷的快递查询助手&a…