vue2.6入门相关技术总览

最新推荐文章于 2023-08-20 16:37:53 发布
最新推荐文章于 2023-08-20 16:37:53 发布
阅读量452 收藏
点赞数 1
分类专栏： 前端 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40251892/article/details/107032795
版权

我的个人网站 RyzeYang.

入门vue的一些知识点总览，如Babel,css预处理器,ES6，Eslint,vuex,vue router,mock，Elementui,v-charts,axios等
20201202082043

目录

因为最近项目需要，领导让我负责。。去用vue搭建一个前端项目出来。（心里活动：纳尼(ÒωÓױ)！ 这是部门里第一个用vue搭建的前端项目啊！------》算了，好像vue挺好玩的 去试试）
接触的知识点特别多（一时整理不过来，现在趁着五一好好整理！(＾－＾)V ） 对我这个前端萌新来说是很有挑战的。。(虽然之前负责的项目模块里也有前端的页面需要我去做。。但是不是纯前端的呀 ┭┮﹏┭┮ ) 毕竟我是个后端开发工程师呀！
同时感受下了这个需求文档和UI设计师改设计出来的最终版有所出入所带来的暴击 。。。

学习历程

在搭建项目之前 我先去vue官网了解了一下vue的简单使用，如vue的模板语法 在一个普通的HTML页面中引入并使用它（这会还觉得确实容易上手。。），接着就去百度看看vue相关的项目用到了那些技术（vue全家桶：vue-cli + vue2.0 + vuex + vue-router + axios + element-ui ）一下子觉得信息量爆炸。。（X_X） 后面在同事的推荐下去看了这个 vue-element-admin 开源项目，被虐得体无完肤， 又简单了解到ESlint,Webpack,Babel,less,Mock,ES6语法,Commit规范和 vscode 的各种强力插件如Vetur等, 幸运的是经过一周多的学习对这些东西也比较熟悉了，，然后发现vue3.0Beata版出来了，，(oT-T)尸

下面进入正题！

在了解了vue的基础使用后，我决定尝试着用vue cli搭建一个项目出来。

Vue Cli

官方文档参考：https://cli.vuejs.org/zh/guide/

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
特点：

  1. 通过 @vue/cli 搭建交互式的项目脚手架。
  2. 一个丰富的官方插件集合，集成了前端生态中最好的工具。

安装

npm install -g @vue/cli
# Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
# OR
yarn global add @vue/cli

使用

vue create vue-test

选择manual的话会出现下图，需要你手动去添加需要的功能
QQ浏览器截图20200503161156

下面将逐一简单说下图中的插件

Babel

官方文档参考：https://www.babeljs.cn/docs/

介绍

QQ浏览器截图20200503180137

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

Babel是Vue-Cli脚手架中的默认选项，使用了之后就会在项目目录中生成一个babel.config.js 的默认文件，可以帮我们预设插件（vue-element-admin项目中该文件也是默认生成的，于是我也没有改动这个文件）

Typescript

菜鸟教程 Typescript文档

介绍

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

博主在项目中并没有使用到这个Typescript，但是有在vue中使用到ES6的一些语法，这里推荐下 阮一峰大神 的 ES6入门教程

PWA (Progressive Web App)

Mozilla 开发者社区(MDN) PWA文档

介绍

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

个人理解这应该是类似小程序，快应用等不用安装到手机上就可以使用的程序

Vue Router

官方文档 https://router.vuejs.org/zh/

简单来说它是个前端路由，控制页面的跳转
这部分的知识点在了解了vue的组件之后会更好理解

Vuex

官方文档 https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

应用场景

  1. 多个视图组件，包括父子组件，兄弟组件之间的状态共享
  2. 不同视图组件的行为需要变更同一个状态

CSS Pre-processors

可以选择Sass,Scss,Less,Stylus这四种css预处理器，博主使用的博客主题里用到的是stylus，所以对这个stylus是比较熟悉的，项目中也是使用它。

Linter / Formatter

选择后会在文件夹中生成 .eslintrc.js 代码规范文件。
可以参考 饿了么团队Eslint

