2021-02-01 09:53发布
vue-cli脚手架是基于node平台的, 所以安装之前, 必须先安装nodejs. 之后直接通过npm包管理工具即可完成vue-cli脚手架工具的安装. 目前市面上流行的vue-cli脚手架有两个版本, 接下来分别演示下:
安装vue-cli-2.x版本
// -g 表示全局安装 npm install vue-cli -g
初始化项目:
vue init webpack 项目名称
安装vue-cli-3.x版本
// -g 表示全局安装, 新版vue脚手架的包名叫做@vue/cli npm install @vue/cli -g
vue create 项目名称
使用之前，我们先来明白这几个东西是用来干什么的。
node.js: 一种javascript的运行环境，能够使得javascript脱离浏览器运行。Node.js的出现，使得前后端使用同一种语言，统一模型的梦想得以实现。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
nodejs中文网:http://nodejs.cn/
下载后安装，路径推荐更改在盘根目录。( 这里因为我的另一个磁盘分区装了其他OS，只剩C盘了，如果你有其他盘推荐放到其他盘里 )
默认会自动添加到path环境变量
最后完成安装。
安装完成 查看变量和版本
使用Cmd命令（Windows键+R）
查看环境变量 : echo %PATH%
echo %PATH%
查看Node版本: node -v
node -v
查看npm版本: npm -v
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的本地仓库路径:
命令: npm list -global
npm list -global
更改前:
更改后:
配置淘宝镜像站:
命令: npm config set registry=http://registry.npm.taobao.org
npm config set registry=http://registry.npm.taobao.org
检查镜像站是否配置成功: npm config get registry
npm config get registry
国内镜像站，速度更快，加速安装。
输入命令 npm config list 显示所有配置信息，会生成一个配置文件
npm config list
生成的配置文件路径 C:\Users\Administrator\.npmrc
使用文本编辑器编辑它，可以看到刚才的配置信息（只是让你看到修改，so安装可忽略这一步）
安装npm : npm install npm -g
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 install vue -g
npm install vue -g
这里的 -g 是指安装到global全局目录去
安装 vue-router
命令： npm install vue-router -g
npm install vue-router -g
vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。
安装 vue脚手架
命令： npm install vue-cli -g
npm install vue-cli -g
⊗ 因为vue脚本在自定义的global目录下，不在path环境变量。我们需要去系统变量里添加。
对path环境变量添加 C:\nodejs\node_global
C:\nodejs\node_global
⊕注意: win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】
(修改path后需要重新打开cmd 才会上边更改的变量生效)
测试vue是否可用
命令：vue -V
vue -V
出现版本号即配置正确 注意-V V是大写的
-V
vue-cli工具是内置了模板包括 webpack 和 webpack-simple
这里我选择创建内置webpack项目到 C盘的nodejs文件夹下 （可根据自己路径选择）
webpack
创建一个webpack项目
即首先cd到要安装的路径（可根据自己路径选择）
命令: cd C:\nodejs
cd C:\nodejs
创建webpack项目: vue init webpack vue01
vue init webpack vue01
初始化，安装依赖
进入项目: cd C:\nodejs\vue01
cd C:\nodejs\vue01
安装依赖: npm install
npm install
运行项目: npm run dev
npm run dev
成功界面，提示打开地址http://localhost:8080
打包生成项目（编译成已构建文件）
命令: npm run build
npm run build
最终结果生成在 dist 文件夹
NMP下新建出来的vue01的目录描述：
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
yarn global add @vue/cli
安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：vue --version
如果安装成功的话，会返回安装的版本号
对于新入门的小伙伴来说，选择一个合适的nodejs框架可能是一件很头疼的事情，我最初也为这个头疼过，下面分享一下我的框架选择之路nodejs的框架最近来node的火热，带动了一大批的框架，例如express koa sails loopback thinkjs egg这些是我比较过的框架，下面...
PHP胜出：代码与内容混合大家在输入的过程中当然希望能将自己的思路直接转化为网站的文本内容，同时还要为进程添加分支、一部分if-then语句以保证站点拥有漂亮的视觉效果，具体取决于URL中的某些参数。又或者，我们希望能够利用单一数据库将文本或者数据加以...
这个问题涉及到的是整个web开发体系的变更。我尽量长话短说，有问题可以继续留言。现在的web开发体系可以说是在15年后才逐渐形成，因为15年比较特殊，html5和ES6都是在这一年发布，css3的最后一次更新在2014年。这些变更带来的变化是产生了前后分离的开发方式...
初次接触nodejs确实有一些难度，因为思路语法都和js有了一些差别，属于后端思想，所以需要楼主多下功夫，进行系统学习之后就容易接受了
//首先卸载已安装的node-sasscnpm uninstall node-sass//重新安装cnpm install node-sass//如果报关于gyp的错，安装相关的gyp编译环境npm install -g node-gyp//再重复执行以上的卸载安装步骤//安装完成启动项目试试npm run dev...
node.js 和 javascript 从本质上来说没有什么区别，语言是一样的，都是javascript语言编写。但是，node.js 主要从事后台操作，javascript主要操作HTML的元素(前端)。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。(事件驱动：事件触发过程中，进行决策的一种策略，简单说就是跟随当前时间点上出现的事物，调用可用的资源进行解决该事物...
global 最根本的作用是作为全局变量的宿bai主。按照ECMAScript 的定义，满足以下条 件的变量是全局变量：在最外层定义的变量；全局对象的属性；隐式定义的变量（未定义直接赋值的变量）。当你定义一个全局变量时，这个变量同时也会成为全局对象的属性，反之亦...
webpack构建工具是基于node平台的, 所以在安装之前必须先安装nodejs. 接在来就可以通过npm包管理工具在线安装webpack了. 对于webpack构建工具, 即可全局安装, 也可以局部安装. 一般情况下,大多数会采用局部安装, 因为每一个项目需要对webpack...
1.打开node官网 https://nodejs.org/en/，选择 other Downloads,2.安装Windows Binary 64位或者32位3.将你减压后的路径保存一份，如（D:\soft\node-v10.16.3-win-x64）4.找到系统路径（控制面板-》系统-》高级系统设置-》环境变量-》path），获取到 5.找到...
一、安装环境1、本机系统：Windows 10 Pro（64位）2、Node.js：v6.9.2LTS（64位）二、安装Node.js步骤1、下载对应你系统的Node.js版本2、选安装目录进行安装3、环境配置4、测试
Node.js是一个基于Chrome v8引擎建立的JavaScript运行平台，用于搭建响应速度快、易于扩展的网络应用。本文和大家分享的是Node.js的一些特点，希望对大家有帮助。 异步I/O 这里，我们来详细解释一下： 异步是什么意思 比如说你的爸，今天要叫你做...
dejs适用于I/O密集的应用，而不太适用于计算密集的应用我用 Node.js 开发了 Am I Hacked，算是有一点用 Node.js 支持大流量的经验。先列一些数字服务器是 Linode 512，也就是 Linode 上最低端的。...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《【Web前端基础】node如何安装vuecli》','http://www.shouhuola.com/q-33468.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
vue-cli脚手架是基于node平台的, 所以安装之前, 必须先安装nodejs. 之后直接通过npm包管理工具即可完成vue-cli脚手架工具的安装. 目前市面上流行的vue-cli脚手架有两个版本, 接下来分别演示下:
安装vue-cli-2.x版本
初始化项目:
安装vue-cli-3.x版本
初始化项目:
使用之前，我们先来明白这几个东西是用来干什么的。
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的本地仓库路径:
命令:
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全局目录去
安装 vue-router
命令：
npm install vue-router -gvue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。
安装 vue脚手架
命令：
npm install vue-cli -g⊗ 因为vue脚本在自定义的global目录下，不在path环境变量。我们需要去系统变量里添加。
对path环境变量添加
C:\nodejs\node_global⊕注意: win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】
(修改path后需要重新打开cmd 才会上边更改的变量生效)
测试vue是否可用
命令：
vue -V出现版本号即配置正确 注意
-VV是大写的第七步、vue配置完成后，配置第一个项目
vue-cli工具是内置了模板包括 webpack 和 webpack-simple
这里我选择创建内置
webpack项目到 C盘的nodejs文件夹下 （可根据自己路径选择）创建一个webpack项目
即首先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 文件夹
NMP下新建出来的vue01的目录描述：
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
yarn global add @vue/cli
安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：vue --version
如果安装成功的话，会返回安装的版本号
相关问题推荐
对于新入门的小伙伴来说，选择一个合适的nodejs框架可能是一件很头疼的事情，我最初也为这个头疼过，下面分享一下我的框架选择之路nodejs的框架最近来node的火热，带动了一大批的框架，例如express koa sails loopback thinkjs egg这些是我比较过的框架，下面...
PHP胜出：代码与内容混合大家在输入的过程中当然希望能将自己的思路直接转化为网站的文本内容，同时还要为进程添加分支、一部分if-then语句以保证站点拥有漂亮的视觉效果，具体取决于URL中的某些参数。又或者，我们希望能够利用单一数据库将文本或者数据加以...
这个问题涉及到的是整个web开发体系的变更。我尽量长话短说，有问题可以继续留言。现在的web开发体系可以说是在15年后才逐渐形成，因为15年比较特殊，html5和ES6都是在这一年发布，css3的最后一次更新在2014年。这些变更带来的变化是产生了前后分离的开发方式...
初次接触nodejs确实有一些难度，因为思路语法都和js有了一些差别，属于后端思想，所以需要楼主多下功夫，进行系统学习之后就容易接受了
//首先卸载已安装的node-sasscnpm uninstall node-sass//重新安装cnpm install node-sass//如果报关于gyp的错，安装相关的gyp编译环境npm install -g node-gyp//再重复执行以上的卸载安装步骤//安装完成启动项目试试npm run dev...
node.js 和 javascript 从本质上来说没有什么区别，语言是一样的，都是javascript语言编写。但是，node.js 主要从事后台操作，javascript主要操作HTML的元素(前端)。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。(事件驱动：事件触发过程中，进行决策的一种策略，简单说就是跟随当前时间点上出现的事物，调用可用的资源进行解决该事物...
global 最根本的作用是作为全局变量的宿bai主。按照ECMAScript 的定义，满足以下条 件的变量是全局变量：在最外层定义的变量；全局对象的属性；隐式定义的变量（未定义直接赋值的变量）。当你定义一个全局变量时，这个变量同时也会成为全局对象的属性，反之亦...
webpack构建工具是基于node平台的, 所以在安装之前必须先安装nodejs. 接在来就可以通过npm包管理工具在线安装webpack了. 对于webpack构建工具, 即可全局安装, 也可以局部安装. 一般情况下,大多数会采用局部安装, 因为每一个项目需要对webpack...
1.打开node官网 https://nodejs.org/en/，选择 other Downloads,2.安装Windows Binary 64位或者32位3.将你减压后的路径保存一份，如（D:\soft\node-v10.16.3-win-x64）4.找到系统路径（控制面板-》系统-》高级系统设置-》环境变量-》path），获取到 5.找到...
一、安装环境1、本机系统：Windows 10 Pro（64位）2、Node.js：v6.9.2LTS（64位）二、安装Node.js步骤1、下载对应你系统的Node.js版本2、选安装目录进行安装3、环境配置4、测试
Node.js是一个基于Chrome v8引擎建立的JavaScript运行平台，用于搭建响应速度快、易于扩展的网络应用。本文和大家分享的是Node.js的一些特点，希望对大家有帮助。 异步I/O 这里，我们来详细解释一下： 异步是什么意思 比如说你的爸，今天要叫你做...
dejs适用于I/O密集的应用，而不太适用于计算密集的应用我用 Node.js 开发了 Am I Hacked，算是有一点用 Node.js 支持大流量的经验。先列一些数字服务器是 Linode 512，也就是 Linode 上最低端的。...