VUE前段开发-开发环境搭建和开发工具安装

一 VUE介绍

（1）VUE，也就是vue.js,官方的介绍是是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

（2）也就是说vue是一种前端开发框架，官方的介绍对于有经验的开发人员来说，看完就能知道它能干什么，但对于初学开发者来说，可能一片茫然，所以不要管它什么“渐进式”框架之类的，只要知道它是随着前后端分离出现的一种前段框架就行了。至于为什么叫“框架”，理解框架的概念就明白了，就像Java开发一样，有各种各样的框架，所谓框架其实就是大神把基础的东西组合起来，让你可以复用，可以便捷、快速的利用框架提供的组件开发出想要的功能，vue写出来的代码，最终还是会被解释为html元素，vue操作的是虚拟DOM，但解释器最终会把他转换成html中的实际DOM，也就是说vue只是给你提供了一种更加方便的操作html的方法。

---

二 VUE前端开发环境和工具介绍

1.vue.js : 用JavaScript实现的基本，vue的操作全部基于它里面的函数，用js实现的函数。

       下载地址：官网有引入vue.js的教程，https://cn.vuejs.org/v2/guide/installation.html

2.node.js : 一看后缀，就知道是用JavaScript写的脚本，只不过node.js是运行在服务器端的脚本，构建了一个JavaScript运行平台。在vue的编码过程中node.js并不会参与，没有node.js,完全可以写和运行vue编写的代码。node.js只是搭建一个运行环境，在你将你的代码工程化的过程中，为打包工具提供一个运行环境而已。

node.js 下载地址：http://nodejs.cn/download/

 

3.npm : 包管理器工具，可以下载别人写好的包，并安装在你的电脑上，也可以把你的代码打成包并运行。

4.Vue-cli : vue的脚手架工具，就是从远程下载模板，为你初始化一个vue项目基本配置的工具，初始化完了也就没它什么事了。

5.webpack : vue项目的打包工具，把你写的js、css这些零散的代码，以工程的方式进行打包，把一些浏览器不能识别的代码，通过webpack转化成浏览器可以识别的代码，等等。

6.webpack-cli : webpack的脚手架，反正你用不到，你只用webpack就行，由webpack-cli为webpack运行提供支撑，不信你别安装试试看能用webpack吗

7.VSCode ：idea开发工具，微软造的，工具很多，我只是喜欢它而已，你完全可以换成别的idea。

      下载地址：https://code.visualstudio.com/Download 

---

三 VUE前端开发环境和工具安装

1.安装node.js,按地址下载后，直接安装就行，最新的node.js集成了npm，所以不需要再单独安装npm，安装后你可以用node -v 和 npm -v 查看他们的版本

      

 

不过官方的npm下载包特别慢，可以换成淘宝的镜像地址，执行下面的命令更换安装淘宝的cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org，安装成功后，你得用cnpm命令去运行。

2.安装vue-cli，执行以下命令：cnpm install vue-cli -g 进行安装

3.安装webpack 和webpac-cli，执行一条命令就可以同时安装：cnpm install webpack webpack-cli  -g 

---

四 测试环境是否搭建成功

（1）打开VSCode，在终端执行命令vue init webpack firstvue，新建项目 。其中firstvue为项目名，不能使用驼峰命名出现大写字母

（2）创建成功后，按提示进入项目目录，运行命令：npm run dev

(3) 成功后在浏览器访问：http://localhost:8080，环境搭建和开发工具安装完成