feat: webpack demo confige & sass supported

2024-11-27 04:09:51 +08:00 · 2019-05-24 20:09:35 +08:00 · 2019-05-24 20:09:35 +08:00 · 62820538dc
commit 62820538dc
parent aeb4adf7bf
19 changed files with 374 additions and 14 deletions
--- a/build/config.js
+++ b/build/config.js
@ -0,0 +1,7 @@
+const path = require('path')
+
+exports.alias = {
+  main: path.resolve(__dirname, '../src'),
+  packages: path.resolve(__dirname, '../packages'),
+  examples: path.resolve(__dirname, '../examples')
+}
--- a/build/webpack.demo.js
+++ b/build/webpack.demo.js
@ -0,0 +1,79 @@
+const path = require('path')
+const webpack = require('webpack')
+const config = require('./config')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+const webpackConfig = {
+  mode: 'development',
+  entry: './demo/index.js',
+  output: {
+    path: path.resolve(process.cwd(), ),
+    publicPath: '',
+    filename: '[name].[hash:7].js',
+    chunkFilename: '[name].[hash:7].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8086,
+    publicPath: '/',
+    hot: true
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+       {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './demo/index.tpl',
+      filename: './index.html'
+    }),
+    new VueLoaderPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      vue: {
+        compilerOptions: {
+          preserveWhitespace: false
+        }
+      }
+    })
+  ]
+}
+
+module.exports = webpackConfig
--- a/build/webpack.test.js
+++ b/build/webpack.test.js
@ -1,6 +1,7 @@
-const path = require('path');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const path = require('path')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const config = require('./config')


 const webpackConfig = {
@ -16,13 +17,7 @@ const webpackConfig = {
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
-    alias: Object.assign({
-      main: path.resolve(__dirname, '../src'),
-      packages: path.resolve(__dirname, '../packages'),
-      examples: path.resolve(__dirname, '../examples')
-    }, {
-      'vue$': 'vue/dist/vue.common.js'
-    }),
+    alias: config.alias,
    modules: ['node_modules']
  },
  module: {
--- a/demo/demo.vue
+++ b/demo/demo.vue
@ -0,0 +1,24 @@
+<template>
+<div class="demo">
+  <div class="section">
+    <div class="section title">Card</div>
+    <nv-card :width="300" title="Apply For Github Access" content="Lorem ipsum dolor sit amet, ea est eros munere. Voluptua phaedrum oportere quo cu, nam id laboramus dissentias, diam meliore singulis in quo. Duo in lorem qualisque aliquando. Id per aliquip cotidieque, denique mediocritatem pri ea. Usu nihil utamur quaestio ad, pro in tota euismod incorrupte, eum an paulo nonumes."></nv-card>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  width: 1080px;
+  margin: auto;
+}
+
+.section.title {
+  margin: 14px 0;
+}
+</style>
--- a/demo/index.js
+++ b/demo/index.js
@ -0,0 +1,10 @@
+import Vue from 'vue'
+import '../styles/index.scss'
+import Demo from './demo.vue'
+import Card from 'packages/Card'
+import Icon from 'packages/Icon'
+
+Card.install(Vue)
+Icon.install(Vue)
+
+;(new Vue(Demo)).$mount('#app')
--- a/demo/index.tpl
+++ b/demo/index.tpl
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>2s design</title>
+  </head>
+  <body>
+      <div id="app"></div>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -1,10 +1,11 @@
 {
-  "name": "test-karma",
+  "name": "naive-ui",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-    "test": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js",
+    "test": "cross-env NODE_ENV=development karma start test/unit/karma.conf.js"
  },
  "author": "",
  "license": "ISC",
@ -15,7 +16,12 @@
    "babel-loader": "^8.0.5",
    "babel-plugin-istanbul": "^5.1.4",
    "chai": "^4.2.0",
+    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "iview": "^3.4.2",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
@ -25,14 +31,22 @@
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^3.0.5",
    "mocha": "^6.1.4",
+    "node-sass": "^4.12.0",
    "progress-bar-webpack-plugin": "^1.12.1",
    "puppeteer": "^1.15.0",
+    "sass-loader": "^7.1.0",
    "sinon": "^7.3.2",
    "sinon-chai": "^3.3.0",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.30.0"
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1"
  },
-  "dependencies": {}
+  "dependencies": {
+    "ionicons": "^4.5.8"
+  }
 }
