vue + node.js项目，前端组件库为elementUI组件库 ( 3 )

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

富文本编辑器：vue-quill-editor(运行依赖，不是elementUI组件)，具体看文档 ——————————————————————————————————————

发送添加商品请求时，服务端要求发送的数据中商品三级分类id为字符串，而表单数据里是数组，就需要把字符串转换为数组，但是级联选择器双向绑定的商品三级分类id表单数据必须要求为数组，当把商品三级分类id表单数据改为字符串后就会报错，解决方法是把表单数据深拷贝一份，然后更改拷贝的数据，给后台提交拷贝的数据，需要使用lodash包（运行依赖）具体看文档，官方建议import包用_ 【import _ from 'lodash' 】

—————————————————————————————————————

lodash 可以把两个对象合并为一个新对象：_.merge(对象1，对象2) —————————————————————————————————————

Echarts图形，看官方文档

————————————————————————————————————

nprogress进度条效果：//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

VScode保存后，自动格式化代码后换行了，在.prettierrc文件中加个选项 "printWidth":200（规定每行代码最大长度为200，长度超过200后才换行） ————————————————————————————————————

项目打包上线使用build命令，不希望出现console打印，配置babel插件可以解决：找到npm官网的babel-plugin-transform-remove-console，然后找到可视化面板创建的vue项目中的babel-config-js，添加配置。但这么配置后无论是开发阶段还是打包上线阶段都会移除console，但在开发阶段中我们希望出现console方便我们测试，所以需要监测项目处于什么阶段，如果处于打包上线阶段就添加配置项，如果不是就不添加 在可视化工具中：

可以获取到--mode后的值，判断是否等于production

————————————————————————————————————

Vue-cli 3.0 创建的项目默认屏蔽了所有webpack配置，如果需要自己配置可以在项目根目录创建vue.config.js来更改webpack默认设置【在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置(chainWebpack和configureWebpack作用相同，但chain是通过链式编程的形式更改配置，configure是通过操作对象的形式更改配置)，例如我们想在开发阶段和打包阶段使用不同的入口文件js（复制两份main.js命名为main-prod.js和main-dev.js），需要在vue.config.js中进行如下配置

配置externals（减小打包文件体积，不打包externals配置项里的第三方资源），当你配置完externals后，当需要加载资源时，系统会去window全局查找

所以要在全局（index.html）下引入对应的js文件，在入口文件（main.js中引入的css样式表也会打包增加打包体积，所以也在全局下引入）

虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但那些被按需加载的组件还是占用了较大的体积，此时，我们可以用CDN的形式来加载：1-在main-prod.js中，注释掉element-ui按需加载的代码。2-在index.html中引入element的js和css ————————————————————————————

自定义首页内容：开发模式打开首页时标题前面加dev标识，并且不引入css和js，打包模式不加dev标识并且引入css和js。现在vue.config.js添加配置项

可以在index.html中获取到isProd，根据isProd的值操作

<%= %>(模板字符串语法)

———————————————————————

路由懒加载： 1-安装@babel/plugin-syntax-dynamic-import包。 2-在babe.config.js配置。

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3-将路由改为按需加载形式（vue官方文档）

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-baz" */ './Baz.vue')
group分组，把若干个组件放到一组，加载时直接加载一组