2018年10月_Byte_Dance

原创网站header内容和网站优化

2018-10-29 15:39:41 500

原创京东首页滚动楼层标识

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in

2018-10-27 22:06:03 439

转载使用webpack包管理工具

一 : 最简单的使用webpack的方法一、全局安装 webpack-cli 脚手架npm install webpack-cli -g二、新建一个项目wp，并在wp目录下初始化一个package.json文件。npm init -y 三、安装webpack到项目中将webpack加入到pageage.json配制文件中，使用以下命令：$ np...

2018-10-22 15:49:37 560

原创 LayUI可编辑表格

damo1.json{ "code": 0, "msg": "", "count": 100, "data": [ { "id": 10000, "username": "user-0", "sex": "女", "city

2018-10-21 23:06:10 2450 2

转载 vue-cli构建项目npm run build打包后怎么在本地查看效果

这时如果直接运行npn run build是可以运行并打包你的代码的，不会报任何异常或错误，但是会看到打包完成有这样一句提示：打开了控制台，看到console tab下一片404的各种找不到资源解决方案打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”，并在build\build.js将...

2018-10-21 21:01:43 1570

翻译 VueX使用方法

(1):首先安装VUEX : npm install vuex --save(2):然后再main.js里引入vuex: import Vuex from "vuex" Vue.use(Vuex)(3):然后再创建一个store对象const store = new Vuex.Store({ state: { count: 10 ...

2018-10-20 15:39:32 410

翻译 canvas粒子线段特效

将此代码插入body的末尾<canvas id="c_n12" width="1829" height="585" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"></canvas><script&amp

2018-10-18 11:41:00 617 1

转载前端工程师需要明白的「像素」

转自简书:https://www.jianshu.com/p/af6dad66e49a场景：人物：前端实习生「阿树」与切图工程师「玉凤」事件：设计师出设计稿，前端实现页面玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞阿树：(>_<)毛问题噶啦~阿树：哇靠，为啥你给的设计稿是640px宽，iPhone 5不是320px宽吗？？？玉凤：A pix...

2018-10-17 22:05:45 249

原创在Vue-cli中使用swiper

一 : 首先要把swiper 安装到 vue 项目中语法 : npm install --save-dev vue-awesome-swiper在 main.js中引入//配置swiperimport VueAwesomeSwiper from 'vue-awesome-swiper'//配置swiper CSSimport 'swiper/dist/css/swiper....

2018-10-09 19:02:05 526

原创创建Vue-cli 项目

首先 : 安装Vue -cli 安装的时候注意要获取cmd的管理员权限router路由可以先安装好, 选择启动方式的时候要自己cd到创建好的文件夹,然后输入npm install(创建依赖) ,最后输入 npm run dev 启动项目,默认是不启动浏览器.可以在config的index.js文件内修改自动启动浏览器和端口号码autoOpenBrowser:true 修改为tr...

2018-10-09 18:17:19 266

转载 vue-cli目录结构介绍

原文地址：http://www.jianshu.com/p/7006a663fb9f总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分1.build——[webpack配置] build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入...

2018-10-06 21:09:22 351

原创获取后台数据使用JQ-AJAX 和 Vue-Axios 两种方式的使用对比

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial

2018-10-05 18:31:28 733 1

翻译 Vue自定义指令-实现进入页面就获取输入框焦点

自定义指令一般用在很多地方都使用到的功能,把它封装成一个自定义指令.注册全局的输入框默认选中功能import Vue from 'vue'import App from './App.vue' //主组件import HelloWorld from './components/HelloWorld.vue' //Helloworld组件import Home from './...

2018-10-04 11:51:14 1307

翻译 Vue中的CSS过渡的6个过程

<template> <div name="users"> <hr>  <button @click="showHide">按钮</button> <

2018-10-03 22:12:16 382

翻译使用HTML5创建一个拖拽预览页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial

2018-10-03 19:56:35 3530

翻译 Vue动态组件

使用动态组件: 和传统组件绑定一样都需要先import引入地址,再在components里进行加载, 不同的是:我们使用动态的data 变量来表示引入的组件名然后再上边引用的时候用<component :is="currentView"></component> 标签来引入, is里边的值是可变的data参数可通过添加事件对其进行更改<!--模...

2018-10-01 21:45:06 441

翻译简单的flex 响应式布局（Bootstrap栅格系统布局）

最简单的相应布局父标签CSS配置display: flex; /*外部容器设置为flex布局内部才能进行布局操作*/flex-direction: row;/*表示元素的走向*/flex-wrap:wrap;/*声明元素是否换行*/子标签CSS配置height:200px;margin:5px;flex-grow:1;flex-basis:300px;这样就...

2018-10-01 20:03:34 1443

Byte_Dance的博客