--- a/packages/Card/index.js
+++ b/packages/Card/index.js
@ -0,0 +1,7 @@
+import Card from './src/main.vue'
+
+Card.install = function (Vue) {
+  Vue.component(Card.name, Card)
+}
+
+export default Card
--- a/packages/Card/src/main.vue
+++ b/packages/Card/src/main.vue
@ -0,0 +1,52 @@
+<template>
+  <div class="nv-card" :style="style">
+    <!-- <div class="mask">
+      <div class="intro">
+        <div></div>
+        <div class="ribbon">
+          <nv-icon type="md-lock" size="16" style="margin-right: 4px;"/>
+          <div>Access Required</div>
+        </div>
+      </div>
+    </div> -->
+    <div class="intro">
+      <nv-icon type="logo-github" size="32"/>
+      <div class="ribbon">
+        <nv-icon type="md-lock" size="16" style="margin-right: 4px;"/>
+        <div>Access Required</div>
+      </div>
+    </div>
+    <div class="title">{{ title }}</div>
+    <div class="content">{{ content }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NvCard",
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    content: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: Number,
+      required: false
+    }
+  },
+  data () {
+    return {
+      style: {}
+    }
+  },
+  beforeMount () {
+    if (this.width !== undefined) {
+      this.style.width = `${this.width}px`
+    }
+  }
+};
+</script>
--- a/packages/Icon/index.js
+++ b/packages/Icon/index.js
@ -0,0 +1,7 @@
+import Icon from './src/main.vue'
+
+Icon.install = function (Vue) {
+  Vue.component(Icon.name, Icon)
+}
+
+export default Icon
--- a/packages/Icon/src/main.vue
+++ b/packages/Icon/src/main.vue
@ -0,0 +1,42 @@
+<template>
+  <i :class="classes" :style="styles"></i>
+</template>
+<script>
+const prefixCls = "ion";
+export default {
+  name: "NvIcon",
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    size: [Number, String],
+    color: String,
+    custom: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    classes() {
+      return [
+        {
+          [`${prefixCls}-${this.type}`]: this.type !== "",
+          [`${this.custom}`]: this.custom !== ""
+        }
+      ];
+    },
+    styles() {
+      let style = {};
+      if (this.size) {
+        style["font-size"] = `${this.size}px`;
+        style["line-height"] = '1';
+      }
+      if (this.color) {
+        style.color = this.color;
+      }
+      return style;
+    }
+  }
+};
+</script>
--- a/styles/Card.scss
+++ b/styles/Card.scss
@ -0,0 +1,89 @@
+@import './mixins/mixins.scss';
+
+@include b(card) {
+  .mask {
+    overflow: hidden;
+    position: absolute;
+    padding: 12px 24px 18px 24px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, .7);
+    transition: background-color .2s ease-out;
+  }
+
+  .mask .alert {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .lock {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .lock-description {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  & .lock .lock-description {
+    color: rgba(81, 90, 110, 0);
+    transition: color .2s ease-out;
+  }
+
+  &:hover .lock .lock-description {
+    color: rgba(81, 90, 110, 1);
+    transition: color .2s ease-out;
+  }
+
+  & {
+    position: relative;
+    cursor: pointer;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 12px 24px 18px 24px;
+    display: inline-block;
+    transition: box-shadow .2s;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+  }
+
+  .title {
+    margin-top: 6px;
+    font-size: 18px;
+    color: #17233D;
+  }
+
+  .content {
+    margin-top: 6px;
+    font-size: 14px;
+  }
+
+  .ribbon {
+    display: flex;
+    align-items: center;
+    color: white;
+    background: rgb(81, 90, 110);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+
+  .intro {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
--- a/styles/base.scss
+++ b/styles/base.scss
@ -0,0 +1,3 @@
+body {
+  font-family: 'Open Sans';
+}
--- a/styles/common/variables.scss
+++ b/styles/common/variables.scss
--- a/styles/fonts/OpenSans-Regular.ttf
+++ b/styles/fonts/OpenSans-Regular.ttf
--- a/styles/fonts/OpenSans.scss
+++ b/styles/fonts/OpenSans.scss
@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans-Regular.ttf');
+}
--- a/styles/index.scss
+++ b/styles/index.scss
@ -0,0 +1,4 @@
+@import './Card.scss';
+@import './base.scss';
+@import '../node_modules/ionicons/dist/css/ionicons.css';
+@import './fonts/OpenSans.scss';
--- a/styles/mixins/config.scss
+++ b/styles/mixins/config.scss
@ -0,0 +1,4 @@
+$namespace: 'nv';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';
--- a/styles/mixins/mixins.scss
+++ b/styles/mixins/mixins.scss
@ -0,0 +1,9 @@
+@import "./config.scss";
+
+@mixin b($block) {
+  $B: $namespace + "-" + $block;
+
+  .#{$B} {
+    @content;
+  }
+}