Vue.js项目环境搭建

一、 Node.js 的下载安装

• Node.js的下载路径：https://nodejs.org/en/download/ ，建议下载msi的安装包。
• 安装Node.js 是为了安装npm，npm是Node.js内置的。
• 1、双击安装
  
• 2、在安装过程中，注意默认设置系统环境变量，之后一路next。
  
  
• 3、安装成功后，在安装路径下检查是否生成了相关文件。
  
  node_modules包下是Node.js程序运行所需要的一些资源文件。
• 4、查看系统环境变量是否添加成功。
  cmd中使用 node -v、npm -v 命令查看是否配置环境变量成功。
  
• 5、安装成功后需要格外注意两个Node.js文件。在c盘用户目录下存在两个Node.js全局文件夹。

没见到npm-cache是因为没有用过，一旦使用缓存目录就生成了。我们试图把这2个目录移动回到D:\nodejs，让缓存内容不在c盘中保存。

先如下图建立2个目录。

然后运行以下2条命令，注意路径的改变。

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

执行上述命令之后，再输入命令npm list -global命令，发现全局配置文件已经发生了改变。

node_global：用于存放以后通过npm下载的资源包。
node_cache：用于存放npm下载资源时的缓存内容。

• 6、修改npm远程镜像仓库，npm远程下载资源时，默认是从国外官方镜像资源库进行下载的，国内访问速度较慢，我们可以将默认镜像仓库修改为阿里的镜像库。
  输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
  
  输入命令npm config list 显示所有配置信息，我们关注一个配置文件
  C:\Users\Administrator.npmrc
  
  
• 7、检查镜像是否修改成功，npm能否提供资源下载管理。
  
• 8、由于将npm默认全局路径node_global进行了修改，因此，我们为了更加方便的使用后续下载的资源，我们需要在提供一个环境变量。
• 在path环境变量中添加一个新的环境变量，值为node_global路径。
  

二、vue资源的下载安装

通过npm下载vue相关资源到npm本地仓库中去。

命令：npm install vue -g
这里的-g是指安装到global全局目录去


上述命令执行成功后，会在global路径下出现node_modules，其中便有vue资源模块。而在node_global中会存在Vue的相关可执行文件。

三、使用npm下载vue-router模块，该模块用于处理Vue单页面路由问题，我们后续会学习。

npm install vue-router -g

四、使用npm下载vue-cli模块，该模块是一个Vue构建工具。

运行npm install vue-cli -g安装vue脚手架

注意：vue-cli工具是内置了模板集成工具webpack 和 webpack-simple,前者用于管理比较复杂专业的项目，后者比较适用中小型项目。因此，我们不需要单独安装webpack。

五、使用vue-cli工具快速构建一个Vue脚手架项目。

1、在某个练习项目文件下，打开命令行。这里选择了一个空目录。


2、使用vue-cli初始化一个Vue项目。
命令：vue init webpack-simple vue01，该Vue项目名称为vue01。

当然，使用vue init webpack vue01命令同样能够初始化脚手架工程，但它构建速度和检验要更加复杂。

3、进入vue01项目，通过npm下载该基础工程所依赖的资源文件。

• 这个过程可能会有几分钟的时间。
• 在执行npm命令的过程中，可能由于外网资源问题，可能会安装下载较慢，命令持续等待的问题。我们可以使用ctrl+c中断命令执行，再次执行npm install。
• 执行npm install过程中，如果出现警告，额可以不用过多关注，这是版本的警告。

4、执行npm run dev命令，将会启动刚刚构建的项目。

5、访问http://localhost:8080/将会访问该Vue项目的首页。

当我们使用ctrl + c时，将会终止程序执行，停止服务。

六、安装cnpm阿里资源管理器，在上述过程中，我们使用npm时，发现执行过程十分缓慢，这是因为npm install命令会从国外服务器上下载很多配置资源。

命令：npm install cnpm -g

安装cnpm成功之后，我们就可以使用cnpm指令来代替npm指令，vue脚手架项目的构建过程将变成如下过程：

• 1、vue init webpack-simple 项目名称
• 2、cd 项目
• 3、cnpm install
• 4、cnpm run dev

七、vue-devtools安装，查看下述教程安装。

https://segmentfault.com/a/1190000009682735

八、使用webstorm构建Vue项目。

• 我们可以通过npm的相关命令构建Vue脚手架项目，同时也可以通过WebStorm提供的相关功能进行脚手架项目的构建，使构建更加方便。

• 1、新建web项目。
  

• 2、选择Vue项目，配置基本信息（只需要第一次配置，之后会自动保存信息）。
  
  项目名称vue不建议使用驼峰式命令，使用全小写即可。
  
  3、选择next，进行项目基础信息配置。
  
  
  
  
  
  
  基础项目构建成功。相当于执行了vue init webpack vuetest01命令。
  
  4、导入vue脚手架项目基本功能模块。

  • 选择package.json文件，右键执行Run ‘npm install’命令。相当于执行npm install命令。
    
  • 执行过程依旧会很慢，但会出现进度条。
    
  • 构建成功。
    

  5、启动Vue项目。相当于执行 npm run dev命令。
  
  
  启动成功。
  
  

九、Vue基础项目文件介绍。