Vue-项目之免费课和购物车实现

调整首页细节固定头部 App.vue中代码 <style> body{ padding: 0; margin:0; margin-top: 80px; } </style> Header中代码: <style scoped> .header{ top:0; left:0; right:0; margin: auto; background-color: #fff; height: 80px; z-index: 1000; position: fixed; box-sh…

vue 项目记录.路飞学城(一)

前情提要: 通过vue 搭建路飞学城记录一:项目分析二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认样式 2>1: 清除位置 2>2:修改后效果 2>3:结果图三:引入ElementUI 1:快速安装ElementUI 对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,Vue开发前端项目中,比较常用的就是ElementUI了. ElementUI是饿…

前端Vue项目——登录页面实现

一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用.它是由极验开发的新一代人机验证产品,它不基于传统“问题-答案”的检测模式,而是通过利用深度学习对验证过程中产生的行为数据进行高维分析,发现人机行为模式与行为特征的差异,更加精准地区分人机行为. 1.web部署介绍客户端官方文档:https://doc…

DRF+Vue项目（一）——项目架构

永久配置安装源为了加速模块的下载 1.文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2.新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件 3.新增 pip.ini 配置文件内容配置内容 [global] index-url = http://pypi.douban.com/simple [install] use-mirrors =true mirrors =http://pypi.doub…

element-ui和npm、webpack、vue-cli搭建Vue项目

一.element-ui的简单使用 1.安装 1. npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.  <link rel="stylesheet" href="https://unpkg.com/eleme…

vue项目中的常见问题

总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev修改 webpack.base.config.js 配置文件 { test:/\.less$/, loader:'style-loader!css-loader!less-loader' } 在使用时在style标签中加入 lang="less" 也可以加上scoped代…

vue项目中icon图标的完美引入

第一步: 进入阿里矢量图标库并登录地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建一个(按钮都在同一个页面) 第四步: 添加到项目后,在弹出的页面修改项目防止icon命名与自己的UI框架(如elementui)冲突在更多操作->编辑项目下(设置字体的前缀:fontClass/Symbol 前缀) 第五步: 修改完成项目后进行选择css并下载下来第六步: 在你的vue…

Vue 项目 Vue + restfulframework

Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.status = 100 self.msg = None @property def get_dic(self): return self.__dict__ #token def get_token(username): import hashlib import time md = hashlib.md…

vue项目使用阿里巴巴矢量图标库教程

前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库地址:http://www.iconfont.cn/ 1. 阿里注册登陆账号 2. 创建一个新的项目再次提醒: 新建项目项目名称随便写.前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了. 设置完,点新建 3. 给项目里添加图标 1. 先添加购物车, 再同意添加到项目里 4.…

python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

一.bootstrap组件无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件组件:html css js 组件包含插件面版虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 基本实例默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容. 带标题的面版通过 .panel-heading 可以很简单地为面板加入一…

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种方法一:简单粗暴法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车例如我现在选择三个图标点击购物车,添加至项目为了方便可以给项目起一个名字选…

vue项目实战, webpack 配置流程记录

vue项目实战记录,地址在这购物车单界面 npm install npm run dev 跑起来可以看到界面效果这里简单记录一下webpack的编译流程入口 package.json "scripts": { "dev": "node build/dev-server.js", //npm run dev ,执行这里 "build": "node build/build.js" }, build文件下…

vue项目实基础到实战，入门到精通，移动商城

最近发现许多的朋友都问我有没有vue项目的案例学习,最近正在学习vue,在这可以分享给大家,希望大家学有所成,相互交流共同进步,先不说了,吃个宵夜. 就这么多吧,需要的可以在下方留言或者加qq:1161724197获取,在此声明此项目完全免费,免费 ,免费作者:深海收破烂 2019-09-3021:40:31…

前端Vue项目——首页/课程页面开发及Axios请求

一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容器外部: <template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item">…

MintUI引入vue项目以及引入iconfont图标

官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://elemefe.github.io/mint-ui/#/ 如何引入vue2项目: 在public的index.html页面,用CDN的形式引入,这样可以减少vendor包的体积,当然如果不介意可以安装在本地 <!DOCTYPE html> <html lang="en"> &…

一步步创建第一个Vue项目

写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在vue-cms目录下创建文件webpack.config.js 在vue-cms目录下创建文件.babelrc 在vue-cms目录下创建目录src 在src目录下创建文件index.html 在src目录下创建文件main.js package.json { "name": "…

vue 项目中使用阿里巴巴矢量图标库iconfont

原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) image.png 3.把需要的图标添加到购物车 image.png 4.打开购物车并选择添加至项目,然后确定 image.png 5.这时候可以在项目中看到你选中的svg图标,这时候可以点击下载至本地 image.png 6.打开下载的zip包就可以看到里面的文件,将下面几…

新东方集团K12公益免费课战役记

作者:张建鑫, 曾任IBM高级软件架构师, 滴滴高级技术专家, 现任新东方集团高级技术总监 1月31日,集团领导决定由产品技术中心的新东方APP团队牵头做周一到周五的集团公益课, 提供给全国中小学生使用,并且要求在2月10日上午9点前交付上线. 这句话,你品,你细品,它实际上就是要求我们从零到一地去实现和交付一个互联网轻课平台,并在短时间内里实现产品的冷启动和线上用户增长,这本质上就是一次小型互联网创业项目,而且由于极短的开发时间,刚性的上线日期,让这个项目一开始就是一场生死时速.这个平台要负责…

Vue项目history模式下微信分享总结

原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 技术要点 Vue,history模式常见问题及说明 debug模式下报false 这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项: 是否成功绑定了域名(域名校验文件要能被访问到) 使用最新的js-sdk文件…

vue-cli快速构建Vue项目

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里…

requirejs + vue 项目搭建2

上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒.(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue…

vue项目目录介绍

Vue 项目实战系列（一）

最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork. 看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下. 第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建.由于使用了vu…