mikeliu

mikeliu 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

mikeliu 关注了用户 · 2017-11-15

会说话的鱼 @sunhk

关注 138

mikeliu 发布了文章 · 2017-06-28

高度不固定时垂直居中

clipboard.png

语言表达能力有限,直接上图。我想做的效果就是左侧是导航标题,右侧是对应的内容条目。
但是右侧内容条目数目不固定,因此对应的高度也不固定。这效果看似简单,但本人半天没想出来,苦读一天文档,终于找到解决方案(angularjs写的)。

<style>
.itemGroup {
    position: relative;
}

.itemGroupTitle {
    text-align: center;
    color: white;
    font-weight: bold;
    position: static;
}

.itemGroupTitle1 {
    position: absolute;
    width: inherit;
    height: 100%;   
}

.itemGroupTitle2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 140px;
    height: 20px;
}
</style>
<div class="row itemGroup" ng-repeat="item in keyTypes.dataSource">
    <div class="col-sm-2 itemGroupTitle">
        <div class="itemGroupTitle1"><div class="itemGroupTitle2">{{item.GroupName}}></div></div>
    </div>
    <div class="col-sm-10 itemGroupContent">
        <div class="row">
            <div class="col-sm-6 item" ng-repeat="keytype in item.keyTypes">{{keytype.KeyTypeName}}</div>
        </div>
    </div>
</div>
查看原文

赞 0 收藏 3 评论 2

mikeliu 发布了文章 · 2017-02-03

github入门篇

关于git的一些命令行经常忘记,还是自己做个小小的笔记。

  1. On GitHub,com, create repository

  2. clone git repository

    git clone URL
    cd REPOSITORY-NAME
    git status
  3. Optional: create local branches

    git branch BRANCH-NAME
    git status
    git checkout BRANCH-NAME
    git status
    
  4. make local change and commit(when finish type comment, press ESC, type :wq)

    git status
    git add FILE_NAME
    git status
    git commit
  5. push to remote

    git push -u origin BRANCH-NAME
  6. Option: Merge Pull Request

查看原文

赞 1 收藏 2 评论 0

mikeliu 发布了文章 · 2016-12-08

vue webpack v1 & v2 基础配置篇(初学者--1)

Webpack现在有v1和v2两种版本。

  1. 安装nodejs。这就不细说了,度娘告诉你。

  2. cmd定位到开发文件夹,按照提示生成package.json。npm init

  3. 安装es6编译插件。$ npm install css-loader babel-loader babel-core babel-preset-es2015 --save-dev

  4. 安装webpack。$ npm install webpack html-webpack-plugin extract-text-webpack-plugin vue-template-compiler --save-dev
    如果是v2版本,还需npm install --save-dev extract-text-webpack-plugin@beta

  5. 安装vue,vuex。$ npm install vue vuex

  6. 配置webpack.config.js。参考文章最后的代码。

  7. run webpack。$ webpack

//webpack v1
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: './app.js', //入口js
        vendors: [
            'vue', 'vuex' //单独抽出vue,vuex打包成一个js
        ]
    },
    output: {
        path: 'dist',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.css', '.vue']
    },
    module: {
        loaders: [
            {
                test: /\.vue$/, 
                loader: 'vue',
                exclude: /node_modules/
            },
            { 
                test: /\.js$/, 
                  loader: 'babel',
                  exclude: /node_modules/
            },
            {test: /\.css$/,loader: "style!css"},
        ]
    },
    vue: { //从vue中抽出独立的css文件
        loaders: {
            css: ExtractTextPlugin.extract("css")
        }
    },
    babel: { //es6转为es5代码
        presets: ['es2015'],
        plugins: ['transform-runtime'] //这个必须install babel-plugin-transform-runtime
    },
    plugins: [
        // 提取css为单文件
        new ExtractTextPlugin("[name].[contenthash].css"),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
        }),
    //在index.html中引用编译后的js,css
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
    ]
};
//webpack v2
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: './app.js',
        vendors: [
            'vue', 'vuex', 'vue-router'
        ]
    },
    output: {
        path: 'dist',
        filename: '[name].js'
    },
    resolve: {
       // modules: ["node_modules"],
        extensions: ['.css', '.vue', '.js']
    },
    module: {
        rules: [
            {
                test: /\.vue$/, 
                loader: "vue-loader",
                options: {
                    loaders: {
                        "css": ExtractTextPlugin.extract("css-loader")
                    }                    
                },
                exclude: /node_modules/
            },
            { 
                test: /\.js$/, 
                loader: "babel-loader",
                options: {
                    presets: ['es2015'],
                    plugins: ['transform-runtime'] 
                },
                exclude: /node_modules/
            },
            {test: /\.css$/,use: ["style-loader", "css-loader"]},
        ]
    },
    resolve: {
        alias: {
          'vue': 'vue/dist/vue.common.js',
          //'vue-router': path.join(__dirname, '..', 'src')
        }
      },
    plugins: [
        // 提取css为单文件
        new ExtractTextPlugin({
            filename: "[name].[contenthash].css",
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
        }),
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
    ]
};
查看原文

赞 1 收藏 17 评论 0

认证与成就

  • 获得 2 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-12-08
个人主页被 204 人浏览