Vue 2. X Drop off the pit – check for leaks and fill in gaps (summarize XXX frequently asked in the following group and give unreliable solutions)

preface

The coverage of the content of the article, sesame mung bean broken problems have, not only vUE;

Give is a plan, rather than hand in hand word by word to you said 100,000 why!

The problem summary

Q: Installation timeout (install timeout)

The plan goes like this:

• cnpm: Indicates the mirror version of the national NPM

/*
cnpm website: https://npm.taobao.org/
*/

npm install -g cnpm --registry=https://registry.npm.taobao.org

// Most CNPM commands are the same as NPM commands, such as install, uninstall, etc
Copy the code

• yarn 和 npmTo change the source solution

• Use the NRM module: www.npmjs.com/package/nrm

• npm config : npm config set registry https://registry.npm.taobao.org

• yarn config : yarn config set registry https://registry.npm.taobao.org

Q: If you want to learn Vue, do you need to learn how to build scaffolding first

If you want to get started quickly, use the official scaffolding (vue-cli 3)

Webpack, Parcel, and gulp are things that build workflows;

Learning scaffolding construction, more is to be customized for the project business, tuning;

General entry level without too early to consider this aspect, as long as the use of Vue can concentrate on learning posture.

Q: Install some packages that need to be compiled: the message is not installedpython, build failed, etc

Because some NPM packages need to be installed in a compiled environment, Both MAC and Linux are fine,

Windows users rely on visual Studio libraries and Python 2+,

Windows friends install:

• windows-build-tools
• python 2.x

Q:can't not find 'xxModule'– Some dependencies or modules cannot be found

In this case, you can see which package is throwing the information. Uninstall the module, install and reinstall the module.

Q:data functions should return an object

The problem is that within a Vue instance, the data of a single component must return an object; The following

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [{title: 'Financial Information'.url: '/userinfo'
          },
          {
            title: 'Account Information'.url: '/userinfo/base'}}}Copy the code

Why return a data object?

Data must be declared as a function that returns an initial data object, because components can be used to create multiple instances.

If data is still a pure object, then all instances will share references to the same data object!

In short, when components are reused, it doesn’t cause data to be pointed in one place at the same time, creating a problem that affects the whole body.

Q: I added an event to a native control in a component, but it didn’t take effect!

<! Use third-party frameworks, or some encapsulated built-in components; Then I want to bind the event -->

<! --// Error example 1-->
<el-input placeholder="Please enter a specific consumption amount" @mouseover="test()"></el-input>


<! --// Error example 2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>


<! Neither of the above examples can trigger an event! -->
<! Native = native = native = native = native
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>

<! Fuck--> There are official documents out there, lots of people don't want to read them
<! - https://cn.vuejs.org/v2/guide/components.html# component bindings native events -- -- >

Copy the code

Q: provideandinjectWhat is the

Vue also provides this concept in 2.2. Analogy to ng Provider and React Context;

Q: I have usedaxios, why Internet Explorer does not recognize (IE9+)

That’s because the entire IE family doesn’t support Promise. Solution:

npm install es6-promise

// Introduce it in main.js
/ / ES6 polyfill
require("es6-promise").polyfill();

Copy the code

Q: I used it in the functionthis.xxx=Why did you throw itCannot set property 'xxx' of undefined;

Again,this is bound to the context in which it is currently running,

Usually you use axios or other promise or setInterval to point to the outermost global hook by default.

Simply put :” The outermost context is window, and the inside of vue is the Vue object, not the instance!” ;

Solution:

• Temporary: Cache first within a functionthis, let that = this; (let is es6, es5 uses var)
• Arrow function: imposes the context of the current run area as this;

“<< what you don’t know about JS series >>” is the most appropriate

Q: I read some Vue tutorials have such writing methods, what does it mean@click.prevent.v-demo.a.b;

• @click.prevent: Event + modifier that acts to click but blocks the default behavior
• v-demo.a.b: custom instruction + modifier. Depending on your instructions, modifiers are mostly used to add specific extensions to events, okay

Such as preventing event bubbles, preventing default behavior, accessing native controls, combining keyboard shortcuts, and so on

Portal: Event modifier;

Can I customize modifiers? It’s ok,

You can customize key modifier aliases from the global config.keyCodes object:

