Vue2.0 Summary Summary

Recently learned Vue, today I just wrote a study notes, summarize the previous mistakes.

The current development model of VUE has two main types:

1. Direct page level development, Script directly introduces Vue

2. Engineering Sexual development, WebPack + Loader or directly use Scaffolding Tools Vue-CLI, files inside are configured

WebPack can configure, configure multi-file portal, multi-page development

second VUE development, combined with WebPack after packing files, how to solve this problem?

WebPack code split: code-spliting

2. Extract public (Such as Extraction CSS, JS)

3. Pre-rendering: Using the prerender-spa-plugin plugin

4. Backstage —- On the compression, Gzip (will Very useful)


1.

1, a Asynchronous Loading Component: Require.ensure

1. [Vue-Warn]: Missing Required Prop: “To” (Found In Component )
This error is

less than or a write wrong, correct way of writing is:

When the routing is in a string stitching, TO is binded as an attribute


2. Port conflict error: need to change port

Of course, the WebPack in Vue2.0 will now be corrected according to your port number, increment from the back of 8080, and does not have a port number conflict, in Vue1.0
3. [Vue-Warn]: Unknown Custom Element:

– DID You Register THE Component Correctiy?


Error 1: Vue-Router introduced No USE ()
 Import Vue from 'Vue' Import Vuerouter from 'Vue-Router' Vue.use (Vuerouter);   
After generating routing instance, there is no route to our Vue instance above


 Const Router = New Vuerouter ({Mode: 'History', // Switching Path mode, becomes the History mode, otherwise the path is / # / home scrollbehavior: () => ({// Rolling the rolling behavior, do not add this default will remember the original The position of the scroll bar Y: 0}), // Note the name routes}); new Vue ({/ * 4. Finally hang on * / router, el: '#app', render: h => h (App)});   


This error is _VUEX2 .default.Store is not a constructor, because we need to use the Actions, Mutations module, eventually exported when we use Vuex.At the export time, the Store in New Vuex.Store is lower-written. It must be capitalized here, it is equivalent to us in using the constructor (class), the first letter should be capitalized

 Import Mutational from './mutations.js' Import ActionS from './Actions.js' Export Default New Vuex.Store ({//vue.stroe () Scribey Mutules: {// Note Mutations Export is a module mutations}, actions});   
5 Moudel not found:. Error: Can not resolve “style” in ‘D: \ vue-demo’


In Vue1.0, when configuring CSS files in WebPack.config.js


Module: {loaders: [ {Test: / \. CSS $ /, Loader: ‘Style! CSS’}]}
  In Vue2.0, CSS is configured in WebPack.config.js When the file is written, it must be written. You cannot be as short as Vue1.0  
Module: {Rules: [// This is changed to Rules {Test: / \ .css $ /, loader: ‘StyLe-loader! css-loader ‘// must write all, not as short as Vue1.0}]}


6. Communication between components from 1.0 Errors caused by transition to 2.0:
 VUE 1.0 Implementing the communication of parent child components -> By PROPS attribute -> and subcomponents can change the data of the parent component through SYNC synchronization   When it is not allowed to make the parent data directly to the parent data, it will be done directly, and this method is re-drop, 
When the child is trying to change the data of the parent component, it will Error.


$ EMIT () – Single Event Management


The problem that is often encountered is to find $ EMIT ( ) Or $ on (), then you need to prepare a file in a file.js

In the file, it is required: var out = new Vue ();

This this The data in the document must be guided to use: Export Default OEVENT

2. The reference between the object: (recommended)


Vue1.0 transmission data: MSG: ‘Welcome’ -> Passage


Vue 2.0 defines data directly into the form of object JSON, so that the data transmitted to the child is the properties of the object, ie msg.title

Such a child-level modification of the parent’s data, modified a property of this object msg.title


Msg: {Title: ‘Welcome’} msg.title


7. The state management component for use vuex 🙁 increase / decrease, show / hide)

8.axios not currently use, because there is no axios install this method
 When using axios It can be used in this way:   
1. Import AXIOS into file

Import AXIOS from ‘Axios’


2. Plate the AXIOS to the Vue instance, which can be directly passed through this. $ Https.get / post using

in Main HTTP = AXIOS
   
. $ HTTP in other components:


. .get (‘data.txt’). Then ((res. => {console.log (res. => {Console.log (err);};


10. Element.ui Head Click event


After using Element.ui, @ click = “” Unable to add a click event such as the element, The correct way to write should be @ click.native = “”

11.WebPack 2.0 plug-in configuration needs to be configured in Plugins, can not be configured inside Rules
 The above is this article All of the content, I hope to help everyone's learning, I hope everyone will support Tumi Clouds.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment