preface

At the beginning of 2017, I heard about Vue when I started to work, but at that time, few companies in China were using it. JQuery was still the world at that time, and then more and more companies were using Vue in China. I started to learn Vue at the end of 2017 and the beginning of 2018.

This article is recorded and sorted out here. Since I started to use Vue in early 2018, I have encountered various difficulties, API problems, bugs, and tutorial sorting (updated from time to time) in the process of product development for the business requirements of the project 😁

The body of the

1. Cache of keep-alive components:

<! --><keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive><! This will not be cached.<router-view v-if=! "" $route.meta.keepAlive"></router-view>
Copy the code

The keep-alive cache component has two lifecycle hook functions: activated (called when the component is activated) and deactivated (called when the component is deactivated), corresponding to created and destroyed. For some global common components in the business, such as importing the common component in a cached component and binding an event,

mounted() {
    this.$nextTick(() = > {
        window.addEventListener('click'.function.false); })},Copy the code

Unlog the event when you exit the component,

destroyed: function() {
    window.removeEventListener('click'.function.false);// Unlog the event while leaving
},
Copy the code

Also perform a logout event in DeActivated because cached components are not destroyed.

2, Vue built single-page application, assuming the scenario from the list page to the details page, if the business needs to open a new window, usetarget="_blank". In this case, if both Windows are useful between pagesvuex stateFor data, such as sharing an array of ids, the list page is modifiedstateAfter data, the details page cannot be updated in real timestateThe data. You can only uselocalStorageTo achieve the effect.

Vuex persistence can be implemented using Vuex-PersistedState. The underlying logic is to dynamically update vuEX data to localStorage.

3,vue-meta, more elegant management of header tags

Dynamically set meta: keywords, description, and title tags for SEO, and can be used with prerender-SPa-plugin pre-rendering.

Reference:

Vue-meta.nuxtjs.org/faq/#concat…

www.zhuyuwei.cn/2018/vue-me…

4. Prerender-spa-plugin for SEO optimization of Vue SPA project

Github.com/chrisvfritz…

Related bugs:

Error 1 ️ ⃣ :

Error resolution: github.com/chrisvfritz…

// Add the args parameter here
renderer: new Renderer({
    args: ['--no-sandbox'.'--disable-setuid-sandbox'],})Copy the code

Error 2 ️ ⃣ :

Error resolution: github.com/chrisvfritz…

The default value is true (chromium is not automatically opened). The default value is false (Chromium is automatically opened). If the server has no interface, such as centOS and ubantu, the above information will be displayed.
renderer: new Renderer({
    headless: false,})Copy the code

Cross-domain configuration for pre-render builds

server: {
    // Normally a free port is autodetected, but feel free to set this if needed.
    port: 9292.proxy: {'/api': {
            target: 'https://www.xxxxxxx.com'.changeOrigin: true.// Whether to cross domains
            pathRewrite: {
                '^/api': 'api' // Rewrite}}}},Copy the code