草庐IT

Vue开发环境安装

Siobhan. 明鑫 2024-07-18 原文

目录

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 是一套用来动态构建用户界面的渐进式 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版本

 下载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

有关Vue开发环境安装的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 完全离线安装RVM - 2

    我打算为ruby​​脚本创建一个安装程序,但我希望能够确保机器安装了RVM。有没有一种方法可以完全离线安装RVM并且不引人注目(通过不引人注目,就像创建一个可以做所有事情的脚本而不是要求用户向他们的bash_profile或bashrc添加一些东西)我不是要脚本本身,只是一个关于如何走这条路的快速指针(如果可能的话)。我们还研究了这个很有帮助的问题:RVM-isthereawayforsimpleofflineinstall?但有点误导,因为答案只向我们展示了如何离线在RVM中安装ruby。我们需要能够离线安装RVM本身,并查看脚本https://raw.github.com/wayn

  3. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  4. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常,我可以创建项目。但是在我输入“railsnew”时重新启动后,我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  5. ruby - 如何为 emacs 安装 ruby​​-mode - 2

    我刚刚为fedora安装了emacs。我想用emacs编写ruby。为ruby​​提供代码提示、代码完成类型功能所需的工具、扩展是什么? 最佳答案 ruby-mode已经包含在Emacs23之后的版本中。不过,它也可以通过ELPA获得。您可能感兴趣的其他一些事情是集成RVM、feature-mode(Cucumber)、rspec-mode、ruby-electric、inf-ruby、rinari(用于Rails)等。这是我当前用于Ruby开发的Emacs配置:https://github.com/citizen428/emacs

  6. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer,但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  7. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  8. ruby - 如何在 Lion 上安装 Xcode 4.6,需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby,并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  9. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  10. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

随机推荐