基于NodeJs 的Vue安装和创建项目

基于NodeJs 的Vue安装和创建项目

一、Node.js的下载与安装

下载地址： https://nodejs.org/en/download/prebuilt-installer

安装完之后，启动 cmd命令行，验证 Node.js 是否安装成功

二、配置npm的全局模块的存放路径以及缓存的路径

注：我的安装路径为 D:\tools\node

在上面我们已经完成了 Node.js 的安装，即使不进行此步骤的环境变量配置也不影响Node.js的使用。但是，若不进行环境变量配置，那么在使用命令安装 Node.js全局模块 （如：npm install -g vue）时，会默认安装到C盘的路径 (C:\Users\用户名\AppData\Roaming\npm) 中。因此，我们需要配置 全局安装模块 node_global 以及 缓存目录 node_cache 的环境变量。

// 设置全局模块安装路径
npm config set prefix "D:\tools\node\node_global"// 设置全局缓存存放路径
npm config set cache  "D:\tools\node\node_cache"// 查看npm全局安装包保存路径
npm config get prefix// 查看npm装包缓存路径
npm config get cache// 查看全局安装目录
npm list -global// 查看所有npm 配置
npm config list

三、设置电脑环境变量

1、在【系统变量】中新建环境变量 NODE_PATH，变量值为：D:\tools\node\node_global\node_modules，其中 D:\tools\node\node_global 是新创建的全局模块安装路径。
2、在【系统变量】下的【Path】中添加上Node的路径【D:\tools\node】

3、修改【用户变量】中的 【Path】 变量，将 C:\Users\用户名\AppData\Roaming\npm 修改为D:\tools\node\node_global

4、设置完用户变量后，一路点击确定，我们的电脑环境变量就完成了。

四、Windows下使用npm安装任何包都报错, Windows下使用npm显示权限不够

查看Nodejs安装目录，右键发现在重命名以及删除前面有个盾牌标志这就是 node文件夹 权限不够的原因

右键Nodejs安装目录，我的是文件夹名称是nodejs,点击属性, 如图，设置属性即可。

五、安装vue及脚手架

5.1、安装vue.js

在 cmd 窗口中输入以下指令 全局安装Vue模块//	全局安装Vue模块  -g 表示全局安装
npm install vue -g查看安装的vue信息
npm info vue查看安装的vue版本
npm list vue

5.2、安装webpack模板

npm install webpack -g//webpack将命令相关的内容都放到了 webpack-cli，所以还需要安装 webpack-cli
npm install --global webpack-cli//webpack -v查看版本号
webpack -v

5.3、安装脚手架vue-cli 2.x

//全局安装vue-cli脚手架
npm install vue-cli -g//检查其版本是否正确
vue -V
vue --version//安装上Vue路由：vue-router
npm install vue-router -g 

六、使用vue-cli2创建运行vue项目

1.创建代码

在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端）

输入命令：vue init webpack 项目名（初始化一个完整版的项目），执行效果如图

配置详解：

Project name（项目名称）：回车
Project description（项目描述）：回车
Author（作者名）：回车
Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
Should we run npm install for you after the project has been created? (recommended) ==> 安装依赖 npm install

最后结果如下，项目初始化成功

2.运行项目

进入到项目目录下并运行 npm run dev，如图所示

按提示打开地址 http://localhost:8080， 打开网址如图所示