What is the whole vue bucket
Family Bucket, as the name suggests, is necessary plug-ins and frameworks necessary for developing a complete medium and large single-page application project.
Note: This article mainly explains the development method of vue-cli scaffolding, mainly introduces the installation methods and functional characteristics of each plug-in. It does not introduce the specific usage methods of each plug-in. See other detailed introduction articles for details on the specific usage methods.
1. vue-cli
vue-cli is also called scaffolding, officially defined as a standard tool for development! Compared with the introduction of SCIRPT tags, scaffolding has the following characteristics:
1) Rich features
Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, unit testing, and End-to-end testing.
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 without eject. This way your project can be updated for a long time.
4) Graphical interface above CLI
Create, develop and manage your projects with a supporting graphical interface.
5) Create a prototype immediately
Practice new inspiration instantly with a single Vue file.
6) For the future
Easily produce native ES2015 code for modern browsers, or build your Vue components into native Web Components components.
Install
npm install -g @vue/cli
# OR
yarn global add @vue/cli
//Create a project after the installation is completed. Vue ui is built graphically, which is relatively simple (recommended)
vue create my-project
# OR
vue ui
2. vueRouter
Vue Router is the official router manager. It is deeply integrated with the core, making it easy to build single-page applications. The included functions are:
1) Nested routes/view tables
2) Modular, component-based routing configuration
3) Routing parameters, query, wildcard characters
4) View transition effect based on transition system
5) Fine-grained navigation control
6) Links with automatic activation of CSS class
7) HTML5 history mode or hash mode will automatically downgrade in IE9
8) Custom scrollbar behavior
vueRouter installation
npm install vue-router
//Introduced in mainjs after installation
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// See another article for details on the usage method, routing usage method
3. vuex
Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules. Vuex is also integrated into Vue's official debugging tool devtools extension, providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export.
Under what circumstances should I use Vuex?
Vuex can help us manage shared state and comes with more concepts and frameworks. This requires a trade-off between short-term and long-term benefits.
If you are not planning to develop large single page applications, using Vuex can be tedious and redundant. It's true - if your application is simple enough, you'd better not use Vuex. A simple store mode is enough for you. However, if you need to build a medium-to-large single-page application, you will most likely consider how to better manage state outside of the component, and Vuex will be a natural choice.
Installation method
npm install vuex --save
IV. Axios
Axios is a promise-based HTTP library that can be used in browsers and .
characteristic
1) Create XMLHttpRequests from the browser
2) Create http request from
3) Support Promise API
4) Intercept requests and responses
5) Convert request data and response data
6) Cancel the request
7) Automatically convert JSON data
8) Client supports defense XSRF
Installation method
npm install axios
5. Match UI frameworks such as: iview, vant, elementUI
iviewA set of high-quality UI component library based on Vue (divided into different versions such as mini programs and PC);
vantThe lightweight and reliable mobile Vue component library is a set of Vue 2.0-based mobile component library that Youzan open source, aiming to develop beautiful and easy-to-use mobile sites based on Vue faster and easier.
Ant Design VueIt is an implementation of Vue from Ant Design, developing and serving enterprise-level backend products.
elementUIIt is based on the Vue 2.0 desktop mid-to-backend component library.