What does the vue.js family bucket include?

Vue.js family bucket includes scaffolding vue-cli, routing vue-router, state management mode vuex, axios, and UI framework. Vue is a JavaScript framework for building user interfaces. It is built based on standard HTML, CSS and JavaScript, and provides a set of declarative and component-based programming models to help developers develop user interfaces efficiently.

The operating system of this tutorial: Windows 10 system, vue version 3.0, Dell G3 computer.

Vue.js family bucket is composed of scaffolding vue-cli, routing vue-router, state management mode vuex, axios, and UI framework. Vue (pronounced /vjuː/, similar to view) is a JavaScript framework for building user interfaces. It is built based on standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model to help developers develop user interfaces efficiently.

1. Project construction tool: vue-cli

vue-cli is also called scaffolding and is officially defined as a standard tool for Vue.js development. Vue-cli is a complete system for rapid development based on Vue.js, which can automatically generate Vue.js webpack project templates. Vue cli provides powerful features for customizing new projects, configuring prototypes, adding plugins and inspecting webpack configurations. @vue/cli 3.x version can quickly create the scaffolding of a new project through the vue create command. It does not need to rely on webpack to build the project like vue 2.x.

Compared with the introduction of scirpt tags, vue-cli scaffolding has the following characteristics:

1) Rich functions

Supports Babel, TypeScript, ESLint, PostCSS, PWA, unit testing and End-to-end testing is supported out of the box.

2) Easy to Expand

Its plug-in system allows the community to build and share reusable solutions based on common needs.

3) No Eject required

Vue CLI is completely configurable, no eject required. This way your project can be kept updated for a long time.

4) Graphical interface on CLI

Create, develop and manage your projects through the supporting graphical interface.

5) Instantly create prototypes

Use a single Vue file to instantly implement new inspirations.

6) Future-proof

Easily produce native ES2015 code for modern browsers, or build your Vue components as native Web Components.

Installation

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2. Routing manager: vue-router

vue-router is the official routing manager launched by Vue. It is mainly used to manage URLs, realize the correspondence between URLs and components, and switch between components through URLs, making it easier to build single-page applications. It mainly has the following features:

1) Nested routing/view table

2) Modular, component-based routing configuration

3) Routing parameters, queries, Wildcard

4) View transition effect based on Vue.js transition system

5) Fine-grained navigation control

6) Links with automatically activated CSS classes

7)HTML5 history mode or hash mode, automatically downgraded in IE9

8)Customized scroll bar behavior

vue Router installation code

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. State management mode: vuex

In some large projects, sometimes we encounter a single page that contains a large number of components and complex data structures, and may be different. Components also affect each other's state, in which case the flow of events in the component tree can quickly become very complex, making debugging extremely difficult. In order to solve this problem, the state management model of Vuex was introduced. Vuex is an implementation library of the state management model. It is mainly used in conjunction with Vue.js in the form of a plug-in, which allows us to manage complex tasks in Vue.js. Component event flow.

vuex installation method

npm install vuex --save

4. axios

##Axios is a promise-based HTTP library. Simply put, it can send get , post request.

Axios Features

1) Create XMLHttpRequests from the browser

2) Create http requests from node.js

3) Support Promise API

4) Intercept requests and responses

5) Convert request data and response data

6) Ability to cancel requests

7) Automatically convert JSON data

8) The client supports defense against XSRF

Installation method

npm install axios

Or directly introduce

5. UI framework: iview, vant, elementUI
iview A set of high-quality UI component libraries based on Vue (divided into Different versions such as mini program and PC version);
vant is a lightweight and reliable mobile Vue component library. It is a set of mobile component libraries based on Vue 2.0 open sourced by Youzan, aiming to be faster and simpler. Develop beautiful and easy-to-use mobile sites based on Vue. 
Ant Design Vue is the Vue implementation of Ant Design, which develops and serves enterprise-level backend products. 
elementUI is based on the Vue 2.0 desktop middle and backend component library. 
The above is the detailed content of What does the vue.js family bucket include?. For more information, please follow other related articles on the PHP Chinese website!