vue.js全家桶包含什么

Vue.js全家桶包含脚手架vue-cli、路由vue-router、状态管理模式vuex、axios、UI框架。Vue是一款用于构建用户界面的JavaScript框架，它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

本教程操作系统：Windows10系统、vue 3.0版本、Dell G3电脑。

Vue.js全家桶由脚手架vue-cli、路由vue-router、状态管理模式vuex、axios、UI框架组成。Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

一、项目构建工具：vue-cli

vue-cli也叫脚手架，官方定义为Vue.js开发的标准工具。Vue-cli是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+webpack的项目模板。Vue cli提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli 3.x版本可以通过vue create命令快速创建一个 新项目的脚手架，不需要像vue 2.x那样借助于webpack来构建项目。

立即学习“前端免费学习笔记（深入）”；

相比scirpt标签引入，vue-cli脚手架具有以下特点：

1)功能丰富

对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

2)易于扩展

它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

3)无需 Eject

Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。

4)CLI 之上的图形化界面

通过配套的图形化界面创建、开发和管理你的项目。

5)即刻创建原型

用单个 Vue 文件即刻实践新的灵感。

6)面向未来

为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

安装

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

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

二、 路由管理器：vue-router

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。主要有以下特点：

1)嵌套的路由/视图表

2)模块化的、基于组件的路由配置

3)路由参数、查询、通配符

4)基于 Vue.js 过渡系统的视图过渡效果

5)细粒度的导航控制

6)带有自动激活的 CSS class 的链接

paascloud商城系统

paascloud商城系统是一款spring cloud + vue + oAuth2.0全家桶，前后端分离的模拟商城，包含有完整的购物流程和后端运营平台，可以实现快速搭建企业级微服务项目。支持微信等三方登录。

下载

7)HTML5 历史模式或 hash 模式，在 IE9 中自动降级

8)自定义的滚动条行为

vue Router安装代码

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

Vue.use(VueRouter)

三、状态管理模式：vuex

在一些大型项目中，有时我们会遇到单页面中包含着大量的组件及复杂的数据结构，而且可能各组件还会互相影响各自的状态，在这种情况下组件树中的事件流会很快变得非常复杂，也使调试变得异常困难。为了解决这一问题，引入了Vuex这种状态管理模式，Vuex是状态管理模式的一种实现库，主要以插件的形式和Vue.js进行配合使用，能够使我们在Vue.js中管理复杂的组件事件流。

vuex安装方法

npm install vuex --save

四、axios

Axios是一个基于promise的HTTP库，简单的讲就是可以发送get、post请求。

Axios特性

1)从浏览器中创建 XMLHttpRequests

2)从 node.js 创建 http 请求

3)支持 Promise API

4)拦截请求和响应

5)转换请求数据和响应数据

6)能够取消请求

7)自动转换 JSON 数据

8)客户端支持防御 XSRF

安装方法

npm install axios

或者直接引入

npm install axios

五、 UI框架：iview、vant、elementUI

iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本);

vant 轻量、可靠的移动端 Vue 组件库，是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库，旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

elementUI 是基于 Vue 2.0 桌面端中后台组件库。