发表于 | 更新于 | 分类于 ， | 评论数： 0 | 阅读次数：

启动

开发的时候启动 webpack 热替换

1
npm run dev

端口

默认端口号是8080
如果希望修改端口号，则进入~\config\index.js，修改dev下的port为希望启动的端口号

1
例如:  port: 80,
阅读全文 »

发表于 | 更新于 | 分类于 ， | 评论数： 0 | 阅读次数：

参考

  • vue-tutorial
  • Vue+Webpack 开发可复用的单页面富应用教程
  • Vue+Webpack 使用规范

对比其他框架

阅读全文 »

发表于 | 更新于 | 分类于 ， | 评论数： 0 | 阅读次数：

  1. 自定义苹果图标
    在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

  2. 定义浏览器点击行为

    1
    2
    3
    <a href="tel:020-10086">打电话给:020-10086</a>
    <a href="sms:10086">发短信给: 10086</a>
    <a href="mailto:[email protected]">发送邮件: [email protected]</a>

  3. 定义上传文件类型和格式

    1
    <input type=file accept="image/*">

    上面的文件上传框中，accept 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成 image/png 则可以限制图片类型为png；参数如果为 video/* 则是选择视频的意思；accept 还可以设置多个文件格式，语法为 accept="image/gif, image/jpeg"

  4. 使用box-shadow改变(挡住)表单自动填充后的黄色

    1
    2
    3
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
        box-shadow:inset 0 0 0 1000px #fff;
    }

  5. 用CSS实现省略号文字截断

    1
    2
    3
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

  6. 使用border绘制小三角

    原理是：上下和左右的边框对接其实是个斜角，利用这个特性，使其中一边的边框透明，另外一边写成想要的颜色并隐藏对边，就可以变成小箭头形状。

    1
    2
    3
    4
    border-width: 10px 10px 10px 0; //左箭头
    border-color: transparent #fff;
    border-style: solid;
    width: 0;

    Tootip写法:

    1
    2
    <!--html-->
    <div class="box">嗨！点击菜单就可以关注兮兮公众号了哟~</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /*--css--*/
    .box{
        position: relative;
        padding: 0 20px;
        width: 380px;
        height: 80px;
        border-radius: 8px;
        background: #efefef;
        font-size: 18px;
        line-height: 80px;
    }
    .box:after{
        position: absolute;
        top: 50%;
        left: -15px;
        z-index: 1;
        display: block;
        margin-top: -15px;
        width: 0;
        border-color: transparent #efefef;
        border-style: solid;
        border-width: 15px 15px 15px 0;
        content: "";
    }

发表于 | 更新于 | 分类于 ， | 评论数： 0 | 阅读次数： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8"/>
        <!-- 优先使用 IE 最新版本和 Chrome -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <!-- 页面描述 -->
        <meta name="description" content="不超过150个字符"/>
        <!-- 页面关键词 -->
        <meta name="keywords" content=""/>
        <!-- 网页作者 -->
        <meta name="author" content="name, [email protected]"/>
        <!-- 搜索引擎抓取 -->
        <meta name="robots" content="index,follow"/>
        <!-- 为移动设备添加 viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
        <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 https://bigc.at/ios-webapp-viewport-meta.orz -->

        <!-- iOS 设备 begin -->
        <meta name="apple-mobile-web-app-title" content="标题">
        <!-- 添加到主屏后的标题（iOS 6 新增） -->
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

        <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
        <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <!-- 设置苹果工具栏颜色 -->
        <meta name="format-detection" content="telphone=no, email=no"/>
        <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!-- 避免IE使用兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 不让百度转码 -->
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
        <meta name="HandheldFriendly" content="true">
        <!-- 微软的老式浏览器 -->
        <meta name="MobileOptimized" content="320">
        <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">
        <!-- UC强制全屏 -->
        <meta name="full-screen" content="yes">
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true">
        <!-- UC应用模式 -->
        <meta name="browsermode" content="application">
        <!-- QQ应用模式 -->
        <meta name="x5-page-mode" content="app">
        <!-- windows phone 点击无高光 -->
        <meta name="msapplication-tap-highlight" content="no">
        <!--自定义favicon-->
        <link rel="icon" type="image/jpg" href="/static/img/icon.jpg" size="16*16">
        <link rel="shortcut icon" href="/favicon.ico">
        <title>首页</title>
    </head>

    <body>
        <h1>自定义苹果图标</h1>
        <p>在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。</p>
    </body>

</html>

发表于 | 更新于 | 分类于 ， | 评论数： 0 | 阅读次数： 
1
2
3
4
/*清除浮动 clear & clearfix*/
.clear { display:block !important; clear:both !important; float:none !important; margin:0 !important; padding:0 !important; height:0; line-height:0; font-size:0; overflow:hidden;}
.clearfix { zoom:1; }
.clearfix:after { content:""; display:block; clear:both; height:0; }