vue.js全家桶包含什么

胡贝肯原创: 2023-06-19 15:33:42908浏览

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 的链接

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安装方法