v1.7.1
This commit is contained in:
xugaoyi
parent
c09e4f03e1
commit
b410bf56d0
|
|
@ -22,7 +22,7 @@ module.exports = {
|
|||
homeSidebarB:
|
||||
`<!-- 纵向自适应 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
style="display:block;padding: 0.95rem;"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="7802654582"
|
||||
data-ad-format="auto"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ module.exports = [
|
|||
text: '前端文章',
|
||||
items: [
|
||||
{ text: 'JavaScript', link: '/pages/8143cc480faf9a11/' },
|
||||
{ text: 'Vue', link: '/pages/802a1ca6f7b71c59/' },
|
||||
{ text: 'Vue', link: '/pages/5d463fbdb172d43b/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
title: Vue项目开发前的一些准备工作
|
||||
date: 2020-02-21 14:40:19
|
||||
permalink: /pages/802a1ca6f7b71c59
|
||||
categories:
|
||||
- 前端
|
||||
- Vue文章
|
||||
tags:
|
||||
- null
|
||||
author:
|
||||
name: xugaoyi
|
||||
link: https://github.com/xugaoyi
|
||||
---
|
||||
# Vue项目开发前的一些准备工作
|
||||
|
||||
在使用Vue CLi创建一个项目之后，正式进入开发前可能需要做一些工作，比如引入重置样式表、解决移动端点击300ms延迟等等。
|
||||
<!-- more -->
|
||||
## <meta\>修改
|
||||
|
||||
根据项目需要看情况是否需要修改meta
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 重置样式表
|
||||
|
||||
为了统一每个浏览器的样式，以及去掉一些浏览器默认样式，需要加载引入重置样式表，常用的有 [normalize.css](http://necolas.github.io/normalize.css/)。或使用如下reset.css（可根据项目需要作修改）。
|
||||
|
||||
```css
|
||||
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
|
||||
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
|
||||
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
|
||||
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
|
||||
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
|
||||
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
|
||||
address,cite,dfn,em,i,optgroup,var{font-style:normal}
|
||||
table{border-collapse:collapse;border-spacing:0;text-align:left}
|
||||
caption,th{text-align:inherit}
|
||||
ul,ol,menu{list-style:none}
|
||||
fieldset,img{border:0}
|
||||
img,object,input,textarea,button,select{vertical-align:middle}
|
||||
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
|
||||
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
|
||||
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
|
||||
textarea{overflow:auto;resize:vertical}
|
||||
input,textarea,button,select,a{outline:0 none;border: none;}
|
||||
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
|
||||
mark{background-color:transparent}
|
||||
a,ins,s,u,del{text-decoration:none}
|
||||
sup,sub{vertical-align:baseline}
|
||||
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
|
||||
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
|
||||
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
|
||||
a {color: #25a4bb;text-decoration: none;}
|
||||
```
|
||||
|
||||
在main.js引入样式
|
||||
|
||||
```js
|
||||
import './assets/styles/reset.css'
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 解决移动端点击300ms延迟
|
||||
|
||||
通过npm安装 [fastclick](https://github.com/ftlabs/fastclick)
|
||||
|
||||
```sh
|
||||
npm install fastclick -S
|
||||
```
|
||||
|
||||
在main.js导入和使用
|
||||
|
||||
```js
|
||||
import fastClick from 'fastclick'
|
||||
fastClick.attach(document.body)
|
||||
```
|
||||
|
||||
|
|
@ -127,4 +127,3 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ article: false
|
|||
> 待整理
|
||||
|
||||
## Vue
|
||||
- [Vuesax](https://lusaxweb.github.io/vuesax/) 一个优质的vue的组件库
|
||||
- [Vuesax](https://vuesax.com/) 一个优质的vue的组件库
|
||||
|
||||
## 移动端
|
||||
- [fastclick](https://github.com/ftlabs/fastclick) 解决移动端点击延迟300ms问题
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"vuepress-plugin-one-click-copy": "^1.0.2",
|
||||
"vuepress-plugin-thirdparty-search": "^1.0.2",
|
||||
"vuepress-plugin-zooming": "^1.1.7",
|
||||
"vuepress-theme-vdoing": "^1.7.0",
|
||||
"vuepress-theme-vdoing": "^1.7.1",
|
||||
"yamljs": "^0.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
<ul>
|
||||
<template v-for="(item, index) in postsList">
|
||||
<li
|
||||
v-if="(year = getYear(index)) !== getYear(index-1)"
|
||||
class="year"
|
||||
v-if="(year = getYear(index)) !== getYear(index-1)"
|
||||
:key="index+$sortPostsByDate.length"
|
||||
>
|
||||
<h2>{{year}}</h2>
|
||||
</li>
|
||||
<li :key="index">
|
||||
<router-link :to="item.path">
|
||||
<i>{{ getDate(item) }}</i>
|
||||
<span>{{ getDate(item) }}</span>
|
||||
{{item.title}}
|
||||
</router-link>
|
||||
</li>
|
||||
|
|
@ -111,77 +111,32 @@ export default {
|
|||
&.year
|
||||
position sticky
|
||||
top $navbarHeight
|
||||
background var(--mainBg)
|
||||
z-index 1
|
||||
width: 80px
|
||||
&+ li
|
||||
position relative
|
||||
&::before
|
||||
content ''
|
||||
display block
|
||||
width .5rem
|
||||
height .5rem
|
||||
border-radius 50%
|
||||
border 1px solid $accentColor
|
||||
position absolute
|
||||
left 4.25rem
|
||||
top -2.1rem
|
||||
a
|
||||
position relative
|
||||
&::after
|
||||
content ''
|
||||
display block
|
||||
width 1px
|
||||
height 1.5rem
|
||||
background $accentColor
|
||||
position absolute
|
||||
left -1px
|
||||
top -1.5rem
|
||||
&.year:not(:first-child)
|
||||
margin-top 3.5rem
|
||||
h2
|
||||
margin-top 0
|
||||
margin-bottom 0.5rem
|
||||
margin-bottom 0.8rem
|
||||
font-weight 400
|
||||
padding 0.5rem 0
|
||||
border none
|
||||
display inline-block
|
||||
background var(--mainBg)
|
||||
color $accentColor
|
||||
a
|
||||
display block
|
||||
color var(--textColor)
|
||||
transition padding 0.3s
|
||||
padding 0.4rem 1.2rem
|
||||
margin-left 4.5rem
|
||||
border-left 1px solid $accentColor
|
||||
padding 0.5rem 2rem
|
||||
line-height 1.2rem
|
||||
position: relative
|
||||
&:hover
|
||||
padding-left 1.5rem
|
||||
color $activeColor
|
||||
padding-left 2.5rem
|
||||
color $accentColor
|
||||
background #f9f9f9
|
||||
&::before
|
||||
transform scale(2)
|
||||
background $activeColor
|
||||
&::before
|
||||
content ''
|
||||
display block
|
||||
width .3rem
|
||||
height .3rem
|
||||
border-radius 50%
|
||||
background $accentColor
|
||||
position: absolute;
|
||||
top .9rem
|
||||
left -0.18rem
|
||||
transition all .5s
|
||||
@media (max-width $contentWidth + 80)
|
||||
padding 0.5rem 1rem
|
||||
font-weight normal
|
||||
&:hover
|
||||
padding-left 1.5rem
|
||||
i
|
||||
span
|
||||
opacity 0.6
|
||||
font-size 0.9rem
|
||||
font-size 0.85rem
|
||||
font-weight 400
|
||||
margin-right 0.3rem
|
||||
.loadmore
|
||||
|
|
|
|||
|
|
@ -499,8 +499,8 @@ export default {
|
|||
padding-bottom 2rem
|
||||
.main-right
|
||||
.custom-html-box
|
||||
padding-left .95rem
|
||||
padding-right .95rem
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
@keyframes heart
|
||||
from
|
||||
transform translate(0, 0)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vuepress-theme-vdoing",
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.1",
|
||||
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
|
||||
"author": {
|
||||
"name": "gaoyi(Evan) Xu"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ codeThemeLight()
|
|||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
// text-shadow: 0 1px white;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
|
|
@ -134,6 +134,16 @@ codeThemeLight()
|
|||
cursor: help;
|
||||
}
|
||||
|
||||
// 行高亮颜色
|
||||
div[class*="language-"]
|
||||
.highlight-lines
|
||||
.highlighted
|
||||
background-color rgba(200, 200, 200, 40%)
|
||||
&.line-numbers-mode
|
||||
.highlight-lines .highlighted
|
||||
&:before
|
||||
background-color rgba(200, 200, 200, 40%)
|
||||
|
||||
|
||||
// 适合深色背景 // @import '~prismjs/themes/prism-tomorrow.css'
|
||||
codeThemeDark()
|
||||
|
|
|
|||
Loading…
Reference in New Issue