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弹框，自己写的。

富文本编辑器

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

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

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

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

使用lodash

安装lodash，运行依赖。
组件中直接使用：

import _ from 'lodash'

引入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

在axios的拦截器中，加nprogress的开始和结束函数吗？？
路由中使用？？？

eslint语法错误

1.printWidth：80-》200
2.函数的参数：使用驼峰，不建议attr_id这种。

build的警告信息

检查build错误信息：

• console的错误

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

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

安装后在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界面最上面：
$ vue-cli-service serve --mode development --dashboard
 INFO  Starting development server...

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

so：

// 项目发布阶段需要用到的 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）。