学习vue之windows下安装live-server 超级详细篇

摘要:
最近项目要求用vue2.0所以开始着手学习。现在开始要安装npm了,先介绍下npm是什么:npm其实是Node.js的包管理工具。因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。其实npm已经在Node.js安装的时候顺带装好了到此告一段落。开始安装live-server进入联系vue项目的目录然后执行开始安装诶呦!!好了找到解决办法了:以管理员身份运行cmd就可以,怎么以管理员运行呢成功之后右上角会显示管理员然后在重新安装live-server完成!

最近项目要求用vue2.0所以开始着手学习。

前期准备:

下载Node.js 地址:http://nodejs.cn/download/ 选择自己对应的版本,我下载的是.msi 64位的

然后就双击下一步吧。完成之后,记得配置环境变量(不知道环境变量在哪里的 先拉到最下面)

学习vue之windows下安装live-server 超级详细篇第1张

因为我把Node.js安装到了D盘nodeJs目录下。

呼出cmd,学习vue之windows下安装live-server 超级详细篇第2张命令走起 ,出版本号了 ,OK。

现在开始要安装npm了,先介绍下npm是什么:

npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。(这句话是网上摘抄的)

讲了这么多,npm究竟在哪?其实npm已经在Node.js安装的时候顺带装好了学习vue之windows下安装live-server 超级详细篇第3张

到此告一段落。

开始安装live-server(live-server是基于nodejs的一款插件,如果了解nodejs可以自己实现,更好的改端口啥的)

进入联系vue项目的目录(放哪里你随便)学习vue之windows下安装live-server 超级详细篇第4张

然后执行学习vue之windows下安装live-server 超级详细篇第5张开始安装

诶呦!!出错误了吧学习vue之windows下安装live-server 超级详细篇第6张

赶紧上网找结果………………………………………………好了找到解决办法了:以管理员身份运行cmd就可以,怎么以管理员运行呢学习vue之windows下安装live-server 超级详细篇第7张

成功之后右上角会显示管理员

学习vue之windows下安装live-server 超级详细篇第8张

然后在重新安装live-server

学习vue之windows下安装live-server 超级详细篇第9张

完成!

学习vue之windows下安装live-server 超级详细篇第10张

命令行(项目目录里)输入 live-server 报上面错误的话,在和你node.js安装目录同级目录下面有个node目录

学习vue之windows下安装live-server 超级详细篇第11张

学习vue之windows下安装live-server 超级详细篇第12张

将红色框中的路径配置到环境变量中

学习vue之windows下安装live-server 超级详细篇第13张

OK 再次输入命令live-server

学习vue之windows下安装live-server 超级详细篇第14张

它会直接打开你所在目录下的index.html文件,现在就可以开始你的学习之路吧!!

注: 排版乱的一塌糊涂,请谅解,本人也是小白一名,有错误的话勿喷。有建议的话可以留言。只是自己成功安装,记录下过程。

<!-------------------环境变量在哪里------------------------------------------------------->

右键我的电脑->属性

学习vue之windows下安装live-server 超级详细篇第15张

学习vue之windows下安装live-server 超级详细篇第16张

学习vue之windows下安装live-server 超级详细篇第17张

不同路径之间用分号隔开即可

免责声明:文章转载自《学习vue之windows下安装live-server 超级详细篇》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用TinyPNG提供的API,对图片进行压缩(C#)Activiti任务参数的设置方式和作用域下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

c++ Oracle OCCI 编程

OCCI数据库Oracle编程步骤1.配置环境(1)Occi访问数据库需要occi.h头文件,此文件在oracle安装目录下,必须有oracle库的支持。安装oracle服务端或客户端;(2)配置NLS_LANG环境变量,必须与数据库的字符编码一致,否则可能出现中文乱码;(3)配置环境变量,使客户端支持中文显示;(4)安装C++编程工具和g++编译工具。2...

tomcat环境变量的设置(不在系统中设置环境变量,可以直接运行)

背景:运维人员希望拿到tomcat压缩包后,解压后就能运行,不想操心JDK是否已经按照好了、环境变量是否设置了等烦心事。。。 设置步骤如下: 1. 准备一个压缩版的tomcat,楼主使用的是tomcat8,下载地址为:https://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8/v8.5.50/bi...

vue 日期转换

y: date.getFullYear(), 如果报错 time 要new Data(time) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-...

vue之列表渲染

一、v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染。 1、v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元素迭代的别名(为当前遍历的元素提供别名,可以任意起名)。 <ul id="example"> <li v-for="item in it...

Windows系统上安装多个版本jdk,修改环境变量不生效

本机已经安装了jdk1.6,而比较早期的项目需要依赖jdk1.5,于是同时在本机安装了jdk1.5和jdk1.6.安装jdk1.5前,执行 java -version 得到java version "1.6.0_38"
Java(TM) SE Runtime Environment (build 1.6.0_38-b05)
Java HotSpot(TM)...

vue create与vue init的区别

1.vue ui 图形化界面 2. vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。 使用方式:vue create 项目名称 3. vue init vue init 是vue-cli2.x的初始化方...