笔记 .md · Koala/vue_admin

项目初始化：
1.安装Vue脚手架
2.通过脚手架创建项目
3.配置路由
4.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element
5.配置Axios：在依赖中安装,搜索axios(运行依赖)
6.初始化git仓库
7.将本地项目托管到github或者码云中

后台项目的环境安装配置：
1.安装MySQL数据库：将mydb.sql文件还原到mydb数据库 默认MySQL密码是root
2.安装nodeJS，配置后台项目,从终端打开后台项目vue_api_server 然后在终端中输入命令安装项目依赖包：npm install 并运行node .\app.js将api接口项目跑起来
3.使用Postman测试后台项目接口是否正常（请求登录接口）

vue ui创建项目出现错误Failed to get response from https://...babel helper vue jsx merge props 解决方式： 安装npm install babel-helper-vue-jsx-merge-props --save-dev

安装less依赖:less-loader和less两个

格式化文档和eslint发生冲突 格式规则不一样 可以创建一个文件prettierrc进行配置：如printWidth超过多少字符换行 以符合eslint的规范 也可以关停相应的警告：复制警告的规则 在eslintrc里面进行配置

项目启动时报错Syntax Error: TypeError: this.getOptions is not a function 是因为less-loader 版本过高 需要先卸载再装低版本npm install less-loader@6.0.0 或者不加lang=less也行

Element UI 的标签就是类名 可以直接拿这个设置样式

后台除了登录接口之外，都需要token权限验证，可以通过添加axios请求拦截器来添加token，为请求头加上Authorization属性 值为token，以保证拥有获取数据的权限

layout栅格 总宽度24格

作用域插槽slot-scope，组件如果要根据数据自定义 就要放到作用域插槽里 如权限里的tag

Form表单里的自定义规则

resetFields重置 保存状态

messagebox消息弹框 这个写到方法里面 不是html里面

如果某个函数的返回值是promise 可以用async和await来优化

分类组件里面的下拉表格组件使用插件vue-table-with-tree-grid 先安装 导入 再注册这个组件 （Day4）

按需显示标签 v-if v-else else

级联选择器 父级分类

文本输入框和按钮之间的切换

时间过滤器 将时间以年月日的形式展示 | 管道符

v-model主要是为了让页面上的操作存储到数据里 从而实现双向绑定

安装依赖vue-quill-editor富文本编辑器 然后导入组件并注册

格式转换问题：级联选择器的选中项通过v-model以数组的形式和传递的参数goods_cat绑定了 但是最后传给服务器的时候要字符串形式 但是又不能将其直接改为字符串（正向渲染不出来 会报错）所以要先深拷贝一份总参数对象 安装lodash包 装好依赖后先在本组件里导入（推荐用_接收 类似jquery用$接收）然后调用cloneDeep方法拷贝一份新的对象 在这份新的里面转换好格式再发送给服务器

Timeline时间线组件 element ui 2.6以前的版本是没有的

可视化要安装Echarts依赖 先在report里导入插件 再在mounted里面（不是created）将div初始化为一个echarts实例   合并对象用lodash里的merge方法

生产环境中的项目优化：
1.展示进度条：安装依赖nprogrss 然后在main.js导入两个文件 在request拦截器中显示进度条，在response拦截器中隐藏进度条
2.在serve阶段允许出现console.log 但在build阶段不允许：安装bable-plugin-transform-remove-console（发布时依赖）然后在bable.config.js里面的插件中新增一个transform-remove-console 但是只在发布阶段使用 所以定义一个数组 通过判断process.env.NODE_ENV的值 如果是生产环境则添加这个插件 否则不用这个插件
3.打包报告：记录项目中的错误和其他信息 可以在UI界面中的控制台和分析里面进行查看 饼状图中较大的文件需要减小体积（依赖项）控制台里面打开速度需要优化 资源里面的最大的js文件（1.6M 惊叹号）也需要优化
4.自定义配置（脚手架3）在vue.config.js里面
5.为开发和发布模式指定不同的打包入口：在vue.config.js里面通过chainWebpack修改webpack配置 通过process.env.NODE_ENV的值来设置不同的打包入口
6.设置某些包不合并到js里面 而是在html中以外部CDN的形式导入（如Element UI） 同时将js里面的样式改为html中引入
7.首页定制：开发和发布模式的title显示不一样 先在chainWebpack里面配置isProd 然后title里面根据这个值选择性地渲染标题 那些CDN资源也用这种方式当发布模式才加载上 可以通过build之后生成的dist里面的html里看到最终渲染效果
8.路由懒加载：安装@babel/plugin-syntax-dynamic-import依赖 在babel里面配置好 再将router.js里面的路由改为按需加载

项目上线
1.通过node创建web服务器：在服务包里先初始化npm 再安装express包 将项目里的dist文件夹复制到服务包里 再新建一个app.js 导入express并创建express好服务器 终执行node .\app.js启动服务器 就能在浏览器输入地址查看到项目了
2.开启gzip压缩 减小文件体积 加快传输速度 先安装compression 再导入、注册 打开项目 在network里面可以看到传输的文件大小要小于实际大小
3.配置https服务 让网络传输更加安全 采用https协议对传输的数据进行加密处理 先申请SSL证书FreeSSL.cn 再导入证书
4.pm2管理应用：项目通过在终端运行node .\app.js打开网站 关闭了终端就不能打开了 要想还能打开就要用pm2管理工具 先全局安装pm2 再启动项目pm2 start .\app.js --name zidinyi 此时关闭终端依然能打开网站 要查看运行的项目可打开cmd终端运行pm2 ls 也可停止项目等

练习时出现的问题：
1.serve后出现警告 export 'default' (imported as 'echarts') was not found in 'echarts'
并且项目里出现错误TypeError：Cannot read property 'init' of undefined 解决方法：把import echarts from 'echarts'改为import * as echarts from 'echarts'
2.项目里出现错误'normal' hierarchy in areaStyle has been removed since 4.0. All style properties are configured in areaStyle directly now.echarts版本太老所以从服务器里传来的数据格式不对 areaStyle 里面的normal配置项不用了 直接写在areaStyle 里面就行
3.项目里出现警告（Cate组件中） expand-trigger is removed, use `props.expandTrigger` instead. 老版本Element-UI（2.6）中的expand-trigger 菜单的触发方式 新版改为了expandTrigger且要加在下面的cascaderProps里 而不是直接写在标签里。change-on-select is removed, use `props.checkStrictly` instead. 老版本（2.6）中change-on-select属性 新版没有了改为checkStrictly（严格的遵守父子节点不互相关联）

Koala/vue_admin

简介

发行版

贡献者

近期动态

Koala/vue_admin .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Koala/vue_admin