根据Vue.js + Element UI + MongoDB进行开发
P1 安装Vue-CLI
利用Vue.js提供的一个官方命令行工具
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$cd my-project
$ npm install
$ npm run dev
Vue.js 主要目录结构
.
├── build # 一些webpack的文件，配置参数什么的，一般不用动
├── config # vue项目的基本配置文件
├── index.html # 主页
├── node_modules # 项目中安装的依赖模块
├── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息
├── README.md
├── server # 自己创建的后端文件，可以忽视
├── src # 源码文件夹，基本上文件都应该放在这里
├── App.vue # App.vue组件
├── assets # 资源文件夹，里面放一些静态资源
├── components # 这里放的都是各个组件文件
├── main.js # 入口文件
└── router # vue-router 路由配置
├── static # 生成好的文件会放在这个目录下
├── test # 测试文件夹，测试都写在这里
├── .babelrc # babel编译参数，vue开发需要babel编译
├── .gitignore
└── .eslintignore
完成后就可以在/src/components/*.vue模板中写代码，ctrl+s保存后页面会自动刷新，若无效请检查端口是否被占用
P2 安装Element UI
| 1 | npm i element-ui -S |
|---|---|
完成后在main.js中添加如下代码完整引入Element,就能在/src/components/*.vue模板中使用Element UI的组件
| 12345 | // main.js |
|---|---|
import ElementUI from'element-ui' |
|
import'element-ui/lib/theme-default/index.css' |
|
Vue.use(ElementUI) |
思路
- 得益于vue的数据双向绑定，让我们不用操作DOM就能边输入边验证字符串合法性
- 利用axios实现前后端的数据交互
- 利用jsonwebtoken实现登录验证，结合vue-router的beforeEnter导航钩子在跳转前拦截验证access_token的有效性
验证输入的账号和密码是否合法(利用elementui的form表单)