This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The rich text editor: vue quill – editor (run, not elementUI components), specific see the document — — — — — — — — — — — — — — — — — — —

Send request to add goods, goods send data server level 3 category id as a string, and the form data is an array, you need to put the string into an array, but goods three-level classification of the cascade selector two-way binding id form data must demand for array, when the goods level 3 category id would be an error after form data to a string, The solution is to make a deep copy of the form data, then change the copied data and submit the copied data to the background. You need to use the lodash package (run dependencies).

— — — — — — — — — — — — — — — — — — –

Lodash can combine two objects to a new object: _. Merge (object 1 and object 2) — — — — — — — — — — — — — — — — — — –

Echarts graphics, see the official documentation

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

Nprogress Progress bar effect:/ / import
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

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

Copy the code

Prettierrc “printWidth”:200 when VScode is saved, formatting code automatically wraps, add “printWidth” to the. Prettierrc file The length is more than 200 before wrapping) ————————————————————————————————————

The Babel plugin can be used to build a project. Go to babel-plugin-transform-remove-console on the NPM website, then go to babel-config-js in the vue project created by the visual panel, and add the configuration. However, during the development phase, we want to have a console for testing, so we need to monitor what stage the project is in. If it is in the package phase, we add the configuration item, if not, we do not add it in the visual tool:

We can get the value after –mode to determine whether it is production

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

Vue.config. js is created in the root directory of the project to change the default webpack Settings. Add configureWebpack or chainWebpack node to define the packaging configuration of WebPack. (chainWebpack and configureWebpack work the same way, but chain changes the configuration through chain programming. For example, if we want to use a different entry file js for development and packaging (make two copies of main.js and call them main-prod.js and main-dev.js), we need to configure the following in vue.config.js

Configure externals (reduce the size of the package file and do not pack third-party resources in the externals configuration item). If you need to load resources after externals is configured, the system searches for resources in Windows globally

Import the js file globally (index.html). Import the CSS stylesheet globally (main.js) in the entry file.

In the development stage, we enabled on-demand loading of element-UI components to reduce the volume of packaging as much as possible, but those components loaded on demand still occupy a large volume. At this point, we can load them in the form of CDN: 1- In main-prod.js, comment out the code that Element-UI loads on demand. 2 – in the index. The HTML element is introduced into the js and CSS — — — — — — — — — — — — — —

Customize home page content: In development mode, open the home page with dev logo in front of the title and do not import CSS and JS. In packaging mode, do not add DEV logo and introduce CSS and JS. Now vue.config.js adds the configuration item

IsProd can be obtained in index.html and operated on the value of isProd

<%= %>(template string syntax)

— — — — — — — — — — — –

Route lazy loading: 1- Install @babel/plugin-syntax-dynamic-import package. 2- Configuration in babe. Config.js.

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

3- Change the route to load on demand (official VUE documentation)

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, put several components into a group, load a group directlyCopy the code