Vue.js 2.0, fourth day day04

# # One, modular development

# # 1. Vue-router Modular

CNPM Install Vue-router-s

# # # # 1.1 Edit Main.js

# # # # 1.2 Edit App.vue

# # # # 1.3 Edit Router.config.js

# # 2. Axios Modular

CNPM Install Axios-s

There are two ways to use Axios:

Method 1: Introduce Axios in each component

Method 2: Introduce Axios globally in main.js and add it to the Vue prototype

# # 3. Adding events to custom components

# # II, Elment UI

# # 1. Brief introduction

Element UI is hungry? The team provides a set of Vue2.0-based component libraries that can quickly build a website to improve development efficiency

Elementui PC Side

Mintui Mobile End

Website (http://element.eleme.io/)

# # 2. Get started quickly

# # # 2.1 Installing the Elment UI

CNPM Install Element-ui-s

# # # 2.2 Introduction and use of components in Main.js

Import Elementui from ' Element-ui '

Import ' element-ui/lib/theme-default/index.css '//The style file needs to be introduced separately

Vue.use (Elementui);

This approach introduces all the components in the Elementui

# # # # 2.3 Add loader in Webpack.config.js

CSS styles and font icons need to be loaded by the corresponding loader, so style-loader, Css-loader

There is no Style-loader module by default, so it needs to be installed separately

CNPM Install Style-loader--save-dev

# # # 2.4 Using Components

# # 2.5 using Less

Installs loader, requires two: less, less-loader

CNPM Install less less-loader-d

Add loader to Webpack.config.js

# # 3. Introduce groups on demand

# # # 3.1 Installation Babel-plugin-component

CNPM Install babel-plugin-component-d

# # # 3.2 Configure the. babelrc file

"Plugins": [["Component", [

{

"LibraryName": "Element-ui",

"Stylelibraryname": "Theme-default"

}

]]]

# # 3.3 Introduces only the plugins needed

# # III, custom Global components (plugins)

Global component (Plug-in): refers to the ability to use Vue.use () for global ingestion in main.js, which can then be used in other components, such as Vue-router

Import vuerouter from ' Vue-router '

Vue.use (Vuerouter);

Common components (plug-ins): To be introduced every time you use, such as Axios

Import Axios from ' Axios '

# # Four, Vuex

# # 1. Brief introduction

Vuex is a state management model developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable manner with appropriate rules.

Simply put, the centralized management of data, similar to the Redux in react, is a flux-based front-end state management framework

# # 2. Basic usage

# # # 2.1 Installation Vuex

CNPM Install Vuex-s

# # # # 2.2 Create a Store.js file, import and configure the store in Main.js. Options

# # # # 2.3 Edit Store.js file

The core of Vuex is the store (warehouse), which is the equivalent of a container, a store instance that contains the following properties:

State defines attributes (status, data)

Getters used to get properties

Actions define methods (actions)

Commit commit changes, the only way to modify the data is to explicitly commit the mutations

Mutations definition changes

Note: You cannot modify the data directly, you must explicitly commit the change in order to track changes to the state

# # # # 2.4 Edit App.vue

There are two ways to access the store object in a subcomponent:

Mode 1: Through this. $store access

Mode 2: Through Mapstate, mapgetters, mapactions Access, Vuex provides two methods:

Mapstate Get State

Mapgetters Get getters

Mapactions Get actions

# # 3. Sub-modular Organization Vuex

|-src

|-store

|-index.js

|-getters.js

|-actions.js

|-mutations.js

|-modules//divided into multiple modules, each module can have its own state, getters, actions, mutations

|-user.js

|-cart.js

|-goods.js

|....

This article is from the "12392007" blog, please be sure to keep this source http://12402007.blog.51cto.com/12392007/1951081

Vue.js 2.0, fourth day day04