位置: IT常识 - 正文

Vue开发环境安装(vue开发环境配置)

编辑:rootadmin
Vue开发环境安装

目录

Vue概述:

Vue特点:

Vue官网:

一、node.js安装和配置 

1. 下载安装node.js

Step1:下载安装包

Step2:安装程序

Step3:查看

问题解决:

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

1.问题原因

2.解决尝试一

3.解决尝试二

Step4:环境配置

Step5:Node.js测试

推荐整理分享Vue开发环境安装(vue开发环境配置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue安装使用,vue开发环境安装步奏,vue开发环境配置,怎么安装vue环境,vue开发环境安装步奏,vue开发环境搭建步骤,vue开发环境安装步奏,vue开发环境配置,内容如对您有帮助,希望把文章链接给更多的朋友!

vue前端框架的环境搭建

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架

构建用户界面:把数据通过某种办法变成用户界面渐进式:Vue 可以自底向上逐层的应用,简单应用只需要一个轻量小巧的核心库,复杂应用可以引入各式各样的 Vue 插件Vue概述:

Vue是什么:Vue.js是一套由美籍华人(尤雨溪)开发的相应式系统,前端开发库。 2014年2月尤雨溪开源了前端开发库Vue.js。 2016年9月3日,尤雨溪以技术顾问的身份加盟阿里巴巴Weex团队。 他全职投入Vue.js的开发,立志将Vue打造成Angular/React平级的世界顶级框架Vue的核心库只关注视图层,非常容易和其他库整合

Vue非常适合开发复杂单页应用

Vue可实现数据和视图的双向绑定

Vue特点:

①轻量级框架,vue提供MVVM双向数据绑定,依赖模板表达式和计算属性,使用简单快捷vue可以将一个web开发Vue通过指令将数据和页面进行交互 ③中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发 ④与传统Web页面通过链接切换页面(重新刷新页面)不同,Vue通过客户端路由实现页面的平滑切换 Vue的界面属于响应式,在各种设备上都具有好的显示效果

Vue官网:

Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

一、node.js安装和配置 1. 下载安装node.js

检查电脑上是否配备 node。 【命令行输入 node -v】【出现版本信息则说明已经安装好了】

我这里尚未安装node.js  接下来可以一同一步步操作。 

官网下载最新版本:Download | Node.js 可以下载安装包(安装教程见:Node.js 安装配置 | 菜鸟教程) 或者下载zip文件找个目录保存,解压下载的文件,然后配置环境变量,将解压文件所在的路径配置到环境变量中。

Step1:下载安装包

这里我选择windows64位操作系统,如上图。

Step2:安装程序

①下载完成后,双击安装包,开始安装,使用默认配置安装一直点next即可,安装路径默认在C:Program Files下,也可以自定义修改

下载完成后进行安装(傻瓜式操作,下一步--下一步即可)

②安装路径默认在C:Program Files下面,也能够自定义修改,而后点击next(我这里设置我的安装目录为D:\software\nodejs\根据自己的需要进行更改。)

 

 ③下图根据本身的需要进行,我选择了默认Node.js runtime,而后Next

Node.js runtime :表示运行环境 npm package manager:表示npm包管理器 online documentation shortcuts :在线文档快捷方式 Add to PATH:添加到环境变量

  ④以下图框中所示,我没有选中,而是直接next

⑤点击Install,进行安装

⑥点击finish,完成安装

⑦安装完成后,.msi格式的安装包已经将node启动程序添加到系统环境变量path中,咱们能够查看系统变量进行验证:在【个人电脑】右键→【属性】→【高级系统设置】

⑧点击【高级】→【环境变量】

⑨在系统变量中查看【path】,点击【编辑】

⑩会发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中

由于Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,在cmd中测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息

Step3:查看

① 既然已经将node程序添加到全局系统变量中,把咱们能够直接在CMD窗口中任意位置执行node,打开CMD窗口,执行命令node -v查看node版本

【注意:此时是打开CMD窗口,并非在C:Program Files odejs目录下执行node.exe】

② 最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

Vue开发环境安装(vue开发环境配置)

 下载cnpm: 使用cnpm(淘宝镜像):使用npm下载依赖时,由于是从国外的网站上下载内容,所以可能经常会出现不稳定的情况,所以需要下载cnpm代替npm cnpm是国内淘宝的做的,在国内使用稳定,安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 或  npm install  -g cnpm --registry=https://registry.npmmirror.com

问题解决:解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

在安装完 node 环境后,npm -v 显示如下问题 npm WARN config global --global, --local are deprecated. Use --location=global instead.

8.11.0

1.问题原因

问题出现在,以前版本npm的命令一般时XXX -g 但是随着版本更替,这个老方法被弃用了

2.解决尝试一

在node的安装路径下 我们需要修改两个文件npm和npm.cmd

将npm文件的第23行,修改成下图样式,命令如下,可以直接粘贴

prefix --location=global

将npm.cmd文件的第12行,修改成下图样式,命令如下,可以直接粘贴,修改完保存。

prefix --location=global

在这里我遇到了权限不够的问题,如下解决:

3.解决尝试二

电脑文件权限不够, 我们需要修改两个文件npm和npm.cmd 鼠标右击属性,安全将权限打开。

此时修改完成。

如若大家还有问题可以做接下来的尝试(我第二个解决就搞定了,因此第三个解决尝试没有试过)

解决尝试三: 使用npm时,报错:npm WARN config global --global, --local are deprecated. Use --location=global instead.

将npm升级到最新版本即可 升级方法 1.在windows中以管理员身份打开cmd,然后执行命令 npm install -g npm-windows-upgrade 2.更改脚本策略 下载Windows Power Shell 然后以管理员身份运行,执行命令 set-ExecutionPolicy RemoteSigned

输入Y 成功更改脚本策略 3.在Windows Power Shell上运行命令 npm-windows-upgrade

问题解决!

最终结果如下:

Step4:环境配置

① 打开安装的目录(默认安装情况下在C:Program Files nodejs)在这里我的为:D:\software\nodejs

② 在安装目录下新建两个文件夹【node_global】和【node_cache】

③ 再次打开cmd命令窗口,输入npm config set prefix “你的路径node_cache”(“你的路径”默认安装的状况下为D:\software\nodejs ) ④ npm config set cache “你的路径 node_cache” 可直接复制刚刚新建的空文件夹目录  执行的时候建议使用管理员权限打开CMD,否则有可能会提示权限不够报错

⑤设置环境变量,打开【系统属性】-【高级】-【环境变量】,在系统变量中新建

变量名:NODE_PATH

变量值:D:\software\nodejs\node_global\node_modules

( 用来告诉系统, 下载的模块或者包都在这里了)

Step5:Node.js测试

配置完成后,安装个module测试下,咱们就安装最经常使用的express模块,打开cmd窗口,输入以下命令进行模块的全局安装:

 npm install express -g

本文链接地址:https://www.jiuchutong.com/zhishi/300577.html 转载请保留说明!

上一篇:网易二面:CPU狂飙900%,该怎么处理?(网易游戏二面)

下一篇:yolov5加入CBAM,SE,CA,ECA注意力机制,纯代码(22.3.1还更新)(yolov5加入注意力机制后网络后进行剪枝)

  • 支付宝怎么乘公交刷码(支付宝怎么乘公交车付费)

    支付宝怎么乘公交刷码(支付宝怎么乘公交车付费)

  • vivox50和x50pro的区别有哪些(vivox50与x50pro的区别)

    vivox50和x50pro的区别有哪些(vivox50与x50pro的区别)

  • 钉钉不能回放直播的原因有哪些(钉钉直播回放不了)

    钉钉不能回放直播的原因有哪些(钉钉直播回放不了)

  • 华为p40pro可以支持PC模式吗(华为p40pro可以刷卡吗)

    华为p40pro可以支持PC模式吗(华为p40pro可以刷卡吗)

  • 手机屏幕出现条纹怎么自修(手机屏幕出现条纹是不是内屏坏了)

    手机屏幕出现条纹怎么自修(手机屏幕出现条纹是不是内屏坏了)

  • 苹果手机短信回声效果为什么对方看不了(苹果手机短信回执)

    苹果手机短信回声效果为什么对方看不了(苹果手机短信回执)

  • 美版kindle有什么坏处(美版的kindle与国行版的区别)

    美版kindle有什么坏处(美版的kindle与国行版的区别)

  • 苹果11怎么把旧手机的东西导入新手机(苹果11怎么把旧手机的照片导入新手机)

    苹果11怎么把旧手机的东西导入新手机(苹果11怎么把旧手机的照片导入新手机)

  • 华为手机怎么关闭手机屏保(华为手机怎么关闭广告)

    华为手机怎么关闭手机屏保(华为手机怎么关闭广告)

  • windows+r什么意思(windows re是什么)

    windows+r什么意思(windows re是什么)

  • 一加8耳机孔在哪(一加8耳机孔在哪个位置)

    一加8耳机孔在哪(一加8耳机孔在哪个位置)

  • 固态硬盘1t是什么意思(固态硬盘1t和1tb的区别)

    固态硬盘1t是什么意思(固态硬盘1t和1tb的区别)

  • 双屏笔记本有哪些(双屏笔记本有哪几款电脑)

    双屏笔记本有哪些(双屏笔记本有哪几款电脑)

  • 蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

    蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

  • 苹果日版和美版区别(苹果日版和美版质检一样吗)

    苹果日版和美版区别(苹果日版和美版质检一样吗)

  • 荣耀jmmal10是什么型号(荣耀myaal10是什么型号)

    荣耀jmmal10是什么型号(荣耀myaal10是什么型号)

  • etc显示蓝牙已开是什么意思(ETC显示蓝牙已开是怎么回事)

    etc显示蓝牙已开是什么意思(ETC显示蓝牙已开是怎么回事)

  • word脚注怎么弄(word脚注怎么弄成阿拉伯数字1)

    word脚注怎么弄(word脚注怎么弄成阿拉伯数字1)

  • 魅族x8能插u盘么(魅族x8能插u盘么嘛)

    魅族x8能插u盘么(魅族x8能插u盘么嘛)

  • word2019邮件合并(word2019邮件合并为什么用不了)

    word2019邮件合并(word2019邮件合并为什么用不了)

  • iphone11长曝光在哪里(苹果11相机长曝光)

    iphone11长曝光在哪里(苹果11相机长曝光)

  • 为什么我的华为p30pro充电慢(为什么我的华为mate40pro升级不了鸿蒙3.0)

    为什么我的华为p30pro充电慢(为什么我的华为mate40pro升级不了鸿蒙3.0)

  • potal00a什么型号(poral00a什么型号)

    potal00a什么型号(poral00a什么型号)

  • 佳能6d2延时摄影怎么设置(佳能6d2延时摄影教程)

    佳能6d2延时摄影怎么设置(佳能6d2延时摄影教程)

  • 闲鱼的钱怎么提现(闲鱼的钱怎么提现到支付宝)

    闲鱼的钱怎么提现(闲鱼的钱怎么提现到支付宝)

  • 小红书客服怎么联系(小红书客服怎么做)

    小红书客服怎么联系(小红书客服怎么做)

  • .env 文件(env文件夹是什么文件)

    .env 文件(env文件夹是什么文件)

  • 苹果发布macOS Big Sur 11.0.1 RC 2版本(苹果发布macOS更新)

    苹果发布macOS Big Sur 11.0.1 RC 2版本(苹果发布macOS更新)

  • 织梦dedecms动态跳转修改为静态url地址(织梦如何添加浮动广告)

    织梦dedecms动态跳转修改为静态url地址(织梦如何添加浮动广告)

  • 自然人收缴税务客户端
  • 二手车经纪公司和中介的区别
  • 项目固定资产投资包括
  • 事业单位固定资产入账标准最新规定
  • 工资代扣的工会经费怎么做账
  • 其他应付款长期挂账违反什么规定
  • 小企业销售商品因批量原因给予客户的商业折扣
  • 工业企业用电是收入的几倍
  • 事业单位购入三年期国债的会计分录怎么做?
  • 收到去年所得税汇算清缴退税账务处理
  • 船期延迟出口开票开在了上个月会计处理是怎样的?
  • 事业单位存货包括哪些
  • 公司购买6个月的保险
  • 公司不收员工的个人所得税怎么处理?
  • 取得增值税专用发票是否可以抵扣
  • 水利行政事业性收费收入会计分录
  • 房地产预收账款结转到主营业务收入
  • 建筑业开票内容
  • 发票过期未认证可以用吗
  • 公司注销了工程款还能转账吗
  • 生产要素和资源的区别和联系
  • 境外企业在境外提供劳务
  • 销方开具红字发票流程
  • 政府投资农业项目
  • 合伙企业 投资
  • 苹果电脑屏幕键盘怎么去除
  • 一般纳税人辅导期最新规定
  • nullable object must have a value
  • 溢缴退费是什么意思
  • 加班费的计算基数包括补贴吗
  • 员工的通讯费怎么报销
  • 房地产开发成本明细
  • 应收账款的定义和特点
  • php的框架有哪些
  • php文件包含目录文件吗
  • 库存现金盘亏处理流程
  • 文化事业建设费减免政策
  • uni-app编译
  • Vue Router4 ,prams 传参失效和报错问题
  • phpcms文档
  • 公司购买银行理财会计分录
  • 凭证过账后发现了错误,如何处理
  • 小规模工程服务开票几个点
  • 预付卡做账吗
  • sqlserver编程
  • sql语句批量添加数据
  • 公司账户钱取出来税务局会查账吗
  • 财务费用报销流程图word
  • 营改增抵减的销项税额是什么意思
  • 管理费用现金流量附表指定
  • 快递代收货是货到了吗
  • 员工休产假不发工资违法吗
  • 投资性房地产递延所得税其他综合收益
  • 公司无偿更换产品违法吗
  • 小企业固定资产折旧方法包括
  • 董事会会议的召集程序
  • 计提利息为什么贷方是应付利息
  • 查找共享打印机所在的电脑
  • windows10的设置在哪里
  • 苹果mac怎么清理缓存
  • win7系统关机很慢什么原因
  • win8系统安装步骤
  • mac迁移助理是什么意思啊
  • linux中ctrl+c
  • 更新win8
  • unity项目中的资源
  • SlidingMenu属性详解【Android】
  • 如何在eclipse
  • 批处理脚本怎么写
  • js excel解析
  • 用vue做项目加入购物车是怎么做到的
  • linux基本代码
  • python发邮件代码
  • 平安科技在哪
  • 土地增值税申报流程图
  • 海关税怎么交 怎么算
  • 安徽增值税普通发票税率1%
  • pppoe账号密码改了连不上网
  • 企业分立需要开发票吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设