网站开发前的准备,入侵网站被判多少年,代理公司注册需要注意什么,中天建设集团有限公司总部在哪里文章目录 概述核心Vue.Js浏览器开发插件vue-devtools项目构建工具#xff1a;vue-cli路由管理器 #xff1a; vue-Router状态管理模式#xff1a;vuex网络请求库#xff1a;AxiosUI框架#xff1a; iview、vant、elementUI打包工具#xff1a; webpack来源 概述
Vue全家… 文章目录 概述核心Vue.Js浏览器开发插件vue-devtools项目构建工具vue-cli路由管理器 vue-Router状态管理模式vuex网络请求库AxiosUI框架 iview、vant、elementUI打包工具 webpack来源 概述
Vue全家桶一般来说包括主体Vue.Js、开发插件vue-devtools、项目构建工具vue-cli、路由管理器vue-Router、状态管理模式vuex、网络请求库Axios、ui框架、打包工具webpack接下来开始一一介绍。
核心Vue.Js
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
详情参阅待补充
浏览器开发插件vue-devtools
vue-devtools是一款基于chrome游览器的插件可以用于调试vue应用也可以用来辅助我们找到各页面对应的Vue.js文件路径这将极大地提高我们的开发和调试效率。
详情参阅待补充
项目构建工具vue-cli
Vue.jswebpack的项目模板。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中管理复杂的组件事件流。
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或直接引用
pre classbrush:html;toolbar:false;npm install axios/pre详情参阅待补充
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 桌面端中后台组件库。
详情参阅待补充
打包工具 webpack
webpack是一个模块打包工具可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起实现自动化构建给前端开发人员带来了极大的便利。安装方式如下
npm install webpack -g详情参阅待补充
来源
vue-devtools-简介、下载、安装、配置、使用 Vue.js - 渐进式 JavaScript 框架 | Vue.js 【vue】vue全家桶是什么
