• 1. In the process of value transmission between parent and child components, echart was included in the sub-component. During the loading process, the neutron component did not obtain option data, and Echart reported an error. This problem is solved by setting delay in obtaining data.
setTimeout(function(){ myChart.setOption(option); //option is the parent component}, 100);Copy the code
  • 2. In the projects generated by vuE-CLI, “#” always appears automatically in the address bar of the browser and cannot be removed. After checking the official document of vue-Router, it is found that there are several modes of vue-Router, as follows

export default new Router({
  mode: 'history',
  routes: [...]
})
Copy the code

However, changing to this mode requires the cooperation of the background. Check out router.vuejs.org/zh-cn/essen…

  • 3. Solve the method of realizing route jump in VUE method. Before using
this.$router.go('/tt'); // where tt is a routing module that you defineCopy the code

This will cause the page to refresh. After change to

this.$router.push({path:'/tt'});
Copy the code

Perfect!!!!!!

  • 4. The default project generated by VUe-CLI is SPA, if the actual project needs to be changed to multi-page application, what should be done?? This involves modifying the WebPack script configuration. (1) Create a new test.js file in SRC and copy the contents of main.js directly to it for convenience. Then, modify the build/webpack. Base. Conf. Js for multiple entry.
entry: {
  app: './src/main.js'.test: './src/test.js'
},
Copy the code

(2) Create a test. HTML file in the root directory of the project and copy the contents of index.html. To differentiate, change the title. (3) Modify the build configuration in config/index.js and add a new configuration

index: path.resolve(__dirname, '.. /dist/index.html'),
test: path.resolve(__dirname, '.. /dist/test.html'), / / newCopy the code

(4) to modify the build/webpack. Prod. Conf., js configuration about HTML in the plugins. Modify the

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest'.'vendor'.'app']})Copy the code

Rewrite filename to display the page name, and add chunks to prevent unnecessary JS loading. Add another configuration later

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  thunks: ['manifest'.'vendor'.'demo']}),Copy the code

(5) Run NPM run build to package the package. Then go to the dist directory and execute hs (assuming http-Server is installed) to start the service. You can now see the index.html and test.html pages. If you do not want to start the service view page, you need to put the config/index.js file

assetsPublicPath: '/'
Copy the code

Then repackage to access index.html and test.html in the dist directory.

Resources: VUE-CLI multi-page application

This is a record of daily work and study for future reference. Learn from the great god and make progress slowly.