网站建设淘宝,哪个网站是免费建站,深圳上市公司,嘉兴营销型网站建设一、产品开发的大致流程
一般公司流程如下#xff1a;
1、产品经理设计产品原型图 2、UI设计师设计符合需求的原型UI图 3、前端100%还原高保真UI设计图 4、后端设计接口 5、前后端接口联调 6、前后端功能自测 7、测试、运维进行产品的测试和上线
一般大型公司流程如下…一、产品开发的大致流程
一般公司流程如下
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}
}在项目中使用ElementUI 官网[https://element.eleme.cn/#/zh-CN] 2.1 全局使用 2.1.1 安装 npm i element-ui -S2.1.2 在main.js中完整引入 // main.jsimport ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);2.1.3 使用参考官方示例,其组件使用特点是都是el-标签名 el-buttondemo/el-button2.2 按需使用 2.2.1 安装 npm i element-ui -Snpm i babel-plugin-component -D2.2.2 在.babel.config.js新增以下内容 plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]2.2.3 在main.js中引入 // main.jsimport { Button, Tag } from element-uiVue.use(Button)Vue.use(Tag)2.2.4 或者在项目目录下新建plugins文件夹,新建element.js文件 // element.jsimport Vue from vueimport { Button, Tag } from element-uiVue.use(Button)Vue.use(Tag)// main.jsimport ../plugins/element.js2.2.5 在组件中使用 el-buttondemo/el-buttonel-tag标签一/el-tag在项目中使用CSS预处理器Scss 官网[https://www.sass.hk/]
3.1 安装
cnpm i sass-loader7 node-sass4 -S3.2 使用
style langscss/style在项目中使用CSS预处理器Less 官网[https://www.sass.hk/]
4.1 安装
cnpm i less3 less-loader7 -S4.2 使用
style langless/style使用reset.css 任何一个项目都需要做样式重置,这里我们使用官方的样式重置内容如果需要补充可以自己手动添加。 官网: [https://meyerweb.com/eric/tools/css/reset/] 我们把代码复制下来放在项目中新建的reset.css文件,然后在app.vue的style中进行引入使用:
import url(./assets/css/reset.css);font-awesome图标库的使用 官网[https://fontawesome.dashgame.com/]
6.1 安装
cnpm i font-awesome -D6.2 在main.js中引入
// main.js
import font-awesome/css/font-awesome.min.css
6.3 使用
i classfa fa-users/i使用axios 官网:[http://www.axios-js.com/]
7.1 下载axios
cnpm i -S axios7.2 使用axios
// main.js
import axios from axiosVue.prototype.axios axios // 挂载到原型,可在全局使用配置路由
8.1 下载vue-router
cnpm i vue-router -S8.2 配置路由(新建router文件夹和index.js文件)
// index.js
import Vue from vue
import Router from vue-router
import Home from ../components/Home.vueVue.use(Router)export default new Router({routes: [{path: /,component: Home}],mode: history
})8.3 挂载使用
// main.js
import router from ./routernew Vue({router,render: h h(App),
}).$mount(#app)!-- 在App.vue设置路由出口 --
router-view/router-view8.4 路由懒加载 8.4.1 官方推荐的方法,使用ES中的import component: () import(‘/components/Login’)8.4.2 使用Vue异步组件 component: resolve require([‘/components/Home’], resolve)
Ps: vue-router4.X只能结合Vue3.0进行使用 vue-router3.X只能结合vue2进行使用
如果需要降低版本这里提供三种解决方案 直接命名 npm uninstall vue-router 卸载原有的Vue-router 添加 --legacy-peer-deps 指令在下载对应版本的指令后保证各个依赖之间的不同版本的共存 上述两种方式如果都无法生效那么删除掉该项目的node_modules修改package.json文件中的版本号重新安装即可
四、页面实现
简单的进行首页、登录页、404页面的搭建 登录页功能(LoginOne、LoginTwo均为测试页面, Login为正式页面)
五、Axios的二次封装以及跨域的处理
Axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service
// service.js
import axios from axiosconst 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.dataif (status ! 200) {Message({message: message || error, type: warning})}return response
}, (error) {// 对响应错误做点什么return Promise.reject(error)
})export default service// main.js
import service from ./serviceVue.prototype.service service // 挂载到原型,可在全局使用跨域的处理在vue.config.js中设置代理
// 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菜单,并且新建学生列表、作业列表、信息列表、考勤管理页面并且配置路由之后去写面包屑组件。这样我们项目的大致模型就有了。
