vue电商实战-黑马-02

商品管理

商品列表

过滤器（管道）：
本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

官网介绍过滤器：https://cn.vuejs.org/v2/guide/filters.html
全局过滤器（抽离出来的）：https://blog.csdn.net/qq_42778001/article/details/95613371

日期处理过滤器：

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

添加商品：
1.步骤条和tabs要联动，使用了同一个变量为什么没有联动呢？
步骤条：index，数值型。
tab：name属性，字符串型的。
2.tabs有五个，这五个组成一个大的表单，不是独立的。
3.tabs离开之前做校验：tabs有离开的钩子属性：before-leave。return fasle后，就不可以切换了
4.tabs选中之后，要调用接口：tab-click：tab 被选中时触发。

上传图片：
action：上传接口地址，
on-preview：图片预览事件，
on-remove：图片删除，
list-type：文件列表的类型， string，可选： text/picture/picture-card，默认值： text。

图片预览，是一个dialog弹框，自己写的。

富文本编辑器

vue-quill-editor

1.安装方式 install：npm、cdn
2.注册方式 mount：
mount with golbal：全局注册
Mount with local component：局部注册
Mount with SSR：服务端

3.使用方式：
SSR：server-side rendering，服务端渲染，eg：React的Next，Vue的Nuxt。
SPA：single page application，客户端（我们使用的方式）
SEO：search engine optimization，搜索引擎优化，
https://www.jianshu.com/p/a4e0b58fb0a9

// 直接绑定属性即可。
<quill-editor v-model="addForm.goods_introduce"></quill-editor>

optimization
英 [ˌɒptɪmaɪˈzeɪʃn] 美 [ˌɑːptɪməˈzeɪʃn]
n.最佳（优）化；优选法；（使）最恰当（适宜，适合）;最佳条件选择；求最佳参数；优化

使用lodash

提交时候，form的数据要做特殊处理（拼接字符串，格式转换等），做了一份深拷贝：
安装lodash，运行依赖。
组件中直接使用：

import _ from 'lodash'

const submitForm = _.cloneDeep(this.addForm)
// 然后处理submit做数据处理

引入citydata.js

// 在组件中引入，就可以直接使用了
import citydata from './citydata.js'

// 使用：citydata

citydata.js文件：

export default [{name:1},{name:2}]

timeline的使用

直接可以使用，不用单独引入文件包的。

echarts的使用

// 在组件中引入后直接使用
import echarts from 'echarts'

在created中，使用echart的init函数，报错：

created () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  console.log(myChart)
},

Error in created hook: "TypeError: Cannot read property 'getAttribute' of null"

放在mounted中，因为mounted在渲染dom完成后才执行。

优化

1.生成打包报告
2.第三方库启用CDN
3.element-ui组件按需加载
4.路由懒加载
5.首页内容定制

进度条

插件：nprogress

import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式


NProgress.start();
NProgress.done();

NProgress.start() // 显示进度条
NProgress.set(0.4) // 设置百分比
NProgress.inc() // 稍微增加
NProgress.done() // 完成进度(进度条消失)

在request拦截器中开始进度条；在repose拦截器里面停止进度条；

// 开始

// reponse和request是类似的，结束
axios.interceptors.response(config=>{
  NProgress.done()
  return config
})

在axios的拦截器中，加nprogress的开始和结束函数吗？？
路由中使用？？？
参考：https://www.jianshu.com/p/346c05d4d9d8
同一个页面，多个接口怎么办？

eslint语法错误（运行serve的时候警告）

0.声明变量没有使用，会报错。

1.printWidth：80-》200
vscode，某一行长了以后，会自动换行，
.pretterc中，增加：

printWidth:200  // 编辑器默认80

2.函数的参数：使用驼峰，不建议attr_id这种。

运行build的警告信息

检查build错误信息：

• console的错误（生产不允许console打印）

// 警告信息：
warning  Unexpected console statement  no-console

解决办法：
使用：babel-plugin-transform-remove-console，具体使用地方与npm官网有点区别。

安装后在babel.config.js中：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    'transform-remove-console' // 增加这个内容
  ]
}

此时这么解决后，开发、测试、生产都没有console了，不好啊。

// server 启动的时候，在ui界面-输出panel中的最上面：
$ vue-cli-service serve --mode development --dashboard
 INFO  Starting development server...

// build的时候：
$ vue-cli-service build --mode production --target app --dashboard

so：
babel.config.js

// 项目发布阶段需要用到的 babel插件
const prodPlugins = []
// production：生产；development：开发；
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 产品发布时候的插件数组
    ...prodPlugins
  ]
}

解决console后，还有三个waring（后续解决）：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.


entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.15 MiB)
      css/chunk-vendors.a8961e23.css
      js/chunk-vendors.aaa7775f.js
      css/app.7df5136d.css
      js/app.a670ffdb.js


webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

生成打包报告

1.命令行参数的形式

// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report

2.通过可视化面板直接查看报告（推荐）

在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

面板分析：

可以看到，echarts、element-ui和quill这三个占了很大空间。

带三角叹号的，是因为有一个js文件太大了，这个太大，打开会很慢，需要优化的。

项目优化策略

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

通过vue.config.js修改webpack的默认配置。

如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）。

// vue.config.js  导出一个包含了自定义配置选项的对象
module.exports = {
	// 选项...
}

为开发模式和发布模式指定不同的打包入口：
默认vue项目的开发模式和发布模式公用一个打包入口文件（src/main.js），但是我们可以指定打包入口文件：

src/main-dev.js // 开发模式
src/main-prod.js // 发布模式

具体再看p198及之后的