Vue入门 - 环境搭建&Vue项目创建

一、安装Node环境

1、下载Node.js安装包并安装

官网下载地址：http://nodejs.cn/download/，根据自己电脑选择32位还是64位

进入命令提示符窗口（在键盘按下【win+R】键，输入cmd，然后回车），分别输入以下命令，显示版本号，则安装成功

• node -v：显示安装的nodejs版本

• npm -v：显示安装的npm版本
  
  此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

2、环境变量的配置

• 第一步：配置默认安装目录和缓存日志目录。
  • 说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间
  • 例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Environments\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
  • 命令提示符窗口执行命令

    npm config set prefix "D:\Environments\nodejs\node_global"
    npm config set cache "D:\Environments\nodejs\node_cache"
    

• 第二步：环境变量配置

  • 右键此电脑——>高级系统设置——>环境变量

    • 在【系统变量】中，新建，变量名：NODE_PATH 变量值：node_global文件夹下的node_modules文件夹。如：【D:\Environments\nodejs\node_global\node_modules】

    • 修改【用户变量】中的【Path】变量，将默认的npm路径修改为新建的node_global路径,如：【D:\Develop\nodejs\node_global】

• 第三步：测试

  • 配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口

  • 输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

• 注意：为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

  • 安装：cmd输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

  • 检查是否安装成功：cmd输入cnpm -v

二、搭建vue项目环境

1.全局安装vue-cli

npm install --global vue-cli

2、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

注：此时可能会报错：vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET

• 解决方法：执行三个命令检查环境

  • node -v

  • vue -V （没有显示版本，npm i vue-cli -g）

  • webpack -v （需要重新安装，npm install webpack -g)

三个条件满足时，运行vue init webpack demo（demo为自定义的项目名）

注意：此处有两个可用的初始化项目命令，vue init webpack app 和 Vue create app，这是因为vue-cli不同版本号之间初始化方式的不同，vue create 是 vue-cli3.x 的初始化方式，vue init 是 vue-cli2.x 的初始化方式。

出于一些考虑，公司在技术选型时选的是 Vue2.x + vue-cli2.x + Element-UI 的组合，因此我用的 vue init webpack app 创建项目，此处附上一个较为详细的 vue-cli3.x 初始化项目的传送门，大家感兴趣的话可以去看看。

我第一次创建时三个环境都已安装，但仍然创建失败，虽然不知道为什么，但是查看版本后再创建项目就不报错了

此处参考https://blog.csdn.net/Anything2207294253/article/details/82083271得以解决

（1）Vue build ==> 打包方式，回车即可；
（2）Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
（3）Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
（4）Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
（5）Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

好了，到这里我们的Vue项目就已经搭建好啦，大家可以在终端输入 npm run dev 启动项目看看效果了。

有关Vue项目结构以及项目启动时的文件加载过程分析我放在了下一篇博客中，感兴趣的可以去看看，传送门 在此。