一、VUE是什么
【官方介绍】Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
二、为什么要学习VUE
以往,开发企业管理程序都是用的MVC架构,前端V一般只管展示,强依赖后端的控制端,开发人员开发一个需求要么是从前端一直开发到后端,又或者是前端、后端分开开发,但前后端是紧耦合的,前后端开发人员经常得互相等待,应用程序也不能分开布署,没有弹性,所以为了解决这些问题,渐渐发展成了前后端分离的方式,前后端定义好接口后就互不依赖,可以先分开开发,调试,非常方便,也很容易分开布署,提升弹性。当然VUE也可以在以前的开发方式中直接嵌入使用,但一般不推荐。
我计划写一系列博文来带大家开发一个基于VUE+SpringBoot+SpringSecurity+Mybatis+Mysql的前后端分离的管理系统,本系列博文就是前台部份。
三、搭建VUE环境
1、安装Node
vue的运行是要依赖于node的npm的管理工具来实现,所以第一步需要安装Node,进入到http://nodejs.cn/download/官网,根据自已的windows操作系统是32位的还是64位的选择相应的版本,如下图,我习惯于下载zip的,下载后直接解压到一个目录,然后把该目录的路径加到windows的环境变量path中即可,此时在windows中运行cmd,进入到命令行,输入node -v,显示node的版本即表示安装成功,如下图:
2、安装VUE-CLI
VUE-CLI是一相基于Webpack的vue模板项目,我们的项目基于此模板项目开发,所以建第一个项目前需要先安装VUE-CLI,后面再新建项目就不需要了。
在Windows命令行执行如下命令:npm install vue-cli -g 即可。
3、新建项目
先在windows上新建一个项目文件夹,在windows命令行上进入到此目录,执行如下命令:vue init webpack,然后根据提示输入项目名等,如下图:
4、安装项目依赖
继续在windows命令行上执行(项目目录下):npm install 注:现在新的node版本已不需要执行此命令了,如果是用的node老版本则需要执行。
5、运行项目
继续在windows命令行上执行(项目目录下): npm run dev ,运行成功后如下图一,打开IE输入: http://localhost:8080即可打开项目,见下图二:
注:由于我已打开一个vue项目,所以下面图中的图口号自动变为了8081,具体是哪一个端口,大家可以看下图中的红框部份
图一
图二
四、安装开发工具
理论上建好vue可以用任何文本文件开发工具来开发,但一个好的工具可以事半功倍,这里我推荐用VSCode,在浏览器中输入https://code.visualstudio.com/ ,选择相应的版本下载安装即可。安装后打开vscode,在文件菜单中选择打开文件夹,选择自已的项目文件夹,打开即可看到该项目的所有源代码。