一、使用之前,我们先来掌握3个东西是用来干什么的。

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

开始:

如图,下载8.9.3 LTS (推荐给绝大部分用户使用)

双击安装

可以使用默认路径,本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD,检查是否正常

再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs

先如下图建立2个目录

然后运行以下2条命令

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息,我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它,可以看到刚才的配置信息

检查一下镜像站行不行命令1

npm config get registry

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

注意,此时,默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录,

如果直接运行npm install等命令会报错的。

我们需要做1件事情:

1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

(注意,一下操作需要重新打开CMD让上面的环境变量生效)

一、测试NPM安装vue.js

命令:npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

命令:npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】

重新打开CMD,并且测试vue是否使用正常

注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化,安装依赖

运行npm install安装依赖

npm run dev

成功界面,提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件,打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述:

NPM安装步骤的更多相关文章

  1. NodeJS、npm安装步骤和配置(windows版本)

    https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 上面这个链接很详细了,怕它没了自己记一遍.我的简洁一点. 1. 打开no ...

  2. an'gularjs 环境搭建之NodeJS、NPM安装配置步骤(windows版本)

    NodeJS.NPM安装配置步骤(windows版本)  :http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ ...

  3. 项目中有私有仓库模块时,使用 npm ci 命令的安装步骤

    项目中有私有仓库模块时,使用 npm ci 命令的安装步骤: 先安装私有仓库模块:npm install <npm包名> --registry=<npm包源> 再运行命令:np ...

  4. 微信小程序项目使用npm安装vant-weapp的正确步骤,简单易懂!!

    微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --pro ...

  5. windows下的node.js和npm的安装步骤详解

    一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...

  6. [转]phoneGap3.0安装步骤(以windows下的android环境为例):

    phoneGap3.0安装步骤(以windows下的android环境为例): 环境: WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova) ...

  7. 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥,好用话不多

      一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率   1.从社区的角度:把针对某一特定 ...

  8. vue(1)——node.js安装使用,利用npm安装vue

    node node简介 node.js也是用js开发的语言,而且是一门服务端语言,更有大神利用node写了一个操作系统出来——NodeOS node能干什么 自带下载工具: 对于我们开发前端项目,no ...

  9. 使用NPM安装Vue项目

    使用NPM安装Vue项目步骤如下: 一.先安装node.js,下载node.js安装包,node.js安装成功之后,左击电脑左下角>运行>输入cmd,如下图所示: 二.点击确定进入,分别在 ...

随机推荐

  1. [Java] Create File with java.io.File class

    Create a file with some content in some specific location. The reference is here. /** * Write fileCo ...

  2. @Value("#{}") 和 @Value("{}")

    1 @Value("#{}")   SpEL表达式 @Value("#{}") 表示SpEl表达式通常用来获取bean的属性,或者调用bean的某个方法.当然还 ...

  3. CentOS系统 cd命令的使用

    直接输入 cd 命令 ,它将切换到你的 home 目录下,不管你当前所在的目录是什么: [ec2-user@ip-*** /]$ cd [ec2-user@ip-*** ~]$ cd /var/www ...

  4. 判断数组对象里面的某个属性全部为true才执行下一步操作

    比如数据[ {name:'张三',isshow:'false'},name:'李四',isshow:'false'}, ] 这里是自己写的验证,没用elemten的 如果有2张票,需要刷2张身份证,则 ...

  5. Cocos Creator scrollview添加事件的两种方法

    scrollview添加事件 方法一这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加, 你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对 ...

  6. robot framework自定义python库

    自定义python库的好处: robot framework填表式,将python的灵活性弄没了,但是不要担心,RF早就想到了解决办法,就是扩充自己的库. 1.在python应用程序包目录下创建一个新 ...

  7. mysql group_concat用法

    MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔 ...

  8. NHibernate初学者指南系列文章导航

    NHibernate初学者指南系列文章导航   前面的话 经过三个多周的时间,终于将这个系列完成了,谢谢大家的关注和支持,有很多不足之处还望大家包涵. 本系列参考的书籍为NHibernate 3 Be ...

  9. C++中位运算

    简介 1 位逻辑运算符: & (位   “与”)  and ----------------- 2个都为1 才是1-----------0^0 = 0 , 0^1 = 0,  1^0 = 0  ...

  10. SpringMVC探究-----常用获取传递参数的方法

       1.@RequestParam @RequestParam 常用来映射请求参数,它有三个属性可以配置: value 值即请求参数的参数名 required 该参数是否必须. 默认为 true d ...