本篇文章介绍了如何用Vue创建或者打开一个已有的项目。
其中目录中的1-3是必须完成的步骤。在此基础上，如果需要创建新的项目，需要完成步骤4；如果需要打开现有的项目，需要完成步骤5。

1. 安装node.js

1.1 从官网下载node

node官网下载地址

选择合适的版本（无特殊要求，我选择的是左边的稳定版），一路“下一步”即可完成安装（可以选择安装路径，但要注意记录下安装的路径，后续配置环境变量时需要，此处我的默认路径是“C:\Program Files\nodejs”）。

2022年2月更：如果还想要14.17.5版的，去下面这个链接
https://nodejs.org/download/release/v14.17.5/
选择后缀为msi的安装程序下载

1.2 配置环境变量

1. 用户变量
   在用户变量窗口点击“新建”，然后在弹窗中输入下列信息，点击“确定”即可。
   变量名：NODE_PATH
   变量值：C:\Program Files\nodejs\node_modules\
   

2. 系统变量
   在系统变量中找到Path并点击, 然后在弹窗中点击“新建”， 并分别键入
   C:\Program Files\nodejs\
C:\Program Files\nodejs\node_global\
   最后点击“确定”即可
   

1.3 检查是否安装成功以及版本信息

1. 在命令行键入node -v
   
2. 在命令行键入npm -v
   
   出现上述两个版本信息说明node环境已经安装完成，npm包管理器也有了。

2. 安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。

2.1 下载cnmp

安装cnmp 我们是需要在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org 即可。

2.2 检查cnmp 是否安装成功

在命令行中输入cnpm -v

完成之后，我们就可以用cnpm代替npm来安装依赖包了。

3. 安装vue-cli脚手架构建工具

3.1 下载vue-cil

在命令行中运行命令 cnpm install -g vue-cli，然后等待安装完成(在此处也可以使用npm命令，但是速度会比较慢)。

3.2 检查vue是否安装成功

在命令行中键入vue list

4. 创建新的vue项目

4.1 用vue-cli构建项目

通过以上三个步骤，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

1. 命令行中把目录转到选定的目录(目录无特殊要求)。
2. 在命令行中运行命令 vue init webpack firstVue（这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中）
3. 运行初始化命令的时候会让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
   （ 说明：
   Vue build ==> 打包方式，回车即可；
   Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
   Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
   Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
   Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；）

4.2 安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install，等待安装。
安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

4.3 运行项目

在项目目录中，运行命令 npm run dev
运行成功后会出现以下弹窗

然后在浏览器中打开http://localhost:8080, 就会出现如下网页

5. 运行开源项目

比如说现在我们从GitHub上download一个vue.js的开源项目，下面记录如何在浏览器运行该项目的方法。

5.1 安装webpack

cmd 命令行中见键入npm install webpack -g即可完成安装

5.2 运行项目

1. 在命令行中cd当项目所在的路径下。
   
2. 安装依赖, 键入npm install
   
   安装完成后，项目中会多出“node_modules”文件夹
   
3. 安装node-sass ,键入npm i -D sass-loader@8.x
4. 安装style-loader, 键入npm install style-loader --save-dev
5. 安装sass-loader , 键入npm install node-sass@4.14.1
   注意：这里要安装4.14.1 版本，因为要和之前安装的Node Sass version 6.0.1 匹配
6. 运行项目，键入npm run dev
7. 出现下图说明运行成功，浏览器会自动打开网页。（如果不能打开，可以手动输入Local 或者NetWork中提供的网址）
   

6. 踩坑记录

直接用命令npm install node-sass@4.14.1安装sass-loader的时候出现如下报错，一开始以为是没装上，装了很多次还是报这个错。后来发现是这里的sass-loader的版本要和要和之前安装的Node Sass的匹配匹配，然后按照指定sass-load版本的命令安装。

github上下载sass-loader的各个版本
github上下载node-sass的各个版本
官网上的版本对应信息

查看自己的node版本 node -v

卸载当前的版本npm uninstall node-sass
安装新版本node-sassnpm install node-sass@4.14.1 (结合上表选择自己需要安装的版本)