vue3公司自用项目实战入门(vue3+router4+antdv+pinia实现)

2023-01-02
阅读 34 分钟
3.4k
一.为什么学typescriptvar三大框架都是用ts写的,做个类比,如果你不知道阿拉伯数字和加减法,怎么解应用题?同理不会ts如何使用vue开发工作项目?二.开发环境准备1.安装node,[链接],下载安装,一路默认下一步 ,输入node -v显示版本成功2.安装ts,npm install -g typescript,输入tsc -v显示版本 说明成功3.安装vscode [...
封面图

004 11个年头之后我开始退出了编程开发

2021-07-24
阅读 4 分钟
1.2k
导读: 这篇文章成文于 2017.03.13 13:33:40,当时的情形是,感觉老东家(业界最好的培训机构,离开的时候公司风头正劲)会出问题,所以离开了之前培训机构,然后自己创立了一家新公司,运行大概半年左右,然后老东家果然出现了很严重的危机资不抵债,而这个时候,而我新创立的公司也已经走上正轨,产品很成熟,能够很稳...
封面图

React实战—学习必经之路-JSX语法(2)

2019-11-02
阅读 6 分钟
2.4k
React必修技能JSX 本篇我们来了解React的JSX语法,在此之前,我们先安装React。 这里需要注意两点: 1.第一点记得安装node,地址:[链接] 使用lts版本。 2.安装脚手架,地址:[链接]。 步骤 1.安装脚手架 {代码...} 2.构建项目 {代码...} 3.启动项目 输入 {代码...} 看到界面,建立样板项目完成。 注意 1.npm 有时候慢,...

React实战-为什么需要组件化(1)

2019-10-09
阅读 9 分钟
2.2k
为什么需要组件化? 1.web的发展因为HTML CSS Javascript分工造成了协作,所以需要标准和接口,所以需要组件化。 2.追求效率,重复使用。 怎么实现复用? 我们总不能把同事的代码拷贝过来,拷贝css,拷贝js,最后改里面文字。这样也忒费劲了,而且不可持续化。接下来我们就说下怎么组件化。我们先不用react。先说原生。 ...

React实战—为什么会出现React(0)

2019-10-04
阅读 6 分钟
2.7k
最开的网页只有文字,也就html部分,随着互联网发展,网页内容的丰富多彩,网页不仅仅限于浏览,而是需要互动。为解决这个问题,先后出现了js和css。

Vue实战—项目的优化(完结篇)

2019-10-04
阅读 2 分钟
2.7k
我们从零开始用vue搭建了外卖项目,对vue也有了更进一步的了解,我们从点菜,评价,商家三个模块逐步实现,我们来回顾一下以往模块: 模块回顾 点菜模块: 评价模块: 商家模块: 模块优化 我们现在需要更进一步完善我们的项目,现在有一个这样的需求: 当我们在点菜栏目下选择了对应产品,然后又浏览其他项目,此时如果...

Vue实战—如何实现商家页面(15)

2019-09-15
阅读 8 分钟
2.5k
这篇我们来实现商家页面 搭建文件结构 现在我们需要来搭建项目的html模板: {代码...} 我们通过vue的特殊特性ref引用了DOM元素seller类。以便我们用BScroll。 address-wrapper类用来存放商家地址,与电话图标。 pics-list类用来配置商家的照片。 safety-wrapper类来配置食品安全档案。 delivery-wrapper类配置配送服务。...

Vue实战—如何实现商品评价栏目(14)

2019-09-08
阅读 10 分钟
3.1k
我们先来设置一个ratings容器,还是熟悉的老情况,ratings-wrapper的高度可能会超过ratings,这时候我们肯定会让ratings内出现滚动条的,ref也是老朋友了,配合Bscroll实现ratings-wrapper的滚动。

Vue实战—实现商品详情页的评价列表(13)

2019-09-04
阅读 5 分钟
4k
上篇我们实现商品的详情页,本篇我们来实现商品详情页的评价列表。 必要的数据 这里咱们举一个数据的例子,明明白白地了解这些数据是如何绑定到模板中的。 数据来自于Foods父组件,当我们选中商品,跳转到商品详情页,那么就需要依赖父组件中的商品数据,在商品详情页面展示评论,当然也可能没有如下“rating”数据。那我...

Vue实战—实现商品详情页(12)

2019-08-31
阅读 8 分钟
12k
这篇我们来实现商品详情页面: 在首页点击某一商品会展示商品的详细信息。如下图所示: 创建good组件 创建一个组件 good transition 来定义页面展示的形式; 使用v-show与变量showFlag来控制显示与隐藏,ref配合BScroll控制页面的滑动; 现在结构内出现的数据的引用我们在script内进行处理。 <template> <trans...

Vue实战—购物车详情页面的实现(11)

2019-08-17
阅读 11 分钟
6.6k
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用。 搭出购物车结构 我们将购物车底部构建出...

Vue实战—商品分类菜单数量提示(10)

2019-07-25
阅读 8 分钟
4.5k
如上所示,这篇我们将商品分类菜单显示数量的提示完善,是软件更加易于使用。 好先让我回顾一下上节课的内容,Goods组件,数量提示功能最终需要在Goods组件内显示。 {代码...} 注意methods方法中的calculateCount函数实现计算个数,数量来自于增减组件内Cartcontrol。 {代码...} 以上是spus数据 Cartcontrol组件控制商品...

Vue实战—商品控件与购物车联动(9)

2019-07-20
阅读 15 分钟
3.2k
本篇我们将构建商品控件与购物车联动。 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写。 {代码...} Shopcart组件是Goods组件的子组件,在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods. 请求数据,声明方法与计算属性 {代...

Vue实战-菜单栏,商品展示数据交互(8)

2019-07-13
阅读 3 分钟
4.1k
上篇我们将菜单栏,商品展示结构完成,本次我们为这两个部分接入数据。 菜单栏接入数据 导入组件,定义需要的数据格式 {代码...} 通过created钩子发起请求获取数据 之前我们说过在created钩子,mounted钩子内可以发起请求,请求需要的数据。本次我们在created钩子内发起get请求,获取数据 {代码...} 注意$nextTick()用法...

Vue实战-商品展示切图(7)

2019-06-22
阅读 7 分钟
5k
上次我们通过设计评价组件这个过程,了解到了组件设计中的良好的习惯,比如,文件夹如何支撑组件,图片,组件路径的存放于设置。 本篇我们将继续推进外卖项目—商品页的展示。 如图所示,我们可以把商品也面分为两大部分: 左侧“菜单栏”; 右侧商品展示; goods为当前商品页面的根元素。 {代码...} 细化左侧菜单栏 我们先...

Vue实战—评价组件的设计与实现(6)

2019-06-19
阅读 10 分钟
6.4k
在上篇文章我们将项目头部模块进行了编写与数据渲染。 本篇文章我们进一步深入项目设计评价组件。 分析页面 如图所示,点菜,评价,商家,为导航,我们点击评价的时候,直接跳转评价页面。 评价页面由商家评分一栏,评论列表构成,评论列表支持:全部,有图,点评三种筛选。 综上我们现在开始设计评论组件: 建立组件文...

Vue实战-头部模块编写(5)

2019-06-18
阅读 3 分钟
2.9k
通过上篇我们了解到了vue可以通过axios发送前端请求。 我们知道的在发送请求可以在creted()钩子内,也可以在mounted()钩子内。 本篇我们通过头部模块的编写,将请求到的数据渲染到模块内。 当然我们先要准备静态页面: 01.分析制作静态页面 如图所示,我们可以将整个一个头部模块分为4个部分: · 顶部通栏:返回,搜...

Vue实战—项目数据交互-axios(4)

2019-06-17
阅读 1 分钟
3.7k
1.axios地址 [链接] 2.安装 {代码...} 3.使用 1.用在哪? {代码...} 2.什么时候用? {代码...} 3.怎么用 数据从哪里来: 1.美团API接口 , {代码...} 2.自己搭建线上服务器数据 {代码...} 3.搭建本地模拟数据 {代码...} 结论:为了工作使用1,为了灵活性使用3,自己有现成的服务器或空间,从2、3中选的话,选择2 我们使...

Vue实战—路由轻松设置vue-router(3)

2019-06-15
阅读 2 分钟
8.4k
上篇我们说了vue项目的目录设计,本篇我们来学习一下vue路由。 路由的作用: 在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。 文档地址: {代码...} 安装: 通过node.js安装;npm install vue-router 但是一般情况下在node中安装vue项目的时候根据提示选择安装vue-r...

ES6 —项目综合实战(完结篇)

2019-06-09
阅读 10 分钟
7.9k
上一篇通过TodoList的练习,目的是为了让大家理解ES6中各种新特性的实际用途。 最好的学习方法就是实践,所以这节课结合实际项目,来更好的理解和掌握ES6的用途和使用场景,达到灵活运用的目的。 1、模块化 以项目中普遍会有的config.js文件为例,实现export导出: {代码...} 再在其他文件中通过import实现导入: {代码....

Gatsby极速入门—添加上一页下一页功能(完结篇)

2019-06-06
阅读 2 分钟
2.8k
1.调整gatsby-node 这个就简单了,打开gatsby-node.js,增加代码如下: {代码...} 2.调整blogPost.js {代码...} 打开首页,点击页面跳转到对应的页面大功告成。 总结 到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。 当...

Gatsby极速入门—添加博客内容页(4)

2019-05-30
阅读 2 分钟
2.2k
1.查数据 注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。 {代码...} 很清晰明显,这里就说一点我传递了一个参数,pathSlug到内容页。 2.创建内容页模板 在src>templates下创建blogPost.js {代码...} 这里只要对应的路径的那个文章查询 {代码...}

Gatsby极速入门—添加博客文章列表(3)

2019-05-24
阅读 2 分钟
1.9k
1.查数据 {代码...} 如图所示, 2.套页面 打开index.js {代码...} 打开首页,看到文章列表就大功告成了。

ES6—项目小练习-TodoList(15)

2019-05-21
阅读 8 分钟
4.7k
通过搜索引擎,发现很多教程都是直接引入Traceur.js 然后讲解ES6各种功能和语法的,但是好像实际并不是直接引入Traceur.js ,而是用babel。

ES6—面试常见ES6问题集锦(14)

2019-05-18
阅读 5 分钟
9.4k
通过对ES6系列文章的学习,相信大家对ES6已结有一定程度的了解。 所以本节的目的在于通过测试,便于让大家了解在学习中的知识掌握情况,查缺补漏,一步一个脚印。 1、选择题 1.1 下面不属于关键字let的特点的是:( ) A、只在 let 命令所在的代码块内有效 B、会产生变量提升现象 C、同一个作用域,不能重复声明同一个变...

ES6-Generator与react状态机(13)

2019-05-17
阅读 8 分钟
2.9k
大家在写App和一些单页面程序的时候,经常会遇到这样的情况:当点击左边的箭头的时候,会出现灰黑色的抽屉效果,再点击一下向左的箭头,就会收起来,当然向右滑动和向左滑动也能实现抽屉效果的开关。还有,当抽屉效果开着的时候,点击右侧区域也会自动收起抽屉。点击左侧抽屉里面的图标,那么也会发生抽屉效果的开关。

Gatsby极速入门—使用GraphQL解析Markdown(2)

2019-05-16
阅读 2 分钟
3.1k
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

ES6-Proxy与数据劫持(12)

2019-05-16
阅读 5 分钟
10.2k
随着前端界的空前繁荣,各种框架横空出世,包括各类mvvm框架百家争鸣,比如Anglar、Vue、React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发,探索其中数据劫持的奥秘。

ES6—Async与异步编程(11)

2019-05-15
阅读 5 分钟
3.1k
坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

ES6-class、模块化在vue中应用(10)

2019-05-13
阅读 4 分钟
7.9k
我们在之前文章《ES6 class与面向对象编程》中,说到了目前大部分框架和库,都采用了面向对象方式编程。那么具体是怎么样应用的呢?面向对象编程,最典型和最基础的作用就是封装,封装的好处就是代码的能够复用,模块化,进行项目和文件的组织。