微人事项目

---

1 技术架构

后端
1、Springboot
2、Spring Security
3、Redis
4、POI/邮件发送/消息中间件
5、Mysql
前端
6、Vue
7、网络访问axios
8、页面ElementUI
9、状态管理Vuex

2 Vue简介

1、MVVM框架

3 SPA

single page application 单页面应用，只有一个html。
能够更好地分模块，适用于做后台管理系统。

需要首先安装node.js和npm，安装node.js后自动就装了npm。
node -v 出现版本号即安装成功
npm -v 出现版本号即安装成功

3.1 vue-cli2

3.1.1 安装单页面应用

1、修改镜像源
执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

npm config set registry https://registry.npm.taobao.org

2、安装 Vue的工具

npm install -g vue-cli   # 只需要第一次安装时执行

3、创建项目

• 进入要创建项目的目录
• 使用webpack模板创建一个vue项目

vue init webpack my-project-name  # 使用webpack模板创建一个vue项目

项目名称Project name
项目描述Project description
作者Author
项目的构建方式Vue build standalone：推荐运行加编译
页面路由Install vue-router：实现页面跳转
代码检测工具ESLint：规范代码格式，使每个人写出来的代码都是相同风格的
单元测试tests

• 进入到项目目录中

cd my-projec-namet #进入到项目目录中

• 下载依赖

npm install  # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）

vue01\node_modules 这个文件夹里面有所有的依赖

• 启动项目

npm run dev # 启动项目

3.1.2 工程代码解析

看到的页面：index.html
入口函数：main.js
组件：App.vue
-template元素
-script事件、数据处理
-style样式
router-view：相当于占位符

// index.js
// 路由表：path路径对应component组件
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld  // 对应路径vue01\src\components\HelloWorld.vue
    }
  ]
})

3.2 vue-cli3

安装vue-cli3之前需要卸载vue-cli2

npm uninstall vue-cli -g

开发文档

npm install -g @vue/cli  # 安装vue
vue create my-project-name  # 创建项目，按空格选择
npm run serve  # 运行

views：完整的页面
component：组件

4 微人事前端页面

4.1登录页面

开发文档
1、安装element ui到生产环境

npm i element-ui -S

2、引入 Element
在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4.2axios相关

安装

C:\Users\22370\Desktop\vuehr> npm install axios

统一的错误页面