【Vue脚手架安装教程】

news2025/2/26 10:06:26

文章目录

  • 前言
  • 一、安装Node.js
  • 二、配置淘宝镜像
    • 安装cnpm,将npm设置为淘宝镜像:
  • 二、安装vue/cli
    • 检查是否安装成功: vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)
  • 三、 创建一个vue项目
    • 安装过程中出现的问题(我自己的解决方法)


前言

安装Vue脚手架之前,要先安装node.js配置环境


一、安装Node.js

1.搜索node.js官网下载自己对应版本 https://nodejs.org/
在这里插入图片描述
2.打开文件双击安装,一直点next。安装目录可以更换成自己的目录,最后点击install安装完毕。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.进行node环境配置
1)win键+R 输入cmd,打开命令提示符,检查node版本,输入 node -v 检查npm版本 输入 npm -v
在这里插入图片描述
在这里插入图片描述
2)配置npm的全局模块的存放路径、cache的路径
首先在自己安装node目录下新建 node_cache 和 node_global 两个文件
在这里插入图片描述
接着在命令提示符窗口运行:
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”
在这里插入图片描述

3)环境变量配置
首先:我的电脑==》 右键点击属性===》高级系统设置===》高级===》环境变量
在这里插入图片描述
接着:在 系统变量 新建===》
NODE_PATH
D:\Program Files\nodejs\node_global\node_modules(自己安装目录下)
在这里插入图片描述
然后:系统变量 编辑path===》
D:\Program Files\nodejs
%NODE_PATH%
在这里插入图片描述

在这里插入图片描述
最后:用户变量 编辑path ===》
D:\Program Files\nodejs\node_global
在这里插入图片描述

二、配置淘宝镜像

安装cnpm,将npm设置为淘宝镜像:

建议在管理员权限下安装

安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
设置
npm config set registry https://registry.npm.taobao.org

可以用 cnpm -v检查cnpm是否安装好
在这里插入图片描述

二、安装vue/cli

用cnpm安装速度快点

cnpm install -g @vue/cli

注意:如果安装过程一直不动,可以敲下回车

检查是否安装成功: vue -V 或者 vue --version
在这里插入图片描述

三、 创建一个vue项目

  • 在要创建工程的目录下输入 :vue create 项目名
  • 按照提示进入工程目录:cd 项目名
  • 按照提示运行项目:cnpm run serve
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

安装过程中出现的问题(我自己的解决方法)

Q:vue create 项目名 创建的时候一直卡住不动
A:设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

Q:创建项目时:command failed: npm install --loglevel error --legacy-peer-deps
在这里插入图片描述
A:用管理员权限进cmd,cd 项目文件夹,再进行创建项目可行
右键 开始 图标
在这里插入图片描述
在这里插入图片描述
Q:检查是否安装成功cnpm出现的问题
cnpm : 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 http
s:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
在这里插入图片描述
A:管理员身份进入命令窗口
在这里插入图片描述

set-ExecutionPolicy RemoteSigned

Y

cnpm -v

在这里插入图片描述

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

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

相关文章

Chrome浏览器的跨域设置

做前后端分离的开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,而且chrome浏览器支持可跨域的设置,但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…

webpack的面试题(吐血整理)

以下为整理的webpack面试题,如有不足之处,还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子&#…

最常见的六种跨域解决方案

目录: 前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言:什么是跨域? 跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和…

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件:jquery-confirm,它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery,那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…

IDEA如何运行SpringBoot项目(超详细截图)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、…

vue中组件的props属性(详)

今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看…

css绘制3D炫动ikun

今天做一个3D版的ikun。 先准备图片一张 代码浅析 页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。 <div class"contrainer"><div class"stage"><div class"control">…

vue项目引入svg图标(完整步骤)

1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖。 npm安装&#xff1a;npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹&#xff0c;在icons文件夹下创建svg文件夹存放本地svg图标。 3. vue.config.js 中配置svg图片 vue.c…

vue中使用echarts实现动态数据绑定、获取后端接口数据

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图&#xff0c;在项目中我们肯定是需要获取后端接口&#xff0c;将后端返回的数据显示在图表上&#xff0c;所以这次就记录一下如何实现echarts的动态数据绑定。 简单来讲&#xff0c;就是从接口获取到的数据&a…

