首页 > Windows开发 > 详细

Windows系统下安装vue

时间:2019-09-20 11:21:38      阅读:81      评论:0      收藏:0      [点我收藏+]

三个概念

  • npm:Nodejs下的包管理器。
  • webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
  • vue-cli:用户生成Vue工程模板。

一。下载安装node

Node.js官网 https://nodejs.org/en/ 。


本次安装目录为D:\nodejs。安装后目录如下:

技术分享图片
 

1. 检查安装是否正常

进入cmd输入指令 echo %PATH%如果已经存在nodejs的安装路径,则安装正常。还可以查看node的版本(node -v)和npm的版本(npm -v)

 

技术分享图片

 

2. 创建npm本地仓库

在nodejs目录下新建两个目录:node_cache 和 node_global

 

技术分享图片

 

然后运行以下2条命令
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”


再运行 npm list -global 查看目录,可以看到目录已经改变了,目前为空。

注意:安装后可能提示node或npm或vue不是内部或外部命令,也不是可运行的程序或批处理文件,关掉cmd命令行重新打开即可

3. 配置镜像站

输入命令 npm config set registry=http://registry.npm.taobao.org,配置一个镜像站,提升速度。
输入命令 npm config list 显示所有配置信息:

 

技术分享图片
 

检查一下镜像站行不行:npm config get registry
看看能否获得vue的信息:npm info vue

 

技术分享图片

 

4.下载模块

输入指令 npm install npm -g 升级npm模块。
再次查看global里面有什么模块:npm list -global,发现已经不为空了。

 

技术分享图片

 

二。安装vue

npm安装vue.js:npm install vue -g
npm安装vue-router:npm install vue-router -g
安装vue脚手架:npm install vue-cli -g

1. 查看vue

输入vue指令会提示 vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件,原因是vue脚本不在path环境变量中,在自定义的global目录下。
所以打开环境变量编辑系统变量path,添加一个 D:\nodejs\node_global

 

技术分享图片

 

重新查看 vue 和 vue -V

 

技术分享图片

 

2. 使用vue-cli搭建项目

进入到D盘,切换到想要存放项目的根目录,使用 vue init webpack vue01指令搭建项目:(vue01为自定义的项目名)

 

技术分享图片

 

出现黄色的两条指令说明搭建成功了:

技术分享图片
 
 

按照指令提示,进入项目目录 cd vue01,安装npm npm install

 

技术分享图片

 

成功后使用指令 npm run dev 来运行vue项目:

 

技术分享图片

 

出现 http://localhost:8080 说明运行成功。进入这个网址就可看到自己的项目了。

 

技术分享图片

Windows系统下安装vue

原文:https://www.cnblogs.com/cnlisiyiii-stu/p/11555694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!