Vue-element-admin的使用，初级摸索使用中，npm\node\vue

一、预备知识

• npm：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护
• node.js:
• ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑
• vue.js:是一套构建用户界面的渐进式框架，学习网站：https://www.runoob.com/vue2/vue-tutorial.html
• vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
• vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离，学习文档：https://www.cntofu.com/book/132/index.html
• Element ：饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库，学习文档：https://cloud.tencent.com/developer/section/1489863
• scss:增加了一些新的功能，增强了对css3的支持，其语法完全兼容CSS3，并且继承了sass的强大功      学习网站：https://www.sass.hk/docs/
• vuex：Vue提供的状态管理工具，用于同一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象

• vue-resource:前端与后端交互的一个组件，解决ajax不能跨域的问题：https://blog.csdn.net/jek123456/article/details/81455554

• webpack：一款强大的文件打包工具，可以将我们的前端项目文件同一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载
• 官网学习网站：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

这个前端框架涉及的知识比较多，本人只会一点皮毛的javascrap独立学习起来比较的困难

二、开始搭建

默认以上的预备知识你都会，或许只看过一遍，本人是只先看了一遍，然后开干，不会的时候在去看不会的地方的。

• 直接去官网下载：https://github.com/PanJiaChen

官网上有两个版本：可以以Vue-element-admin为样例，用vue-admin-template为开发模板

• 运行

使用文档：https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md

之前没有接触过前端的东西，一直以为他是和java一样呐！然而vue的开发是有框架的只需要运行这个框架，然后进行填补就可以了，当你在下载的文件的目录下执行npm run dev 时，就会自动在浏览器上显示你的webUI界面，然后你只要修改代码，再保存web端就会自动刷新，不用再运行其他的main方法之类的（其实他内部是有main的，但是不需要我们去运行）。推荐使用vscode作为开发工具，本人使用的是IDEA(主要是习惯了)。

三、框架介绍

1、webUI界面

2、网址路由

3、前后端交互

 

初学者有不足之处还请多多指教，个人邮箱：3238413273@qq.com