This is the 9th day of my participation in the August Wen Challenge.More challenges in August

Error not found. Vue

Clearly the path that’s right, because the same folder exists the index with the same name. The vue/index. The js/index. The CSS file, so the configuration of the search order must be right.

Configuration in webpack.base.conf.js

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
Copy the code

The default is to find.js and then.vue and then.json, so you can just change the order.

Alter: Extensions: [‘.vue’, ‘.js’, ‘.json’]

— — — — — — — — — — —

  • Error:Failed to mount component: template or render function not defined.
  • The template could not load.
  • It means:<template>There’s no definition or there’s no package<template>Medium, how can that be.
  • /index.vue/index.js/index.js/index.js/index.js/index.js
  • Error route import:
  • const User = resolve => require(['@/views/bpgca/system/user'], resolve)
  • Correct route import:
  • const User = resolve => require(['@/views/bpgca/system/user/index.vue'], resolve)

— — — — — — — — — — —

Ii. Vue’s life cycle

A combination of routing navigation, keep-alive, and component lifecycle hooks triggers the sequence, assuming it leaves component A and enters component B for the first time:

  • BeforeRouteLeave: Hook of a routing component before it leaves the route.
  • BeforeEach: global front-guard of routes, used for login authentication and global route loading.
  • BeforeEnter: Exclusive route guard
  • BeforeRouteEnter: Pre-route hook for a component of a routing component.
  • BeforeResolve: global route resolution guard
  • AfterEach: Routes a global post-hook
  • BeforeCreate: Component life cycle, cannot access this.
  • Created: Component lifecycle, access to this, not dom.
  • BeforeMount: Component life cycle
  • Deactivated: Deactivates the cache component A or triggers a’s beforeDestroy and Destroyed component destruction hooks.
  • Mounted: Accesses and manipulates the DOM.
  • Activated: Goes into the cache component, into a’s nested child component (if any).

Execute the beforeRouteEnter callback next.

Dynamic route loading

RouteArray [0].children. Push (routeChild) "path" is required in a route configuration. */ routeArray[0].children = routeChildCopy the code

But after changing a way of writing and do not report the error, puzzling.

4, Vue.js devtool plug-in problems

Error:

Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

  • 1. Refresh and open the developer tool.
  • 2, More tools – extensions – vue.js DevTools details – allow access to file URL open, useless.
  • 3, modify,Users\***\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\Manifest.json file for the corresponding version.

change

"background": {
    "persistent": false,
    "scripts": [ "build/background.js" ]
}
Copy the code

for

"background": {
    "persistent": true,
    "scripts": [ "build/background.js" ]
}
Copy the code

It doesn’t.

  • 4, check whether vue.min.js is used, suddenly realize that you are opening vue.min.js used by the web system on the server, open the local system vue.js Devtool can be used normally!!

Five,$routeand$routerThe difference and use of

$route is an object, the current route object, from which you can get name, path, query, params, and so on

$Router is an instance object of VueRouter, which can be used to call methods push, replace, go, etc

Because main.js has:

import router from './route'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
Copy the code

Therefore, for.vue, router has been imported globally, so there is no need to import router from ‘.. /.. /route’, just use this.$router.push().

For other js files, there is no this.$router object, so import the import router from ‘.. /.. /route’, and then use router.push().

Vi. Vue displays blank in IE

Phenomenon:

IE opens the front-end project written by Vue, a blank, console error “Promise not defined” or error [vuex] vuex equires a Promise polyfill in this browser.

The reason:

The main reasons are IE’s unfriendly Promise support and the lack of support for the new ES6 syntax.

Solution steps:

  • NPM install –save babel-polyfill
  • Add dependencies to package.json
DevDependencies: {"babel-polyfill": "^6.22.0"}Copy the code
  • Add reference import ‘babel-polyfill’ to main.js
  • 4, add ‘babel-polyfill’ to app array in webpack.base-config. js
module.exports = {
     entry: {
     app: ['babel-polyfill', './src/main.js']
     }
}
Copy the code

Development:

  • The latest ES syntax: for example, arrow functions
  • The latest ES API: For example, Promise
  • The latest ES instance methods: for example, string.includes

V-model binding data cannot trigger status update

Official documentation cn.vuejs.org/v2/guide/li… Have mentioned

The note in the “Array update detection” section states: Due to JavaScript limitations, Vue cannot detect the following altered arrays.

  • 1, when you set an item directly using an index, e.g. Vm. items[indexOfItem] = newValue
  • 2, when you change the length of an array, for example, vm.items. Length = newLength

I happened to encounter the situation described by 1:

