某个个后台管理系统，包含商品管理 用户管理 订单等等信息。
前端开发内容： PC端(比如:京东) 移动端(手机预览的网页) 小程序 后台管理界面
后台开发： 服务器： 后台语言 java、 php、 python 、大数据、人工智能
架构师： --- 技术总监
前后端分离： 用户 --- >前端-视图-数据---->后台-提供接口 ---> 数据库
Vue + Vue-router + Vuex + Element-ui + Axios + Echarts + 其他三方库
- vue create vue-ego
- vue-router vuex
- axios
- vue add element --(按需)
- 删除无用的组件 home.vue about.vue hello...
- css初始化
- incofont 图标导入
- node.js服务
- express
- jwt（生成token）jsonwebtoken 解析token: 安装： jwt-decode
- mysql
- mockjs -- 模拟数据
-
安装： cnpm i mockjs -S
-
引入： node.js: const Mock = require('mockjs') 前端js: import Mock from 'mockjs'
-
语法： Mock.mock()
-
- 页码布局配置 同级登录界面
- upload 图片上传
- 后台配置
- 后台安装 multer 模块 同时引入fs模块
- router.js入口文件导入模块 const fs=require('fs') const multer=require('multer')
- 上传图片 配置upload
- 百度编译器
- wangEditor
wangEditor使用步骤：
-
基本使用
- 安装：npm i wangeditor --save
- 引入模块： import E from "wangeditor"
- 使用wangeditor const editor = new E("#div1") editor.create()
-
常用配置
-
清空内容 editor.txt.clear() 清空编辑器内容。
-
设置内容 editor.txt.html('') 获取 html
-
配置菜单
- 配置菜单使用 editor.config.menus 定义显示哪些菜单和菜单的顺序
-
配置 onchange 回调函数 配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行
-
-
介绍： Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
-
安装
-
npm install vue-i18n
-
main.js导入或者是单独的文件 import Vue from 'vue' import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
-
-
使用步骤
-
如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。 // import Vue from 'vue' // import VueI18n from 'vue-i18n' // // Vue.use(VueI18n)
-
准备翻译的语言环境信息 const messages = { en: {//英文 home: { hello: 'hello world', xx:xx, ... }, goods:{
} }, zh: {//中文 home: { hello: '你好 世界', xx:xx, ... }, goods:{ } } } -
通过选项创建 VueI18n 实例 const i18n = new VueI18n({ locale: 'en', // 设置地区 messages, // 设置地区信息 })
-
通过
i18n选项创建 Vue 实例 new Vue({ i18n }).$mount('#app') -
使用语法：
{{ $t("home.hello") }}
-
-
导入 import Element from 'element-ui'
-
导入语言环境 import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
目前 Element 内置了以下语言： 简体中文（zh-CN） 英语（en） 德语（de） 葡萄牙语（pt） 西班牙语（es） 丹麦语（da） 法语（fr） ...
-
配置语言环境 const messages = { en: { message: 'hello', ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale) }, zh: { message: '你好', ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale) } }
-
配置使用 Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
-
安装：npm install echarts -S
-
使用方式
- 导入echarts在组件内使用
- 导入全局 挂载原型上 全局使用
- 开发成vue插件
-
使用 -main.js
-
import * as echarts from 'echarts' Vue.prototype.$echarts = echarts;
-
直接使用 this.$echarts.xxx
-
参考：gitHub： https://github.com/FranckFreiburger/vue-pdf
步骤：
- npm install --save vue-pdf
- import pdf from 'vue-pdf'
- components: { pdf }
问题： pdf打印的时候 看到视图 乱码的中文
-
window.location.href='url' (下载文件)
-
下载图片
down() { var alink = document.createElement("a"); alink.href = this.imgUrl; console.log(this.imgUrl); alink.download = "pic"; //图片名 alink.click(); },
-
安装 -- 使用npm安装： npm install file-saver xlsx -S npm install script-loader -D
-
在/src目录下新建一个excel（名字也可自取）文件夹，存入Blob.js和Export2Excel.js文件
-
在common文件夹里新建js文件夹再新建util.js
export function export2Excel(columns,list){ require.ensure([], () => { const { export_json_to_excel } = require('../../excel/Export2Excel'); let tHeader = [] let filterVal = [] console.log(columns) if(!columns){ return; } columns.forEach(item =>{ tHeader.push(item.title) filterVal.push(item.key) }) const data = list.map(v => filterVal.map(j => v[j])) export_json_to_excel(tHeader, data, '数据列表'); }) } -
在vue项目中的使用 --- 在需要的页面import引入 import { export2Excel } from '../../common/js/util'
-
表头初始化
-
点击导出
-
项目制作：
-
原型图 -- 开会研讨 -- 项目周期 -- 制作项目-（前端后台）
-
团队开发：前后端分离
后台接口：- 本地服务接口：192.168.xx.xx/api/xx/xxx
- 测试接口： 192.168.xx.xx/xx/xx 或者 http://xxx/xxx.com
- 线上的接口： http://xxx/xxx 如果接口访问受限了cors错误 跨域了 反向代理 vue.config.js
项目发布上线： 接口资源共享 cors
-
团队开发：前端人员（2-3个人）
- 项目共享的 同事之间写的项目内容是共享的 功能1 功能2 ...
- git实现代码管理
-
项目打包--项目部署
- 手动打包
- 自动化部署
-
-
手动打包
- 命令： npm run build (看一下：package.json)
- 后台接口：资源共享
- 打包后路径 /xx 希望路径 ./ 修改配置
- 配置环境变量
-
环境变量
- 开发环境-研发环境： development
- 线上环境-生产环境： production
- 测试环境：test
-
环境变量
-
配置项目环境变量：
- npm run serve 环境变量：development
- npm run build 环境变量：production
-
默认当前项目的环境变量： process.env.NODE_ENV
-
请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
-
-
打包后文件处理
- 发送后台人员 部署项目发布
- 开通权限 -- 部署项目 -- 安装软件-链接服务器的域名 -- 每次登录后链接服务--执行命令-发布项目（linux系统）
-
自动化部署
- 项目完善 -- 提交仓库 git -- 码云或者gitHub
- 远端仓库更新完毕 项目完毕 -- 进行项目发布
- Jenkins
-
bug系统
- 开发项目
- 项目完毕后 --- 提交给测试
- 测试通过后 项目发布-线上的
软件： 1. 公司内部测试平台 -- 开通账号和密码 2. 禅道 3. jira
-
项目开发： 周期：2-3个月 （电商：6个月-1年） 团队人员：10几个 （7-8个： 2个前端 3个人后台 1技术总监 1个产品经理 1个项目经理 1个测试人员 ） 开发人员： 技术总监 -- 项目经理 --- 产品经理 --- ui设计师 --- 前端开发工程师（初级 8k -- 18k） --- 后台 -- 测试人员 --运维人员
项目开发： 开会讨论 --- 分析功能--研发周期 -- 分配-后台-10天 前端-5天--接口联调（postman调接口）
-
项目开发---原型： 1. 原型图的压缩包 --ie -- 谷歌-插件：axure 2. 在线原型-- 墨刀
项目： 老项目 ---> 迁移到新项目--（jquery）
项目： 项目迭代更新
- vue双向数据绑定
- Vue组件之间数据传递
- VUE生命周期 做什么？
- watch computed 区别？
- vue父子组件生命周期执行顺序
- v-model原理
- data为什么是一个函数
- vue-router模式 （路由实现的原理）
- key作用 Diff算法
- v-show v-if
- 下载项目到本地 下载命令：git clone 网址地址
- 下载依赖：cnpm i （特殊：readme.md）
- 查看package.json文件 npm start
- 导入axios模块
- 创建axios实例
- 请求拦截 config处理
- 响应拦截 error处理