成都 网站建设黄骅贴吧招聘2022年
基于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， 打开网址如图所示
