Vue project is coming to the end, please record the problems encountered in the project and summarize some experience to share with you. Please give us more advice and get along with us to make progress together

The filterfilter

How do you write your code efficiently if, due to product needs or design personalities, the time on the page is displayed in minutes and seconds here and days and months and years there? Well, that’s where we use our filter

The first stepnewfilter.js, handling various time types The second stepinmain.jsThe introduction of

Step 3: Use it on the page

<p>{{row.updateTime | timeFilterYMDHMS }}</p>
Copy the code

In addition to time, you can also deal with money, distance, etc

webpacktherequire.context

Take a look at the route you importedjsIs it as long and error-prone as mine?If so, use itrequire.contextLet’s optimize and get a feel for the optimized code:

const context = require.context("@/pages", true, /router.js$/);
let children = []
context.keys().forEach(key => {
  if (Array.isArray(context(key).default)) {
    children = children.concat(context(key).default)
  }
});
Copy the code

Require. context is primarily used to automate import modules. Take a look at your VUE project. In addition to routing, can component imports also be automated using require.context?

usemixinsOptimize the code

In a nutshell, vue.mixin () can mix custom methods you create into all Vue instance sample code

Vue.mixin({
  created: function(){
  	console.log("success")
  }
})
Copy the code

Run your project and you’ll see a “success” output on the console… Now comes the requirement that the table scroll as the page scrolls, and that the table head be fixed at the top when the table head is about to disappear. So you listen for the page scroll event, you set the table header to be fixed, well, it’s done, and if you look back, all the components have this code, can you just write one code? Mixins to ~

// scrollins. js export default function(config) {// config to receive. Vue parameters let {className=""} = config return { mounted() { document.querySelector('.el-main').addEventListener('scroll', this.scroll) }, destroyed() { document.querySelector('.el-main') && document.querySelector('.el-main').removeEventListener('scroll', This.scroll)}, activated() {this.scroll()}, methods: {// table scroll, table head sticky scroll() {// todo your code}}}}Copy the code

Then import it in the.vue file

import Mixin from '@/mixins/scroll-mixins';
let mixin = new Mixin({
    className: "settled-pay-table",
})
export default {
  computed: {
    ......
  },
  mixins: [mixin],
  methods: {
  }
 }
Copy the code

Vue - cli3.0Configure multiple page pits

Configuring multiple Pages

Suppose you need the login page as an entry file in your project

The first stepIn the projectpublicCreate one under the folderlogin.html, I am a willindex.htmlA copy of

Js (referring to index’s main.js), router.js(referring to Index’s router.js) and vue (referring to index’s app.vue) in the login folder.

The third step is to add an entry configuration to the module.exports of vue.config.js

Pages: {index: {entry: 'SRC /main.js', title: process.env.vue_app_title, // ` public/index. The HTML `}, login: {entry: 'SRC/pages/login/build/main js', the title:' the user login, / / template source template: `public/login.html`, }, }Copy the code

Run package, completely no problem, a day’s wages come to hand again, ha ha ha ~ don’t worry, seriously look at the pit…

Pit 1: Packedlogin.htmlMixed with global dependency files, largejsandcssFile, sad…

Look at the packed oneslogin.html I’m going to introduce this sumloginirrelevantjsandcss????? It feels like there’s more to it than that. How can I configure each page to package what it needschunks? So I foundsplitChunksIn thevue.config.jsthemodule.exportsadd

chainWebpack: config => {
    config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          minChunks: 4,
          test: /node_modules/,
          priority: -10,
          chunks: 'initial'
        },
        common: {}
      }
    });
  }
Copy the code

Pack it up again. It’s perfect(have tosplitChunksAnyone interested can gowebpackTake a look at the official website.)

Pit 2: The entry configuration must match the route

One day there was a need to add a page about maps. Ha ha ha, this one I can ~

vue.config.jsThe configuration of the

Pages: {index: {entry: 'SRC /main.js', title: process.env.vue_app_title, // ` public/index. The HTML `}, login: {entry: 'SRC/pages/login/build/main js', the title:' the user login, / / template source template: 'public/login. HTML ',}, map: {entry:' SRC /pages/map/main.js', // template source template: 'public/map.html ',},},Copy the code

Add main.js, router.js, and vue files. Muddled for a while, find the root in my router.js file

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL
});

router.addRoutes([
  {
    name: 'h5Map',
    path: '/app/h5Map',
    component: resolve => require(['@/pages/map/h5Map.vue'], resolve)
  },
]);
export default router;
Copy the code

Change path ‘/app/h5Map’ to ‘/map/h5Map’

Vue Cli 3.0Implement packaged direct access

By default, the HTML packaged with NPM Run Build is not directly accessible, but sometimes the front-end project needs to be opened temporarily (e.g., the leader wants a locally accessible page…).

implementation

  • 1. Make sure thatvue-routerModel forhashmodel
  • 2. Modifyvue.config.jsIn thepublicPathfor'/'Can be
  • If a 3.index.htmlThere is a reference to the file, change it to the correct (relative) path

(Vue. Config. js cannot configure multiple pages, or it will be blank)

The article is coming to the end, did you feel inspired after reading it? The way of programming, I wish you, aim high, your heart is usual!

Whisper: write very tired ah, pass by can give little sister a praise ah, really want to dig gold gift, cover face :)Copy the code