Vue使用的前期准备--环境搭建及项目创建

环境准备

• Node.js的安装和配置

  从Node官网下载Node最新版，开发平台为windows ；
  Node的安装比较简单，一路Next就可以完成Node.js的安装(安装的时候将add to path勾上就可以了)；这里我的Node.js安装目录为：E:\nodeJS；至此Node.js已经安装完成，测试一下看看是否安装成功；
  在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口，输入：

  node -v  //显示Node的版本则表示安装成功
  

  npm -v  //显示npm版本说明Node自带的npm也安装成功
  

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

  接下来就是Node的环境配置；

  说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间；不希望占C盘空间就需要进行配置。
  这里将全模块所在路径和缓存路径放在node.js安装的文件夹中，则在安装的文件夹【E:\nodeJS】下创建两个文件夹【node_global】及【node_cache】如下图：
  
  创建完两个空文件夹之后，打开cmd命令窗口，输入：

  npm config set prefix "D:\Develop\nodejs\node_global"
  

  npm config set cache "D:\Develop\nodejs\node_cache"
  

  关闭cmd窗口，进行设置环境变量：我的电脑-右键-属性-高级系统设置-高级-环境变量
  进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【E:\nodeJS\node_global\node_modules】，如下图：
  
  然后将【用户变量】下的【Path】【C:\Users\用户名\AppData\Roaming\npm】修改为【E:\nodeJS\node_global】，如下图：
  
  

• 配置npm或者cnpm

  我们在开发的时候，经常会引用第三方的内容，那是不是我们需要知道每一个第三方包的具体位置，然后去下载打开？
  为了解决这个问题，npm 官网 便产生了，他是一个Node.js下的包管理工具，通过这个工具你就可以下载任意一个第三方内容，而不必关系他在哪了，更奇妙的是，如果模块A和模块B有依赖关系，通过npm可以把所有依赖的包都下载下来并管理起来；
  但是因为受到服务器影响（被墙），所以无敌的淘宝制作了cnpm,cnpm官网，cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
  不过为了后续方便引入其他模块，我还是决定使用cnpm；他的安装只需要执行如下命令：

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

  安装完成之后，执行cnpm -v查看是否安装成功~

• 安装配置 vue-cli

  vue-cli是Vue脚手架，可以帮助我们快速构建Vue项目；
  执行下面命令进行安装vue-cli：

  npm install --global vue-cli
  

  安装完成之后，输入vue，如果提示如下则表明安装成功：
  

• 安装配置Vscode

  前面几个步骤我们完成了开发搭建项目的环境配置，这里我们选用Vscode作为项目的IDE。
  从Vscode官网下载Vscode；下载完成之后，一路Next完成安装；
  设置中文

  • 打开Vscode，按快捷键 Ctrl+Shift+P，在Vscode顶部会出现一个搜索框；
  • 输入 configure language ，然后回车；
  • 选择 zh-cn 就可以了。

  Vscode常用插件推荐

  • HTML 代码提示插件： HTML Snippets
  • git历史记录查看： Git History
  • js代码提示：JavaScript (ES6) code snippets
  • 语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持： Vetur

创建一个Vue的项目

vue init webpack  my-project 

安装完成之后然后执行：

cd 你项目的文件夹
npm run dev

可以了，下面去放心实现你的项目吧~