ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue全家桶都包括哪些 vue全家桶都有什么 vue全家桶详细介绍

2021-10-28 12:31:48  阅读:189  来源: 互联网

标签:vue cli 哪些 全家 js Vue 组件 Vuex



vue全家桶都有什么

全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。
注:此文章主要讲解vue-cli脚手架开发方式,主要介绍各插件安装方法及其功能特点,不介绍各插件的具体使用方式,具体使用方式详见其他详细介绍文章。

一、vue-cli

vue-cli也叫脚手架,官方定义为Vue.js 开发的标准工具!相比scirpt标签引入,脚手架具有如下特点:
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
 

 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
二、vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

1)嵌套的路由/视图表
2)模块化的、基于组件的路由配置
3)路由参数、查询、通配符
4)基于 Vue.js 过渡系统的视图过渡效果
5)细粒度的导航控制
6)带有自动激活的 CSS class 的链接
7)HTML5 历史模式或 hash 模式,在 IE9 中自动降级
8)自定义的滚动条行为

vueRouter 安装

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

Vue.use(VueRouter)
//具体使用方法详见另一篇文章,路由使用方法
 

 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
三、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下我应该使用 Vuex?
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

安装方法

npm install vuex --save
 

 

  • 1
四、Axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
1)从浏览器中创建 XMLHttpRequests
2)从 node.js 创建 http 请求
3)支持 Promise API
4)拦截请求和响应
5)转换请求数据和响应数据
6)取消请求
7)自动转换 JSON 数据
8)客户端支持防御 XSRF

安装方法

 npm install axios
 

 

  • 1
五、搭配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 桌面端中后台组件库。

 

 

标签:vue,cli,哪些,全家,js,Vue,组件,Vuex
来源: https://www.cnblogs.com/java9898/p/15474975.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有