Vue开发之环境搭建

一、Vue开发所需要的环境

1. nodejs:javaScript运行环境
2. npm:nodejs下的包管理器（是国外的，在国内使用会很慢），可以使用国内的淘宝npm镜像。
3. webpack: 把无法直接在浏览器中使用的语言（如es6,sass）编译成浏览器支持的形式，资源的合并、压缩混淆。
4. vue-cli：直接构建vue项目。

二、环境搭建步骤

1. nodejs安装
   直接在nodejs官网下载安装，安装完之后打开cmd输入node -v可以查看node版本，显示node版本说明已经安装成功。
   
2. npm版本
   安装nodejs成功之后输入npm -v就可以查看npm版本。
   
3. 安装cnpm
   输入指令npm install -g cnpm –registry=http://registry.npm.taobao.org，然后回车进行安装。安装完之后输入cnpm -v查看版本信息。
   
4. 安装vue-cli
   输入指令npm install -g vue-cli进行全局安装vue-cli。
   
5. 使用vue-cli构建一个vue项目
      在终端输入进入项目的存放地址，然后输入输入指令vue init webpack firstvuedemo（firstvuedemo是项目名称,最好小写字母，首字母小写后面有大写字母会报错）初始化项目，然后一直回车，但是如果提示Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)，则选择No, I will handle that myself，因为这里是使用npm install,在国内npm会很慢，所以推荐选择自己处理，构建完成之后再用cnpm install来安装。显示下面的提示则表示成功。
   
   目录结构：
   
6. 安装项目依赖
   进入项目路径，输入指令cnpm install安装依赖。安装完成之后项目目录结构会多出一个node_modules文件夹，这里存放的是项目需要的依赖包资源。
   
   
7. 运行项目
   输入指令npm run dev就可以运行整个项目了。在浏览器输入返回的地址就可以查看了。
   
   
8. vue开发代码编辑器
   本人使用vscode进行开发，vscode安装以及所需要插件请看下一篇文章。