Vue生命周期总结(四个阶段,八个钩子函数)

生命周期就是组件或者实例&#xff0c;从创建到被销毁&#xff08;初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载&#xff09;的一系列过程&#xff0c;我们称这是Vue的生命周期 文章目录一、Vue的生命周期阶段二、生命周期钩子函数1. beforeCreate2. created3. be…

ES6+--》熟知JS中的async函数

目录 async函数 await 表达式 async使用形式 async读取文件 async发送AJAX请求 与生成器(Generator)相比 async函数 async函数的返回值为 promise 对象&#xff0c;promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便&#xff0c;简而…

前端开发常用哪些工具软件?

前端开发必备工具&#xff0c;一篇文章一网打尽 文章目录 一、前端提高“生产力”工具 1.WebStorm 2. 远程开发 - VSCode 3. 接口测试 - Postman 4.API在线文档生成和测试 - SwaggerUI 5.抓包工具 - Wireshark 6.通用数据库管理 - DBeaver 7.MD编辑器 - Typora 8.虚拟…

【数字孪生】UE4虚幻引擎与前端Web页面的结合

目录介绍基础准备鼠标穿透设置备注介绍 UE初学者&#xff0c;非专业UE工程师&#xff0c;在项目中需要使用UE4结合前端页面完成三维场景与前端图表的联动效果&#xff0c;自学总结方法&#xff0c;使用的版本为UE4.26。 基础准备 1. 使用Vue、Echarts创建前端页面&#xff0…

异常:TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

异常&#xff1a;TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func 问题解决 今天我在给博客添加樱花飘落的特效的时候 下载并引入了一个JS 之后打包执行的时候 发现樱花不会动了 检查报错发现是文章标题的报错…

事件监听 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)

目录 一、效果展示 二、实现步骤 三、涉及要点 1. Vue 语法 v-show 2. 获取窗口到元素顶端的距离 3. 监听事件 一、效果展示 最近在做项目时有一个网页渲染是这样的&#xff0c;某一个元素在开始不显示&#xff0c;只有当页面滑动到指定的位置时才显示该元素。效果如下&a…

基于物联网的智慧农业监测系统(前端界面有web端和微信小程序端)

摘要 农业是国民经济的基础&#xff0c;在国家经济发展中有着不可替代的重要作用。随着物联网技术的快速发展&#xff0c;智慧农业已成为了现代农业发展的新方向。基于此&#xff0c;本文设计并实现了一套基于物联网的智慧农业监测系统&#xff0c;系统采用ESP32作为主控板&am…

Vue组合式API

目录 一. 为什么要使用Composition API 1.1.一个Options API实例 1.2.Options API存在的问题 1.3.Composition API简介 二.Composition API 2.1.setup()入口 2.2.ref 响应式监听 2.3.reactive与toRefs 2.4.computed的用法 2.5.watch的用法 2.6.setup()参数 2.6.1.p…

前端如何将项目部署到服务器(Nginx)

文章目录一、准备环境二、安装Nginx1、 安装Nginx依赖2、下载Nginx3、解压下载好的Nginx 压缩包4、编译安装Nginx5、启动Nginx服务三、操作步骤1、使用Xshell连接服务器2、上传静态资源文件3、 配置Nginx4、 重启Nginx服务我们在会开发项目的同时&#xff0c;也应该了解一下前端…

基于Java Web的随意购商城系统(开源项目)

提示&#xff1a;此项目仅作为本博主的学习笔记记录&#xff0c;不作为商品售卖&#xff0c;资源往下翻看源码获取 文章目录前言Web端功能设计首页热销商品新到商品商品分类商品详情购物车添加地址提交订单部分代码展示可能会出现的错误如果拿到项目后发现图片不显示源码获取前…

在Vue中使用高德地图

在Vue中使用高德地图一、如何在Vue中引入基础高德地图1、步骤一&#xff1a;注册并登录高德地图开放平台&#xff0c;申请密钥2、步骤二&#xff1a;安装高德地图加载器3、封装一个自定义地图组件&#xff0c;并初始化地图二、根据关键词搜索&#xff0c;并定位到搜索的位置三、…