手把手教你用VUE开发后台管理系统（一）：搭建VUE环境

1、VUE是什么

      【官方介绍】Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

       具体请参考VUE官网： https://cn.vuejs.org/v2/guide/#     如今官网还有视频教学

2、为何要学习VUE

        以往，开发企业管理程序都是用的MVC架构，前端V通常只管展现，强依赖后端的控制端，开发人员开发一个需求要么是从前端一直开发到后端，又或者是前端、后端分开开发，但先后端是紧耦合的，先后端开发人员常常得互相等待，应用程序也不能分开布署，没有弹性，因此为了解决这些问题，渐渐发展成了先后端分离的方式，先后端定义好接口后就互不依赖，能够先分开开发，调试，很是方便，也很容易分开布署，提高弹性。固然VUE也能够在之前的开发方式中直接嵌入使用，但通常不推荐。

        我计划写一系列博文来带你们开发一个基于VUE+SpringBoot+SpringSecurity+Mybatis+Mysql的先后端分离的管理系统，本系列博文就是前台部份。

3、搭建VUE环境

       一、安装Node

            vue的运行是要依赖于node的npm的管理工具来实现，因此第一步须要安装Node，进入到http://nodejs.cn/download/官网，根据自已的windows操做系统是32位的仍是64位的选择相应的版本，以下图，我习惯于下载zip的，下载后直接解压到一个目录，而后把该目录的路径加到windows的环境变量path中便可，此时在windows中运行cmd，进入到命令行，输入node -v，显示node的版本即表示安装成功，以下图：

 

 

        二、安装VUE-CLI

             VUE-CLI是一相基于Webpack的vue模板项目，咱们的项目基于此模板项目开发，因此建第一个项目前须要先安装VUE-CLI，后面再新建项目就不须要了。

             在Windows命令行执行以下命令：npm install vue-cli -g 便可。

        三、新建项目

              先在windows上新建一个项目文件夹，在windows命令行上进入到此目录，执行以下命令：vue init webpack，而后根据提示输入项目名等，以下图：

 

     四、安装项目依赖

          继续在windows命令行上执行（项目目录下）：npm install    注：如今新的node版本已不须要执行此命令了，若是是用的node老版本则须要执行。

     五、运行项目

          继续在windows命令行上执行（项目目录下）： npm run dev    ，运行成功后以下图一，打开IE输入： http://localhost:8080便可打开项目，见下图二: 

            注：因为我已打开一个vue项目，因此下面图中的图口号自动变为了8081，具体是哪个端口，你们能够看下图中的红框部份

             

 

                                                                                                                    图一

                                                                                                    图二

4、安装开发工具

      理论上建好vue能够用任何文本文件开发工具来开发，但一个好的工具能够事半功倍，这里我推荐用VSCode，在浏览器中输入https://code.visualstudio.com/ ,选择相应的版本下载安装便可。安装后打开vscode，在文件菜单中选择打开文件夹，选择自已的项目文件夹，打开便可看到该项目的全部源代码。