Q: Why did the small image I introduced render outdata:image/png; base64xxxxxxxx

This is handled by the corresponding plug-in in WebPack.

For images less than K (specified format) directly into base64 format rendering;

Configure the URl-loader in webpack.base.conf.js rules

Benefits: Load before the content and reduce the number of HTTP requests to reduce the load on the web server.

Q:Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

Basically, a single component rendering DOM area must have a root element,

The V-if and V-else-if instructions can be used to control other elements into a state of coexistence

Q: How to solve cross-domain problems?

For example, No ‘access-control-allow-origin’ header is present on the requested resource.

The question is so commonplace that I will not go into details, but in general;

IE10+ 2: NGINx reverse proxy, once and for all <– online environment can use this

Offline development mode, for example, you use vue-CLI, webPack has introduced such a thing as proxyTable, also can act as interface reverse proxy

// In the config directory index.js

proxyTable: {
  "/bp-api": {
    target: "http://new.d.st.cn".changeOrigin: true.// pathRewrite: {
    // "^/bp-api": "/"
    // }}}// target: the actual path of the API proxy
// changeOrigin: is the origin, must be,
// pathRewrite: path redirection

Copy the code

And of course the jSONP method is still strong! However the limitation is more, more suitable for some special information to obtain!

Q: The value of the array I need to iterate over has been updated, and the value has been assigned. Why is the view not updated?

That’s because there are limitations, and the official documents make it very clear,

Only some of the modified methods provide the same use posture as the original (which triggers view updates);

$set(obj,item,value); $set(obj,item,value);

Portal: Array update detection (triggers view updates)

Q: Why can’t the styles between my components inherit or override?

In single component development mode, please confirm whether the CSS modular function is enabled!!

Scoped (it is configured in vue-cli, and automatically enabled by adding this property)

<style lang="scss" scoped></style>
Copy the code

The reason why this can’t be simply inherited or overridden is that every class or ID or tag will automatically hash the custom attributes after the CSS!

Such as

Trangle [data-v-1ec35ffc]{// hash. Trangle [data-v-1ec35ffc]{// hash. Trangle [data-v-1ec35ffc]{}Copy the code

This is all configured in csS-Loader!

Q: The routing mode is changed tohistoryAfter, in addition to the first start home page no error, refresh access route error!

The main page of the query must be configured for the corresponding server, which can also be considered as the main route entry

There are official documents too, why there are always people who don’t like to read the documents, always like to do the hand,FUCK

Portal: Vue-router History Mode

Q: I want to block the page, or do something before the page comes in, ok?

Of course !!

Various router hooks!! Portal: Navigation guard;

Of course, the location of the memory scroll can also be done, the details of the inside of the document

Q:TypeError: xxx is not a function

This kind of problem obviously is to write method to have a problem, can move a little brain!!

Q: Can you cross levels to get itprops

This is the case for components that are deeply nested and that need to be passed from the parent above,

It can be implemented using $attrs or inject + provide

Q:Uncaught ReferenceError: xxx is not define

• In the instancedataThe corresponding variable is not declared
• If you import a module and report this error, it must be that the export is not well written

Q:Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

Most of these problems are the wrong initial posture;

For example, introducing Echart and so on, and getting to know the life cycle a little bit more carefully, and then initializing it;

Vue components sometimes do (nested components or props pass initialization), which is the basic problem

Q:Unexpected token: operator xxxxx

Dude, that looks like a grammar mistake. It’s mostly a matter of notation. Usually the error will tell you which line or which component

Q:npm run buildNo direct access after that

Bosses! You at least have to set up a local server to access it!!

Q: How about working with Vue’s prototype chain

This is a case by case issue;

I see a lot of people like to mount Axios on vue.prototype;

The downside of this approach is that it is rather coupled, making it difficult for multiple people to maintain or replace other libraries.

A better approach is not to mount, but to have a separate file with service requests, and to use functions to encapsulate the interface aggregation you need;

This exposes function names uniformly, and the internal implementation can be changed at will

Q:CSSbackgroundThe access path is incorrect after importing image packaging

You can change the webpack configuration file static to./static, but it is not recommended

What if you drop the image into assets directory, and then relative path, after packaging is normal

Q: Output from the COMMAND window during module installationunsupported platform xxx

Generally, the node version is incompatible, and the system is incompatible.

Solution: either do not install, or meet the installation requirements;

Q:Unexpected tab charaterthese

This is usually when you have esLint enabled for scaffold initialization;

Either follow the rules or change them;

Or turn esLint detection off in WebPack

Q:Failed to mount component: template or render function not defined

The component failed to mount. There are only a few problems. The component was not introduced correctly or the mount points were in the wrong order.

Q:Unknown custom element: <xxx> - did you register the component correctly?

Components are not introduced or used correctly

1. Import the corresponding component
2. Declare in components
3. Declare labels in the DOM area

Q: How to get custom component supportVue.useUse?

As long as you expose a install function, you can see the following code;

import BtnPopconfirm from './BtnPopconfirm.vue';
BtnPopconfirm.install = function(Vue) {
  Vue.component(BtnPopconfirm.name, BtnPopconfirm);
};
export default BtnPopconfirm;


// Then support vue.use
Copy the code

Q: axiosthepostRequest background cannot receive!

By default, AXIos submits the file in JSON format to verify that it is supported in the background.

If you can only accept traditional form serialization, you’ll need to write your own escape method,

Of course, there is a more convenient solution, a small module QS

// npm install qs -S
// And then the appropriate place to go, either a single request or an interceptor, I wrote in the interceptor.
// See my Axios encapsulation article for details

//POST pass parameter serialization (add request interceptor)
Axios.interceptors.request.use(
  config= > {
    // Do something before sending the request
    if (
      config.method === "post"
    ) {
      / / the serialization
      config.data = qs.stringify(config.data); // *****
    }

    // If there is a token used for authentication, add the token to the header
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token;
    }
    return config;
  },
  error => {
    Message({
      // Ele. me's message popover component is similar to Toast
      showClose: true.message: error,
      type: "error.data.error.message"
    });
    return Promise.reject(error.data.error.message); });Copy the code

Q: VuesupportjsxThe writing?

I can tell you with certainty that it is supportive;

React and React are different, not identical. See the official support library (github.com/vuejs/jsx) for details.

Q: Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.

This is usually the case where the props type in the component is already set to accept a range type, and the value you pass is not the type it needs.

Q: Can filters be used for DOM area binding directives?

// No, look at the following error example<li v-for="(item,index) in range | sortByDesc | spliceText">{{item}}</li>// The instruction of 'vue2+' can only be mustache {{}} '. The correct posture is as follows:<span>{{ message | capitalize }}</span>

Copy the code

Q: [,Array].,mapState.[SOME_MUTATION] (state) {}.increment ({ commit }) {}What the hell is that?!

Go out and make a left turn, go through the basics of ES6+(ES2015+),

Above: array destruct, object destruct, object style function, object destruct assignment pass

Q: Why does my Vue site go blank or notflexLayout confusion!!

Come, the corner walk, UC so-called mobile IE this title is not called for nothing

• flexboxLayout confusion, usually you don’t write the compatible solution, is with various prefixes, compound properties split, introduceautoprefixer, just write the compatibility range.
• UC access blankOne thing that can definitely happen is that ES6 code is not degraded enough. Other cases may be routing problems (troubleshoot yourself)
• Current development is recommended to introduce as needed, controlled by babel-preset-env to reduce the packaging size.
• But as a result of that, some of the kernels are older, hey, hey, bye,
• So better put the code completely ES5 words!! Remember that some features are not to be messed with, there is no equivalentpolyfillFor example, ES6proxy

Q:this.$set | this.$xxxthis$What does that mean? isjQueryIs there a conflict?

Let me explain.

Vue $has nothing to do with jQuery $, just like javascript and Java.

The $in Vue encapsulates some of Vue’s built-in functions and starts with $. This is not just jQuery.

$in jQuery is a selector!! Get the DOM area, the effect of both is completely inconsistent!

Q:Module not found: Error : Can't resolve 'xxx-loader' in xxxx

The problem is that the webpack configuration file has been changed or the corresponding loader has not been installed

Q: Can a parent component call a child’s method directly?

You can use $refs or $chilren to get the corresponding instance

Q:Error in event handler for "click":"xxx"

Most of this is a problem with the code you wrote. Your event has been triggered. But there is no implementation or variable inside the component, so an event error is thrown.

Solution: Look at the error slowly troubleshooting

Q: What kinds of communication are there?

Basically these are the three most commonly used;

1. Father the son:props
2. Child the parent:emit
3. Brother Communication:

• event bus: is to find an intermediate component to mediate the message
• vuex: information tree

Portal:

• Basic communication
• Vuex

Q: sincelocalStorageandsessionStorageWhy introduce data maintenance when you canvuex!

That’s a good question. The purpose of Vuex is to maintain data communication between peer components with a common state tree;

It is possible for localStorage and sessionStorage to maintain data across pages without being flushed by the browser.

Why even introduce VuEX, personally I think the only reason is “maintainability” and “ease of use” and

How do you understand that?

• Maintainability: Because it is a one-way flow of data, all states are traceable, and data transfers allow for timely distribution of responses
• Ease of use: It makes it more powerful for us to communicate between components without resorting to middleware or other things to communicate between different components

If you’re using LS or SS, you have to manually keep track of your state tables, which is possible, but it’s a lot more code, and it’s not very readable.

Do you need vuEX for every project? The answer is no, this is a nuisance on small projects, and it is usually used on medium projects because there is more data to maintain and communication between peer components is frequent

If you use VUex for a project, remember to combine SS or LS to achieve some state persistence! Why look below!

Q:vuexWhy is the user information stored in the browser (SessionStorage and localStorage)

Because the Store of Vuex cannot be refreshed. The value is stored in the browser’s cache and is fetched again if the user refreshes it.

Q:” Vue + Vue Router + Vuex” or “Express + Vue + mongodb”

Github googled a bunch, and whoever asked these questions, think! Portal :Github

Q: I can Vue I still need to learnjQueryOr nativeJS 么

JQuery is still used by many companies, and there is a lot to learn from the source code. The framework is just to speed up development and improve efficiency, but it is not the basis for your long-term foothold in this industry.

The big guys have to be good at various design patterns and algorithms to write such a great framework.

People at the front need not only width, but also depth to go further.

Q: npm run devPort error!Error: listen EADDRINUSE :::8080

• For my own usewebpackI don’t even need to tell you about the scaffolding;
• Vue-cliThe inside of thewebpackConfiguration:config/index.js

  dev: {
    env: require("./dev.env"),
    port: 8080.// If the port is already occupied by another program on the system. Change me change me!!
    autoOpenBrowser: true.assetsSubDirectory: "static".assetsPublicPath: "/".proxyTable: {
      "/bp-api": {
        target: "http://new.d.st.cn".changeOrigin: true.// pathRewrite: {
        // "^/bp-api": "/"
        // }}},Copy the code

Q: When do you use itv-ifWhat,v-show!

Let’s start with the core differences;

• v-if: DOM area is not generated, no document is inserted, wait for the condition to be true to dynamically insert into the page!
  • Some need to iterate over the array object or value, it is best to use the goods control, wait until the value to handle traversal, otherwise some operation too fast will report an error, such as the data has not been requested!
• v-show: The DOM area is rendered at the same time as the component is rendered, but is simply hidden with CSS
  • For the drop down menu, the collapse menu, these things don’t change very much. This is the best way to use it, and it improves the user experience because it doesn’t result in redrawing the page; DOM manipulation does!

In short: V-show if the DOM structure doesn’t change much, v-if if the data needs to change a lot, or v-if if the layout changes

Q: <template>What is it, an HTML5 tag?

You guessed it,html5 does have one. Portal Can I Use:template

Vue’s template is a little different. It’s not meant to be parsed by the browser. You can think of it as a temporary tag to make it easier for you to write loops, since the template will not be parsed to the browser page, it just acts as a wrapper around the Vue parsing process! Finally, what we see is an internally processed composite DOM structure!

Q: VueSupport similarReactthe{,props}?

The JSX notation is definitely supported, the regular notation is supported, v-bind=”propsObject” will automatically expand

Q: Uncaught ReferenceError : Vue is not defined!

To exclude in order:

• VueIs the correct introduction!
• VueCorrect instantiation!
• VueWith the correct posture (such as you direct a Vue variable! Just didn’t define, specific problem specific analysis)

Q: ERROR in static/js/xxxxxxx.js from UglifyJs

One of the cases I know will be the case is if you introduce js directly into the compressed version of JS (xxx.min.js); Webpack and then enable UglifyJs(compression JS), double compression mostly will report error!!

Solution: Introduce standard uncompressed JS

Q:propsDo not use:(v-bind)Can you pass values?

Yes, but the type passed by default is parsed as a string! If you want to pass another type, the binding is still a binding!!

Q: Uncaught TypeError : Cannot set property xxx which has only a getter

The problem is that you’re going to operate on properties that only allow getters, not setters;

The solution? Use other people’s things to follow other people’s routines, or you can only do their own rich food and clothing!!

Q: Inside of a single componentimport xxx from '@/components/layout/xxx'In the@What the hell!

This is webpack knowledge, so if you see it,

Webpack can configure Aliases (aka path aliases), as anyone who has played Linux or MAC knows

Still as above, will build their own scaffolding do not need me to say, look at vue-CLI inside;

File name: build -> webpack.base.conf.js

 resolve: {
    extensions: [".js".".vue".".json"].// You can ignore the extension name range when importing
    alias: {
      vue$: "vue/dist/vue.esm.js"."@": resolve("src"),  // This is the alias. For example, @ means to start at/SRC!
      "~": resolve("src/components")}},Copy the code

Q: SCSS(SASS)orless.stylusOk!!

All three are preprocessors;

SCSS has been around the longest and can do a lot of things, but if it’s plain nesting, inheritance, mixins.

These three are about the same, will one of the other two superficial use will be basically. But!!!!!

There are some differences in writing:

• scss: is written in directioncssalignment
• sass: In fact, it isscssIt’s just written differently, by indentation
• less: withcssBasic alignment
• stylus: Same, by indent, withpug(Jade)The same

Differences in use environment:

• scssCan userubyornode-sassordart-sasscompile
• lessYou can useless.jsOr the correspondingloaderparsing
• stylusOnly with the help ofloaderParsing, it’s based onnode 的

There is also an up-and-comer, featuring decoupling, plugins! That’s PostCSS, and this is postprocessor! Interested in can go to understand, the above writing can be achieved with the help of plug-ins!

Q:Failed to compile with x errors : This dependency was not found !

Compile error, corresponding dependency not found!

The solution:

• You know the missing module, and you load it in
• If you have a large module installed (e.gaxiosThere is a problem with the submodule (dependency package) in the module. Uninstall and reinstall the whole large module. Because you complete not necessarily useful!

Q:SyntaxError: Unexpected identifier

Syntax error, look at the error message to find the corresponding page to check!

Q: Why minenpmoryarnInstall dependencies are generatedlockFiles? What good are they?!

The lock file is used to unify the version number, which is very useful for team cooperation;

If there is no lock, according to the ^,~ in package.json,

Different people, different time installed out of the version number may not be consistent;

Some packages even have some breaking changes, making it difficult to develop smoothly!

Q: Can components be cached?

Yes, use keep-alive;

However, there is a cost, memory will be more, so mindless cache all components! Let alone good performance, several times, some hardware can not hold, the browser directly crash or jam,

So keep-alive caches are usually just list pages, not so much operations, more result set replacement,

Add a flag bit to the meta component of the route. In combination with v-IF, you can add cache as needed!

Q:package.jsonThe inside of thedependencies 和devDependenciesThe difference!

In fact, if not strictly, there is no special difference; If strict, follow the official understanding;

• dependencies: Stores core code modules that can be accessed online or by businesses, such asvue.vue-router;
• devDependencies: A development module that is relied on in development mode, perhaps just to parse code, escape code, but not to generate additional code into production, such as whatbabel-corethese

How do you install the package to the corresponding dependency?

npm install --save xxxx // dependencies
npm install --save-dev xxxx // devDependencies

I :install, -s :save, -d :save-dev

npm i -S xxxx // npm install --save xxxx
npm i -D xxxx // npm install --save-dev xxxx


Copy the code

Q: the installationchromedriverError!!!!! That’s the right posture.npm i -D chromedriver

Well, great GFW,, solution: specify the domestic source installation is ok

npm install --save-dev chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Q:Vue ,React, AngularWhich is better to study? Which job is easier to find!

Vue belongs to the gradual development, the traditional development transition MVVM mode of small partner,Vue is easy to get started, the learning cost is low, the foundation is good, have the spirit of agonize over and over again, can choose NG5 or React 16;

NG5 requires learning typescript and RXJS, and uses a lot of new things like decorators and back-end injection concepts.

Vue and React are just views, which can be matched with what you like

The writing method of React is biased toward the function writing method, and JSX. The official version has flow, of course, it can also be paired with TS. I have little contact with it, so there is a certain learning cost.

Look for a job better as to which! To tell you the truth, if there is only one framework, it is not a qualified front end;

What somebody else wants is hands-on ability, solve ability!! Technology and treatment are proportional!!

Appearance level and background, educational background, eloquence can add points, but the ability below these conditions you must want some foundation considers these!

Q: I have a complex component that needs to have new and edit functions at the same time, but the fields should remain unchanged

How about field invariance? That is to say, for example, adding and editing at the same time share a data;

One is when the routing changes and the components are rendered the same (without causing the components to be rerendered and destroyed!). , but with different functionality (adding and compiling),

For example, from edit to new,data must be blank and not assigned, waiting for us to assign a value;

One thing that is particularly useful is immutable js;

This thing can simulate the uniqueness of data! Or invariance!

Q:” first screen loading is slow!! How to break! Package file file is larger”

Exclude and confirm in turn:

• Reduce the use of third-party libraries such asjqueyThese can not be done, rarely operate the DOM, and the basic native development to meet
• If it is to introducemomentFor these, WebPack excludes international language packs
• Webpack generally compresses JS, CSS, and can also introduce DLLS if you want to toss around
• The routing component is lazy loaded
• Add route transition and load waiting effect, although can’t solve the root, but at least let people wait for a bit of comfort isn’t it?

Overall, after packaging is generally not too large;

But what if you want to go faster? Server rendering (SSR) is the only way to avoid the browser having to parse templates and directives. Directly return an HTML,.seo,

Vue what do you dospaThe module is loaded lazily

// This is recommended
// One can be aggregated into a module with the same name as webpackChunkName, which is also the current version of the recommended loading pose
const Home = (a)= >
  import(/* webpackChunkName: "HomePage" */ "@/views/home/index.vue");
Copy the code

Q: Vue SPACan’t do optimization (SEO)! Is there a solution

Yes, SSR (server render will do the job for you) because the request comes back as processed HTML

Vue server development framework has such a popular, as follows

Portal: Nuxt. Js

There is also an official program, the SSR Complete Guide

Q: VueYou can writehybird AppYao!

Sure, in both directions.

• codorva + nativescript
• Weex

Q: Can Vue write to the desktop?

Sure, there’s electron and Node-webkit (NW);

I’ve only known electron;

• electron
• Electron -vue: vue-cli Indicates the scaffolding template for the electron

Q: Vue development, also needed in the projectjQuery?

Discussion by case:

1. If the old project is simply introduced Vue to simplify the development, it is still used.
2. Refactoring the project? Or start a new project. No, really. Development ideas are not the same, many of the previous DOM operation can now be basically data-driven implementation, and a small number of forced DOM operation can be done native, and can reduce the packaging volume, speed and fast, why not?

Q:Vue PC(desktop) terminal,M(mobile) terminal, what UI framework is good!

PC: Only two Element UI and iView are recommended

Mobile: Vux or Vant

Q: Can Vue write wechat small program? How to do it

Yes, the community also has a corresponding solution, such as the more popular solution wepy; You can also think of wepy as a kind of scaffolding to make the way you write small programs more similar to the way you write vue with vue-cli,

Portal: wepy

Q:The "scope" attribute for scoped slots replaced by "slot-scope" since 2.5

This problem only occurs when the old project is upgraded to VUe2.5 +. The prompt is that scope is now replaced by slot-scope, but scope can be used temporarily and will be removed later

Q:Vue2.6 List of deprecated features

Updated since 2.6.0. The deprecated syntax for using the slot feature is here

The official recommendation is to use v-slot to call the slot

Q: If you want mock data, ask directlyJson fileWhy not!

Of course not, the browser security mechanism does not allow JS to override its inherent power (NodeJS cannot be simply JS).

If you want to mock data, there is usually a mature scheme portal:

• Mock
• Easy Mock

Vue peripheral library summary

Awesome Vue: A collection of Vue’s most popular libraries!!

conclusion

So far, so many problems have been summarized. Please leave a message if there are any errors, and it will be corrected in time. Thanks for reading