Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的。
- node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行。
Node.js的出现,使得前后端使用同一种语言,统一模型的梦想得以实现。 - npm: Nodejs下的包管理器。
- webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
- vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
第一步,安装nodejs
nodejs中文网:http://nodejs.cn/
下载后安装,路径推荐更改在盘根目录。
( 这里因为我的另一个磁盘分区装了其他OS,只剩C盘了,如果你有其他盘推荐放到其他盘里 )
默认会自动添加到path环境变量
最后完成安装。
使用Cmd命令(Windows键+R)
- 查看环境变量 :
echo %PATH%
- 查看Node版本:
node -v
- 查看npm版本:
npm -v
第二步,更改默认模块和缓存目录
刚安装后,nmp本地仓库文件夹生成在用户目录,并不是说NodeJS和NPM安装好了到这里就能直接使用了,这也是新手经常犯的一个错误之一。因为默认情况下,NPM安装的模块并不会安装到NodeJS的程序目录。而是安装到系统用户组路径下的文件夹,如果不修改npm的模块安装目录,那么它默认情况下都会安装到这里,随着你测试开发各种不同的项目,安装的模块越来越多,那么这个文件夹的体积会越来越大,直到占满你的C盘。这就是为什么要修改npm的配置的原因。。
因为博主电脑就一个盘了,只能安装到C盘,给大家演示下安装C盘自定义路径。(其他盘方法同)
我打算把这两个路径换到安装nodejs的目录,C:\nodejs
在C:\nodejs新建两个文件夹
- node_global
- node_cache
- § 这两个文件夹是全局模块目录和缓存目录
然后运行以下2条命令(后边的是路径,根据自己实际情况修改)
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"
命令: npm list -global
更改前:
更改后:
第三步、接下来配置镜像站
配置淘宝镜像站:
命令: npm config set registry=http://registry.npm.taobao.org
检查镜像站是否配置成功: npm config get registry
- 国内镜像站,速度更快,加速安装。
第四步、查看配置文件 (安装可忽略)
输入命令 npm config list
显示所有配置信息,会生成一个配置文件
生成的配置文件路径 C:\Users\Administrator\.npmrc
使用文本编辑器编辑它,可以看到刚才的配置信息(只是让你看到修改,so安装可忽略这一步)
第五步、安装npm
安装npm : npm install npm -g
默认的模块C:\nodejs\node_modules 目录
将会改变为C:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
增加环境变量NODE_PATH 内容是:C:\nodejs\node_global\node_modules
(然后,需要重新打开CMD让上面的环境变量生效)
第六步、npm安装vue.js
命令:npm install vue -g
- 这里的 -g 是指安装到global全局目录去
命令: npm install vue-router -g
- vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库,能够以声明式的方法编写页面的导航和跳转信息。
命令: npm install vue-cli -g
⊗ 因为vue脚本在自定义的global目录下,不在path环境变量。我们需要去系统变量里添加。
- 对path环境变量添加
C:\nodejs\node_global
- ⊕注意: win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】
(修改path后需要重新打开cmd 才会上边更改的变量生效)
命令:vue -V
- 出现版本号即配置正确 注意
-V
V是大写的
第七步、vue配置完成后,配置第一个项目
vue-cli工具是内置了模板包括 webpack 和 webpack-simple
这里我选择创建内置webpack
项目到 C盘的nodejs文件夹下 (可根据自己路径选择)
即首先cd到要安装的路径(可根据自己路径选择)
命令: cd C:\nodejs
创建webpack项目: vue init webpack vue01
- 进入项目:
cd C:\nodejs\vue01
- 安装依赖:
npm install
- 运行项目:
npm run dev
成功界面,提示打开地址http://localhost:8080
命令: npm run build
最终结果生成在 dist 文件夹
Node.js npm基础安装配置&创建第一个VUE项目的更多相关文章
- <亲测>CentOS 7.3下Node.js 8.6安装配置(含NPM以及PM2)
CentOS 7.3下Node.js 8.6安装配置 2017年09月30日 14:12:02 阅读数:2245更多 个人分类: Nodejs 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
- 一步步创建第一个Vue项目
写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...
- Node.js入门:Node.js&NPM的安装与配置
Node.js安装与配置 Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0. ...
- Node.js&NPM的安装与配置(转)
Node.js安装与配置 Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本 情况了,对此,我们将在0.6.x的 ...
- Windows下Node.js+Express+WebSocket 安装配置
Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...
- VsCode创建第一个vue项目
使用vue-cli快速构建项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v ...
- 使用VSCode创建第一个VUE项目
vue init webpack vue_test回车,然后输入工程名称vue_test vue:Missing space before value for key 'components' 原因是 ...
- WebStorm+Node.js开发环境的配置
1 下载地址: webstorm:http://www.jetbrains.com/webstorm node.js:https://nodejs.org/download/ 2 安装node.js ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
随机推荐
- BFS和DFS详解以及java实现(转载)
作者:Leo-Yang 原文都先发布在作者个人博客:http://www.leoyang.net/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
- Windows上面搭建FlutterAndroid运行环境
1.下载安装JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置J ...
- Jmeter_选项_函数助手对话框_CSVRead
1.之前有写过Jmeter_请求原件之参数化CSV 2.这次是使用函数助手 CSVRead去进行处理 3.作用注册10个账户 4.线程组设置,10个线程进行,因为是注册10个账户,如果线程设置为1,循 ...
- oracle sys可以登录,system权限不足,解决方法
今天在自己电脑上安装了oracle 11g,安装成功后发现 sys 可以正常登录.system 无法登录,显示 ORA-01031: insufficient privileges(权限不足) sel ...
- redis-py相关
一 redis客户端命令 cmd进入redis客户端管理程序路径xx:\windows redis\redis-2.4.0-win32-win64\64bit 执行:redis-cli.exe -h ...
- C语言:输入一个数,输出比这个数小的所有素数,并求出个数。
//C语言:输入一个数,输出比这个数小的所有素数,并求出个数. #include<conio.h> #include<stdio.h> #include<stdlib.h ...
- __call__ ,,__str__魔法函数
class Test(object): def __init__(self): self.name = "汪 汪" self.girl = "liu cc" # ...
- 微服务、分库分表、分布式事务管理、APM链路跟踪性能分析演示项目
好多年没发博,最近有时间整理些东西,分享给大家. 所有内容都在github项目liuzhibin-cn/my-demo中,基于SpringBoot,演示Dubbo微服务 + Mycat, Shardi ...
- Python - input时的strip()
例如在读文件里面的文本时,每一行默认后面有\n或者有\r,所以strip用于去除首尾空格或者回车符.
- C:clock() 计算代码执行时间
clock():捕捉从程序开始运行到clock()被调用时所耗费的事件. 这个时间的单位是 clock tick,即时钟打点 常数 CLK_TCK:机器时钟每秒走的时钟打点数 要使用这个函数需要包含头 ...