vue前后端分离初体验（-）

数据库老师说bookstrap太老，太丑了。建议我们用心的框架，后端SSM的增删改查已经做完了，偶然看到一个github项目介绍了vue.js看起来界面还挺好看的。然后就想用vue.js实现前后端的分离。

一、vue.js是什么

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

官方介绍，然而我还是不太懂它和别的前端框架有什么区别，所以就还是一边做，一边了解吧。

二、node.js和webback

1.node.js

node.js就js的运行环境，听说node.js可以实现全栈，我试着用它搭建了服务器，看起来很简单的，几行代码就搭建出来了，但是对于各种包就完全一无所知，感觉学起来也是挺困难的，封装性比较强啊。用vue.js之前要先安装node.js.下图是node.js的安装。安装完之后npm就已经有了。输入npm就可以看到输出内容。然后我们就可以用npm安装很多依赖，下载各种包。

---

2.webpack

它分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

安装过程：终端下输入

cnpm install vue-cli -g ，运行vue查看安装是否成功。运行vue init webpack vuehui (vuehui是工程名字）

---

执行npm install

注意：这个npm会比较慢，可以用淘宝的镜像，然后安装的使用命令cnpm install.或者也可以使用代理

前端编译器可以使用webStorm，但是感觉挺卡的。安装的时候勾选可以右键项目就可以打开webStorm

然后就可以运行项目npm run dev，出现如下界面：

三、登录界面的尝试

参考博客：https://blog.csdn.net/sxiaofang/article/details/80215575

1.安装需要的包

npm install axios -save  //axios作为和后端的交互

npm install element-ui -save   //界面美化的组件

安装的时候我会报错cannot find file...解决方法就把node_modules文件夹删除了，执行npm install 重新生产node_modules,之后再安装就不会出错了

2.登陆界面代码

main.js import需要的包，ui组件和css样式

import Vuefrom 'vue'

import Appfrom './App'

import routerfrom './router'

import ElementUIfrom 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip =false

/* eslint-disable no-new */

new Vue({

el:'#app',

router,

components: { App },

template:''

})

router下的index.js改变页面入口

import Vuefrom 'vue'

import Routerfrom 'vue-router'

Vue.use(Router)

const Login = resolve => require(['@/components/Login'], resolve)

export default new Router({

routes: [

{

path:'/',

name:'登录',

component:Login }]

})

创建新的组件login.vue。这个代码样式那里就不太能看懂了hh

---

3.运行结果

---

四、下一步任务

下一步就是先写好学籍管理系统的登录界面，然后再跟学生管理系统合并，也就是前后端衔接，貌似挺容易的，可以把vue组件打包成js，然后在html引用就可以了