Unit Testing 单元测试

Jest 是facebook推出的一款测试框架，还没实践。。

E2E Testing 端对端测试

Nightwatch 一个自动化测试方案，还没实践。。

其他工具的使用axios ,element-ui ,v-charts ,Webpack ,Mock和EasyMock等

  1. axios 中文文档
    axios对vue框架进行整合 vue-axios
    它是一个非常好用的http客户端！

    Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    promise是异步编程的一种解决方案，是ES6语法中的一员.

  2. element-ui 官方文档
    和layui这些前端框架一样，可以提高开发效率！

    网站快速成型工具
    Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

  3. 配合vue使用的图表组件 v-charts

    在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

  4. Webpack
    官方文档

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

    其中 __dirname 是Node.js中的全局变量，表示当前文件所在的目录。
    Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换，所以在使用stylus时也会装相应的loader，在vue中使用这个svg图片也需要相应的配置，这些配置需要在vue.config.js中配置(这个文件需要手动创建)，跨域的问题也要在这里进行配置。

  5. mock
    官方文档

    生成随机数据，拦截 Ajax 请求

    正如官网所说的，它是一个模拟数据生成器，拦截ajax请求意味着你在浏览器的调试窗口是看不到它发出去的请求，所以这个对我们模拟跨域问题不大友好，不过现在又有了更方便的 EasyMock
    EasyMock文档 https://easy-mock.com/docs
    github地址： https://github.com/easy-mock/easy-mock
    （注意版本!）
    QQ浏览器截图20200504162813

学习过程中这个API和文档密不可分，如Vue.js文档 和API 可以先大概浏览下，有问题的时候可以针对性地查查api ，找找解决办法
QQ浏览器截图20200504122318

以上就是博主最近了解到的一些知识点，希望对你有所帮助。
看书应该是最系统，最快的学习方法了。
书籍推荐

Vue.js权威指南
vue2实践揭秘