let arrayList = [
	{
		code: 'a',
		val: 'aaa'
	},
	{
		code: 'b',
		val: 'bbb'
	}
]
for (let i = 0; i < arrayList.length; i++) {
	let code = arrayList[i].code
	let val = arrayList[i].val
	this.buildData[code] = val
}
Copy the code

BuildData = {{buildData[‘a’]}} = {{buildData[‘a’]}}

The solutions provided by the authorities are as follows:

$set = vm.$set = vm.

$set(this.buildData, code, val) = this.buildData[code] = valCopy the code

Method 2: use the splice function to loop through the assignment,

BuildData [code] = this.builddata.splice (code, 1, val)Copy the code

Method 3: I found that calling vm.$set directly after the loop also triggers buildData status updates, i.e

for (let i = 0; i < arrayList.length; i++) {
    let code = arrayList[i].code
    let val = arrayList[i].val
    this.buildData[code] = val
}
this.$set(this.rawData)
Copy the code

Method 4: On trial, setting buildData empty before loop assignment starts can also trigger its state update, i.e

this.buildData = {}
for (let i = 0; i < arrayList.length; i++) {
    let code = arrayList[i].code
    let val = arrayList[i].val
    this.buildData[code] = val
}
Copy the code

Viii. Network problems affect front-end access

If the page is accessed normally and the network connection is disconnected or the IP address changes, the page can still be switched, but the data cannot be loaded. There may be two reasons:

  • 1. Browser cache
  • 2. The browser has loaded all files to the local PC

Clearing the cache, disconnecting the network after re-logging in, and switching routes cannot be switched.

The reason is that lazy route loading and no cache are used to switch routes.

Lazy loading: const Foo = () => promise.resolve ({/* component definition object */})

With direct import, WebPack loads all the routing points into a local file together.

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

9. The problem of external package introduction

Some third-party packages must be imported as

Vue.sync and.$set

  • <:current-page. Sync =”currentPage”> <:current-page. Sync =”currentPage”
  • $set = $set = $set = $set = $set = $set = $set = $set

Such as:

Original assignment method (unsuccessful)

// this.productInfo[0] = bbb.productInfo
// this.productInfo[1] = bbb.companyInfo
Copy the code

Correct assignment method (success)

this.$set(this.productInfo,0,bbb.productInfo)
this.$set(this.productInfo,1,bbb.companyInfo)
Copy the code

Eslint enabled and disabled

ESLint isa code specification and error-checking tool that partially disables code checking to sandwiching unchecked code between disable and enable, as follows:

/* eslint-disable */ No code specification checking will be done in this area /* eslint-enable */Copy the code

NPM package console error

Error: NPM run build package

Unexpected console statement
Copy the code

Solution:

To configure ESLint, turn off no-console.

Most people say that eslintConfig rules are in package.json, but I don’t have eslintConfig rules here.

Eslint actually has a separate configuration file.eslintrc.js with rules in it.

So modify the.eslintrc.js file:

Remove ‘no-console’: process.env.node_env === ‘production’? ‘error’ : ‘off’, or configure ‘no-console’: off.

Proxy configuration for cross-domain problems

Configured in the/config/index. Js

ProxyTable: {'/ API /**': {target: 'http://10.10.17.63:8089/', changeOrigin: false, Secure: false, pathRewrite: { '^/api': '/' } } }Copy the code

Explanation:

Request to send url, match/API will be proxy here, destination address is background IP+PORT.

PathRewrite means that replacing the/API in the URL with/has the following effect.

Access to the backend interface goals: http://10.10.17.63:8089/loginUser

The request URL is/API /loginUser. After the request is sent, the agent will join the destination path and remove the interception identifier.

Going to forward requests to: http://10.10.17.63:8089/loginUser

14. Webpackage configuration

  • ProductionSourceMap: false, // will not see the source code after packaging
  • Open: config. Dev. AutoOpenBrowser, / / open the browser automatically
  • OpenPage: ‘login’, // Automatically opens the browser to the specified page

15. Store static or assets files

After reading a lot of instructions about how to store files under static or assets, MY own understanding is:

Static files are not compiled. Assets files are compiled. Compilation feels like “encryption”.

If external references are static, put your own files inside assets.

Static = static; static = static;

  • Js must have a relative path:. /.. /.. /.. /static/json/***.json
  • The absolute path in CSS must start with / :background: url(/static/img/***.png);
  • The absolute path in the HTML tag can be omitted / :<img src="/static/img/***.png"/>or<img src="static/img/***.png"/>

NPM run dev keeps running

Phenomenon:

When Visual Studio Code edits the code, it does not modify the code, but the console sees NPM run dev running over and over again.

The reason:

Reset the system time to three months ago, causing NPM run dev to keep running. Why?