手把手教你用VUE开发后台管理系统(一):搭建VUE环境

一、VUE是什么

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

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

二、为什么要学习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,在文件菜单中选择打开文件夹,选择自已的项目文件夹,打开即可看到该项目的所有源代码。

猜你喜欢

转载自www.cnblogs.com/hugo123/p/11409253.html