Java4ye
关注
专栏目录
VUE相关技术
爱上编程已很久
08-01 344
VUE相关技术
收集vue配合技术
around_primary的博客
03-19 1006
vue全家桶，vue配合axios,vuex，vue-cli以及vue-cli等。
vue相关技术
weixin_30565199的博客
04-01 322
　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 　　element：基于vuejs2.0的ui组件库。 　　vue-router：一般单页面应用spa都要用到的前端路由。 　　vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 转载于:https://www.cnblogs.com/jianxian/p/1063...
vue相关技术分享啊
04-02
vue的各种姿势点总结，perfect易用 已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！ 灵活 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 高效 16kb min+gzip 的运行大小 超快虚拟 DOM 最省心的优化
vue-cli 工程目录结构介绍
学习记录
10-17 8650
请说出vue-cli工程中每个文件夹和文件的用处 注意：此问题千万不要只解释一下 src 文件夹下每个文件夹的作用。vue-cli目录结构：vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config ...
vue2.6_sourceCodeLearn:vue2.6源码学习-vue source code
03-24
在这个“vue2.6_sourceCodeLearn”项目中，我们将深入学习Vue 2.6的源代码，理解其核心机制和设计理念。 首先，Vue的核心在于它的响应式系统。在Vue中，数据模型是响应式的，当数据发生变化时，视图会自动更新。这...
vue2.6+webpack5+typescript
09-07
在这个“vue2.6+webpack5+typescript”环境中，我们将探讨如何将这三个强大的技术结合在一起，创建一个高效的前端开发环境。 1. **Vue 2.6**: Vue 2.6 是 Vue.js 的一个重要版本，它带来了许多改进和新特性。例如，...
github上Vue2.6源码
03-19
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，用于构建用户界面。...在GitHub上，你可以直接查看Vue的官方仓库，参与到社区的讨论和贡献中，进一步提升自己的技术素养。
vue插槽的使用，以及vue2.6之前和vue2.6之后（包含vue3.x）的区别
丑小鸭变黑天鹅的博客
12-01 1602
vue插槽的使用，以及vue2.6之前和vue2.6之后（包含vue3.x）的区别一、插槽的作用二、插槽的使用以及区别1、插槽内容2、编译作用域3、备用内容4、具名插槽5、作用域插槽6、独占默认插槽的缩写语法7、解构插槽 Prop8、动态插槽名9、具名插槽的缩写10、官方文档提供的其它示例 一、插槽的作用 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 插槽可以实现组件的扩展性 ， 抽取共性， 保留不同 二、插槽
详解vue 2.6 中 slot 的新用法
12-04
在Vue 2.6中，插槽（slot）的语法得到了显著简化，使得开发者能够更加高效地利用组件的可重用性和可读性。插槽是Vue组件间内容分发的关键机制，允许我们以非传统父子关系的方式组合组件，提供了一个内容插入到组件...
Vue 2.6版本基础知识概要(一)
weixin_30394981的博客
03-18 186
挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app') VueComponent.$mount 封装组件 <template> <div id="app"> Hello Vue </div> </template> <s...
这9种Vue技术你掌握了吗？不信你全知道
JNPF快速开发平台的博客
08-18 741
现在，Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是，我们完成的某些解决方案可能未遵循最佳做法。好吧，让我们看一下那些必备的Vue技术。 1. 函数组件 函数组件是无状态的，没有生命周期或方法，因此无法实例化 创建一个函数组件非常容易，你需要做的就是在SFC中添加一个functional: true属性，或者在模板中添加functional。由于它像函数一样轻巧，没有实例引用，所以渲染性能提高了不少。 函数组件依赖于上下文，并随着其中给定的数据而突...
Vue技术整理
qq_43054241的博客
08-26 213
vue.js的核心是一个允许采用简洁的模板语法来声明地将数据渲染进dom系统 {{ message }} var app = new Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ } }) 绑定元素特性 鼠标悬停几秒钟查看此处动态绑定的提示信息！ var app2 = new Vue({ el: ‘#app-2’, ...
Vue的基础技术
weixin_64784735的博客
06-25 933
Vue的基础技术
Vue的核心技术
最新发布
m0_65345082的博客
08-20 496
浅学Vue
VUE实用技术点
happy81997的博客
06-15 1379
路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个栗子🌰，如果这样写，加载的时候会全部都加载进来。 所以，应该避免上面的写法，尽量使用懒加载。路由的懒加载可以分为以下三种写法。Vue异步组件es6的importwebpack提供的require.ensure() 2、异步组件 异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载是一个概念。以前是这么引入组件的 如果不是一开始就要加载的组件，我们可以使用组件懒加载.
Vue技术总结
weixin_45411959的博客
11-23 489
Vue技术总结 事件对象$event $event 常见用法: # 启用一个事件 <div @click="clickme($event)">click me</div> # 在方法中接收事件对象 clickme(e){ console.log(e); } 键盘事件 @keydown.enter 应用场景 输完密码回车提交表单 过滤器 超过长度为5的截断 定义(尽量都定义成为全局的) Vue.filter(“cut”,function(str){ return str.
听说你熟练使用Vue.js？这9种Vue技术你掌握了吗？
前端全栈开发者
08-21 1530
现在，Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是，我们完成的某些解决方案可能未遵循最佳做法。好吧，让我们看一下那些必备的Vue技术。
前端进阶
weixin_44273311的博客
08-21 183
现在，Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是，我们完成的某些解决方案可能未遵循最佳做法。好吧，让我们看一下那些必备的Vue技术。 1. 函数组件 函数组件 是无状态的，没有生命周期或方法，因此无法实例化 创建一个函数组件非常容易，你需要做的就是在SFC中添加一个 functional: true 属性，或者在模板中添加 functional。由于它像函数一样轻巧，没有实例引用，所以渲染性能提高了不少。 函数组件依赖于上下文，并随着其中给定的数据而突
Vue 2.6新slot用法详解：提升组件复用与可读性
在Vue 2.6版本中，插槽（slot）功能得到了显著提升，这使得组件设计更加灵活，有助于提高代码的可复用性和可读性。在过去的版本中，插槽主要用于处理组件内的自定义内容布局，但2.6更新引入了一些新特性。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值