Vue Vue-loader Vuex Element-ui Axios Echarts
前端开发:PC端、移动端、小程序、后台管理页面
后端开发:java PHP python 、大数据、人工
1.项目搭建:
- 在PHP study中导入数据库
- 创建项目,vue-router、vuex
- 删除不必要的文件
- 下载axios ———npm i axios -s
- 下载element ———vue add element
element有很多组件可以直接复制代码
—>选择import on demand按需导入(减少项目体积)
—>zh-cn简体中文
—>安装 - 导入css
- 导入iconfont图标 (直接用element里面的图标)
用法 iconfont固定 后面是所选class名
<i class="iconfont icon-icon--yes"> </i>
8.后台服务:node.js服务、express、jwt(生成token)、mysql
2.路由搭建:
- 页面布局配置,同级登录界面
- view中创建文件夹(buju、login)和.vue文件,在route的index.js中创建路由对象
- App.vue中使用
<router-view/>
- 在buju中创建content、mymenu和index的.vue文件,并在buju的index中引入组件,使用组件。content中分为header和content2,并在content2中写路由出口router-view
- 在views中创建首页、商品、规格、广告、订单等文件夹和.vue文件,在router的index中配置路径映射关系,在buju的组件下添加子组件,在myment中使用router-link加路径
3.导航折叠:
- 在订单里面添加二级菜单,新建文件(订单列表和退货),配置路径映射关系,在dingdan.vue里加路径出口router-view,在mymenu里添加样式(在element里面复制)
- myment和content都用到变量iscollapse,在index里面定义变量,myment里父传子用props,content里点击修改父组件的变量,用$emit子传父,在index写方法。
- content传变量,两个按钮同意点击事件,用v-if控制
iscollapse以此来控制两个图标
4.静态布局:
在element里复制输入框、按钮、表格的代码
5.动态数据:
- 新建文件夹server,index.js、router.js
- 安装express ———npm i express -s
- 安装mysql——npm i mysql -s
- 运行index.js出现端口号(8989)
- 复制mysql.js,复制router.js的路由接口,用http://localhost:8989/api/projectList测试数据是否导入
- 新建文件夹api,index.js、base.js
- 复制vue.config.js
- 在main.js加东西
- shangpin.vue写生命周期函数
- api/index.js运行,npm run server,控制台显示…跨域成功
11.根据state的data修改表格的prop
6.分页实现:
1.element的分页里复制代码
2.shangpin.vue中取数据中的页数和总数
7.页面查询:
8.页面添加:
1.新建add.vue,router的index里配置路径,加面包屑
2.添加按钮加router-link
3.form表单复制,
8.弹窗添加:
复制dialog对话框
9.上传图片:
1.复制element的upload
2.router.js写接口,安装multer,静态文件托管
10.富文本编辑:wangEditor
百度编辑、wangEditor
wangEditor使用步骤:安装 npm i wangeditor --save,
引入import E from ’ wangeditor’
使用(官网有使用方法)
编辑内容传给整个添加组件,
10.国际化:vuei18n
-----vuejs国际化的插件
安装:npm install vue-i18n
导入
使用方法在官网
element里按钮国际化,在element里面找国际化
11.登录:
1.路由拦截:
2.安装jsonwebtoken,生成token
3.安装jwt-decode 解析token
3.新建sercert.js,密钥,导出jwtSecert,在router.js中导入
4.base.js里配置接口路径,index.js里配置请求的方法
12.Echarts使用:
1.安装echarts
2.在mounted里面复制官网代码
3.修改初始化的实例this.$echarts.init
13.mock.js模拟数据:
独立的模块
1.安装 npm i mockjs -s
2.引入:node.js中 const Mock = require(‘mockjs’)
前端js import Mock from ‘mockjs’
vue-pdf: 在github中搜
安装----使用-----