Vue环境安装

检查node.js是否已安装

控制台输入node –v 出现版本信息表示已安装，出现‘不是内部或外部命令，也不是可运行的程序’表示未安装。

node.js安装

官网下载LTS版本，官方地址https://nodejs.org/en/
双击运行node-v12.18.4-x64.msi，直接下一步下一步完成安装（不用改任何东西）。
重新打开控制命令台，输入node –v,出现版本信息表示安装成功，再输入npm –v命令，出现版本信息表示node版本自带的npm也安装成功。输入 npm -g install npm ，可将 npm 更新至最新版本

环境配置

环境配置的目的是为了改变安装NodeJS依赖的下载位置，方便日后管理，以及配置缓存Cache的路径,且c盘很多目录不具备操作权限。NodeJS在执行安装语句时，会将安装的模块默认安装到C:\Users\用户名\AppData\Roaming\npm，从而占用C盘的空间。（也可以不用管这环境配置部分）

创建npm模块安装目录

以在E盘下npm_download目录举例（以个人实际情况为准）：
在创建目录：E:\npm_download，然后在该目录下分别创建node_cache和node_global两个文件夹。
创建文件夹后，打开dos命令窗口，分别执行下面两行命令

npm config set prefix "E:\npm_download\node_global"
npm config set cache "E:\npm_download\node_cache"

检查C:\Users\用户名.npmrc文件，打开看是否操作成功：

配置环境变量

我的电脑->右键->属性->高级系统设置->高级->环境变量→新建NODE_PATH系统变量,

更改用户path变量

将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为E:\npm_download\node_global，若没有C:\Users\用户名\AppData\Roaming\npm这个环境变量则直接添加E:\npm_download\node_global

依次退出，环境配置完成。

安装cnpm

安装时，默认是使用国外的镜像，速度较慢。推荐使用国内镜像！为了提高我们的效率，可以使用淘宝的镜像，在控制台输入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

如上图所示，cnpm安装路径为E:\npm_download\node_global\node_modules。

安装成功后，输入cnpm –v，出现具体信息表示安装成功，以后再用到npm的地方直接用cnpm来代替。

安装脚手架

控制台输入命令：

npm install -g vue-cli

或

cnpm install -g vue-cli

使用脚手架完成项目搭建

创建项目目录

本地磁盘随便创建一个文件夹当作项目目录，这里我在D:/vue为例。

脚手架初始化项目

启用控制命令台，进入项目目录，使用脚手架初始化项目：

vue init webpack vue-demo

webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数;
vue-demo是项目名，不要使用大写字母

在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改。

Project name ==> 项目名字，回车即可；
Project description ==> 项目描述，不想写回车即可；
Authot ==> 作者；
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要es-lint语法检测，为了代码质量y 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
Should we run `npm install` for you after the project has been created? ==> 创建时是否需要执行npm install,选择use npm(或者自己使用cnpm、yarn尽进行依赖安装);

接下来等待项目构建完成。

启动项目

进入D:/vue目录，可以发现，已有vue-demo项目，进入该目录，npm run dev，启动项目。若出错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容不完整（可直接删除），需要在该文件夹执行 npm install/cnpm install ，再执行 npm run dev
浏览器访问端口8081,出现下图，项目搭建成功。