1、产品经理设计产品原型图
2、UI设计师设计符合需求的原型UI图
3、前端100%还原高保真UI设计图
4、后端设计接口
5、前后端接口联调
6、前后端功能自测
7、测试、运维进行产品的测试和上线
1、需求侧提出需求
2、SE进行需求分析并输出需求文档
3、开需求分析会(甲方、SE、开发、测试)
4、相关开发人员投入开发,开发完毕后进行自测且输出自测报告
5、合并代码到dev分支后进行申请转测
6、运维部署项目,测试人员开始测试并记录相关问题(开发跟进问题)
7、需求实现后合并代码到生产分支发布上线
局部安装vue-cli 4.5.15 和项目创建:
npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli # 安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create project-one # 创建项目
# OR
npx v
// vue.config.js
module.exports = {
devServer: {
open: true
// host: 'localhost'
}
}
2.1 全局使用
npm i element-ui -S
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
demo
2.2 按需使用
npm i element-ui -S
npm i babel-plugin-component -D
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
// main.js
import { Button, Tag } from 'element-ui'
Vue.use(Button)
Vue.use(Tag)
// element.js
import Vue from 'vue'
import { Button, Tag } from 'element-ui'
Vue.use(Button)
Vue.use(Tag)
// main.js
import '../plugins/element.js'
demo
标签一
cnpm i sass-loader@7 node-sass@4 -S
cnpm i less@3 less-loader@7 -S
@import url('./assets/css/reset.css');
cnpm i font-awesome -D
// main.js
import 'font-awesome/css/font-awesome.min.css'
cnpm i -S axios
// main.js
import axios from 'axios'
Vue.prototype.axios = axios // 挂载到原型,可在全局使用
cnpm i vue-router -S
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
}
],
mode: 'history'
})
// main.js
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
如果需要降低版本,这里提供三种解决方案:
直接命名 npm uninstall vue-router 卸载原有的Vue-router;
添加 --legacy-peer-deps 指令在下载对应版本的指令后,保证各个依赖之间的不同版本的共存;
上述两种方式如果都无法生效,那么删除掉该项目的node_modules,修改package.json文件中的版本号,重新安装即可;
简单的进行首页、登录页、404页面的搭建
登录页功能(LoginOne、LoginTwo均为测试页面, Login为正式页面)
// service.js
import axios from 'axios'
const service = axios.create({
// baseURL会自动加在接口地址上
baseURL: "/api",
timeout: 3000 // 指定请求的超时毫秒数,如果请求超过这个时间,那么请求就会中断。
})
// 添加请求拦截器
service.interceptors.request.use((config) => {
// 在发送请求前做些什么
// 获取并设置token
// console.log(getToken('token'))
// config.headers['token'] = getToken('token')
return config
},(error) => {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
service.interceptors.response.use((response) => {
// 对响应数据做些什么
console.log(response)
let { status, message } = response.data
if (status !== 200) {
Message({message: message || 'error', type: 'warning'})
}
return response
}, (error) => {
// 对响应错误做点什么
return Promise.reject(error)
})
export default service
// main.js
import service from './service'
Vue.prototype.service = service // 挂载到原型,可在全局使用
// vue.config.js
module.exports = {
devServer: {
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': ''
}
}
}
}
}
重启项目,即可进行登录页的登录功能的数据交互,登录成功需要存储用户名和token
这里我们去新建一个setToken.js去封装一下设置token和获取token以及删除token的方法
然后在axios的二次封装的请求头里携带上token,至此,我们的axios二次封装和跨域完美解决。
此时我们就可以去写主页面的内容了,菜单组件和主要内容区域。新建common组件文件夹,新建对应的Header、Footer、Menu这些文件,然后完成Menu菜单,并且新建学生列表、作业列表、信息列表、考勤管理页面,并且配置路由,之后去写面包屑组件。这样我们项目的大致模型就有了。