dpzvc-ui 1.0.0 → 1.1.0

package/src/router.js

@@ -1,229 +1,36 @@
 /**
- * Created by lcfevr on 16/8/22.
+ * 路由配置 - 按需加载版本
  */
 const routers = [
-    {
-        path:'/',
-        redirect:'/guide'
-    },
+  { path: '/', redirect: '/guide' },
 
-    {
-        path:'/guide',
-        name:'guide',
-        component:require('./views/guide.vue'),
-        meta:{
-            title:'guide'
-        }
-    },
-    {
-        path:'/ActionSheet',
-        name:'ActionSheet',
-        component:require('./views/ActionSheet.vue'),
-        meta:{
-            title:'ActionSheet'
-        }
-    },
-    {
-        path:'/Badge',
-        name:'Badge',
-        component:require('./views/Badge.vue'),
-        meta:{
-            title:'Badge'
-        }
-    },
-    {
-        path:'/Button',
-        name:'Button',
-        component:require('./views/Button.vue'),
-        meta:{
-            title:'Button'
-        }
-    },
-    {
-        path:'/Card',
-        name:'Card',
-        component:require('./views/Card.vue'),
-        meta:{
-            title:'Card'
-        }
-    },
-    {
-        path:'/Cell',
-        name:'Cell',
-        component:require('./views/Cell.vue'),
-        meta:{
-            title:'Cell'
-        }
-    },
-    {
-        path:'/CellSwipe',
-        name:'CellSwipe',
-        component:require('./views/CellSwipe.vue'),
-        meta:{
-            title:'CellSwipe'
-        }
-    },
-    {
-        path:'/CheckBox',
-        name:'CheckBox',
-        component:require('./views/CheckBox.vue'),
-        meta:{
-            title:'CheckBox'
-        }
-    },
-    {
-        path:'/Header',
-        name:'Header',
-        component:require('./views/Header.vue'),
-        meta:{
-            title:'Header'
-        }
-    },
-    {
-        path:'/Indicator',
-        name:'Indicator',
-        component:require('./views/Indicator.vue'),
-        meta:{
-            title:'Indicator'
-        }
-    },
-    {
-        path:'/LoadMore',
-        name:'LoadMore',
-        component:require('./views/LoadMore.vue'),
-        meta:{
-            title:'LoadMore'
-        }
-    },
-    {
-        path:'/Message',
-        name:'Message',
-        component:require('./views/Message.vue'),
-        meta:{
-            title:'Message'
-        }
-    },
-    {
-        path:'/Modal',
-        name:'Modal',
-        component:require('./views/Modal.vue'),
-        meta:{
-            title:'Modal'
-        }
-    },
-    {
-        path:'/Picker',
-        name:'Picker',
-        component:require('./views/Picker.vue'),
-        meta:{
-            title:'Picker'
-        }
-    },
-    {
-        path:'/Popup',
-        name:'Popup',
-        component:require('./views/Popup.vue'),
-        meta:{
-            title:'Popup'
-        }
-    },
-    {
-        path:'/Progress',
-        name:'Progress',
-        component:require('./views/Progress.vue'),
-        meta:{
-            title:'Progress'
-        }
-    },
-    {
-        path:'/Prompt',
-        name:'Prompt',
-        component:require('./views/Prompt.vue'),
-        meta:{
-            title:'Prompt'
-        }
-    },
-    {
-        path:'/RadioBox',
-        name:'RadioBox',
-        component:require('./views/RadioBox.vue'),
-        meta:{
-            title:'RadioBox'
-        }
-    },
-    {
-        path:'/Rater',
-        name:'Rater',
-        component:require('./views/Rater.vue'),
-        meta:{
-            title:'Rater'
-        }
-    },
-    {
-        path:'/SlideBar',
-        name:'SlideBar',
-        component:require('./views/SlideBar.vue'),
-        meta:{
-            title:'SlideBar'
-        }
-    },
-    {
-        path:'/Spinner',
-        name:'Spinner',
-        component:require('./views/Spinner.vue'),
-        meta:{
-            title:'Spinner'
-        }
-    },
-    {
-        path:'/Swipe',
-        name:'Swipe',
-        component:require('./views/Swipe.vue'),
-        meta:{
-            title:'Swipe'
-        }
-    },
-    {
-        path:'/SwitchBar',
-        name:'SwitchBar',
-        component:require('./views/SwitchBar.vue'),
-        meta:{
-            title:'SwitchBar'
-        }
-    },
-    {
-        path:'/Tab',
-        name:'Tab',
-        component:require('./views/Tab.vue'),
-        meta:{
-            title:'Tab'
-        }
-    },
-    {
-        path:'/Text',
-        name:'Text',
-        component:require('./views/Text.vue'),
-        meta:{
-            title:'Text'
-        }
-    },
-    {
-        path:'/ToTop',
-        name:'ToTop',
-        component:require('./views/ToTop.vue'),
-        meta:{
-            title:'ToTop'
-        }
-    },
-    {
-        path:'/Upload',
-        name:'Upload',
-        component:require('./views/Upload.vue'),
-        meta:{
-            title:'Upload'
-        }
-    },
+  { path: '/guide', name: 'guide', component: () => import(/* webpackChunkName: "guide" */ './views/guide.vue'), meta: { title: 'guide' } },
+  { path: '/ActionSheet', name: 'ActionSheet', component: () => import(/* webpackChunkName: "actionsheet" */ './views/ActionSheet.vue'), meta: { title: 'ActionSheet' } },
+  { path: '/Badge', name: 'Badge', component: () => import(/* webpackChunkName: "badge" */ './views/Badge.vue'), meta: { title: 'Badge' } },
+  { path: '/Button', name: 'Button', component: () => import(/* webpackChunkName: "button" */ './views/Button.vue'), meta: { title: 'Button' } },
+  { path: '/Card', name: 'Card', component: () => import(/* webpackChunkName: "card" */ './views/Card.vue'), meta: { title: 'Card' } },
+  { path: '/Cell', name: 'Cell', component: () => import(/* webpackChunkName: "cell" */ './views/Cell.vue'), meta: { title: 'Cell' } },
+  { path: '/CellSwipe', name: 'CellSwipe', component: () => import(/* webpackChunkName: "cellswipe" */ './views/CellSwipe.vue'), meta: { title: 'CellSwipe' } },
+  { path: '/CheckBox', name: 'CheckBox', component: () => import(/* webpackChunkName: "checkbox" */ './views/CheckBox.vue'), meta: { title: 'CheckBox' } },
+  { path: '/Header', name: 'Header', component: () => import(/* webpackChunkName: "header" */ './views/Header.vue'), meta: { title: 'Header' } },
+  { path: '/Indicator', name: 'Indicator', component: () => import(/* webpackChunkName: "indicator" */ './views/Indicator.vue'), meta: { title: 'Indicator' } },
+  { path: '/LoadMore', name: 'LoadMore', component: () => import(/* webpackChunkName: "loadmore" */ './views/LoadMore.vue'), meta: { title: 'LoadMore' } },
+  { path: '/Message', name: 'Message', component: () => import(/* webpackChunkName: "message" */ './views/Message.vue'), meta: { title: 'Message' } },
+  { path: '/Modal', name: 'Modal', component: () => import(/* webpackChunkName: "modal" */ './views/Modal.vue'), meta: { title: 'Modal' } },
+  { path: '/Picker', name: 'Picker', component: () => import(/* webpackChunkName: "picker" */ './views/Picker.vue'), meta: { title: 'Picker' } },
+  { path: '/Popup', name: 'Popup', component: () => import(/* webpackChunkName: "popup" */ './views/Popup.vue'), meta: { title: 'Popup' } },
+  { path: '/Progress', name: 'Progress', component: () => import(/* webpackChunkName: "progress" */ './views/Progress.vue'), meta: { title: 'Progress' } },
+  { path: '/Prompt', name: 'Prompt', component: () => import(/* webpackChunkName: "prompt" */ './views/Prompt.vue'), meta: { title: 'Prompt' } },
+  { path: '/RadioBox', name: 'RadioBox', component: () => import(/* webpackChunkName: "radiobox" */ './views/RadioBox.vue'), meta: { title: 'RadioBox' } },
+  { path: '/Rater', name: 'Rater', component: () => import(/* webpackChunkName: "rater" */ './views/Rater.vue'), meta: { title: 'Rater' } },
+  { path: '/SlideBar', name: 'SlideBar', component: () => import(/* webpackChunkName: "slidebar" */ './views/SlideBar.vue'), meta: { title: 'SlideBar' } },
+  { path: '/Spinner', name: 'Spinner', component: () => import(/* webpackChunkName: "spinner" */ './views/Spinner.vue'), meta: { title: 'Spinner' } },
+  { path: '/Swipe', name: 'Swipe', component: () => import(/* webpackChunkName: "swipe" */ './views/Swipe.vue'), meta: { title: 'Swipe' } },
+  { path: '/SwitchBar', name: 'SwitchBar', component: () => import(/* webpackChunkName: "switchbar" */ './views/SwitchBar.vue'), meta: { title: 'SwitchBar' } },
+  { path: '/Tab', name: 'Tab', component: () => import(/* webpackChunkName: "tab" */ './views/Tab.vue'), meta: { title: 'Tab' } },
+  { path: '/Text', name: 'Text', component: () => import(/* webpackChunkName: "text" */ './views/Text.vue'), meta: { title: 'Text' } },
+  { path: '/ToTop', name: 'ToTop', component: () => import(/* webpackChunkName: "totop" */ './views/ToTop.vue'), meta: { title: 'ToTop' } },
+  { path: '/Upload', name: 'Upload', component: () => import(/* webpackChunkName: "upload" */ './views/Upload.vue'), meta: { title: 'Upload' } },
+];
 
-
-]
 export default routers;

package/src/styles/utils/nowrap.less

@@ -7,7 +7,7 @@
 
 .dpzvc-nowrap(@n, @i: 1) when (@i <=@n) {
   .dpzvc-nowrap-@{i} {
-    .dpzvc-nowrap;
+    .dpzvc-nowrap();
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: @i;

package/src/template/index.ejs

@@ -1,26 +1,40 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
-    <title>丁平中vue2.x组件库使用预览</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+  <meta charset="UTF-8">
+  <title>丁平中vc移动端组件</title>
+  <meta name="viewport"
+        content="width=device-width,
+                 initial-scale=1.0,
+                 maximum-scale=1.0,
+                 minimum-scale=1.0">
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  </style>
 </head>
 <body>
-    <div id="app"></div>
-    <script>
-        (function (doc, win) {
-            var docEl = doc.documentElement,
-                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
-                recalc = function () {
-                    var clientWidth = docEl.clientWidth;
-                    if (!clientWidth) return;
-                    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
-                };
-            // Abort if browser does not support addEventListener
-            if (!doc.addEventListener) return;
-            win.addEventListener(resizeEvt, recalc, false);
-            doc.addEventListener('DOMContentLoaded', recalc, false);
-        })(document, window);
-    </script>
+  <div id="app"></div>
+
+  <script>
+    (function (doc, win) {
+      var docEl = doc.documentElement;
+
+      function recalc() {
+        var clientWidth = docEl.clientWidth;
+        if (!clientWidth) return;
+
+        if (clientWidth > 750) clientWidth = 750;
+
+        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
+      }
+
+      win.addEventListener('resize', recalc);
+      doc.addEventListener('DOMContentLoaded', recalc);
+    })(document, window);
+  </script>
 </body>
-</html> 
+</html>

package/src/utils/util.js

@@ -1,5 +1,5 @@
 /**
- * Created by lcfevr on 16/7/18.
+ * Created by yishide on 16/7/18.
  */
 import Config from '../config/config'
 //

package/src/views/Header.vue

@@ -1,18 +1,18 @@
 <template>
     <div class="Header">
         <div class="item">
-        <Header title="Header" :fixed="fixed"></Header>
+        <DpHeader title="Header" :fixed="fixed"></DpHeader>
         </div>
         <div class="item">
-            <Header title="Header" :fixed="fixed">
+            <DpHeader title="Header" :fixed="fixed">
                 <span slot="right" @click="share">分享</span>
-            </Header>
+            </DpHeader>
         </div>
         <div class="item">
-        <Header title="Header" :fixed="fixed">
+        <DpHeader title="Header" :fixed="fixed">
             <span slot="left">返回</span>
             <span slot="right" @click="share">分享</span>
-        </Header>
+        </DpHeader>
         </div>
     </div>
 </template>
@@ -20,7 +20,7 @@
 <script>
 
     export default {
-        name: "header",
+        name: "dp-header",
 
         data(){
             return {

package/src/views/Progress.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="Progress">
-        <Progress v-model="progress" :barHeight="barHeight"></Progress>
+        <DpProgress v-model="progress" :barHeight="barHeight"></DpProgress>
     </div>
 </template>
 
 <script>
     export default {
-        name: "progress",
+        name: "dp-progress",
         data(){
             return {
                 progress:0,

package/webpack.base.config.js

@@ -1,74 +1,81 @@
-/**
- * 公共配置
- */
-var path = require('path');
-function resolve (dir) {
-    return path.join(__dirname, '.', dir)
-}
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
-    // 加载器
-    module: {
-        // https://doc.webpack-china.org/guides/migrating/#module-loaders-module-rules
-        rules: [
-            {
-                // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-                test: /\.vue$/,
-                loader: 'vue-loader',
-                options: {
-                    loaders: {
-                        css: 'vue-style-loader!css-loader',
-                        less: 'vue-style-loader!css-loader!less-loader'
-                    },
-                    postLoaders: {
-                        html: 'babel-loader'
-                    }
-                }
-            },
-            {
-                test: /\.js$/,
-                query:{
-                    presets: ['es2015','stage-0']
-                },
-                loader: 'babel-loader',
-                exclude: /node_modules/
-            },
-            {
-                test: /\.css$/,
-                use: [
-                    'style-loader',
-                    'css-loader',
-                    'autoprefixer-loader'
-                ]
-            },
-            {
-                test: /\.less$/,
-                use: [
-                    'style-loader',
-                    'css-loader',
-                    'less-loader'
-                ]
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    'style-loader',
-                    'css-loader',
-                    'sass-loader?sourceMap'
-                ]
-            },
-            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'},
-            { test: /\.(html|tpl)$/, loader: 'html-loader' }
+  entry: {
+    main: path.resolve(__dirname, 'src/main.js')
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash:8].js', // webpack5 推荐使用 contenthash
+    publicPath: '/'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  module: {
+    rules: [
+      // Vue 文件
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      // JS 文件
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+      // CSS 文件
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          },
+          'postcss-loader'
         ]
-    },
-
-
-
-    resolve: {
-        extensions: ['.js', '.vue'],
-        alias: {
-            'vue': 'vue/dist/vue.esm.js',
-            '@': resolve('src/components')
+      },
+      // LESS 文件
+      {
+        test: /\.less$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2
+            }
+          },
+          'postcss-loader',
+          'less-loader'
+        ]
+      },
+      // 图片、字体等资源
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff2?)$/,
+        type: 'asset', // webpack5 新资源模块
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024 // 10kb
+          }
+        },
+        generator: {
+          filename: 'assets/[name].[hash:7][ext]'
         }
-    }
-};
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
+  devtool: 'source-map'
+};

package/webpack.dev.config.js

@@ -1,67 +1,40 @@
-/**
- * 本地预览
- */
-
-var path = require('path');
-var fs = require('fs');
-var webpack = require('webpack');
-// var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var merge = require('webpack-merge');
-var webpackBaseConfig = require('./webpack.base.config.js');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-
-
-process.env.NODE_ENV = '"development"'
-module.exports = merge(webpackBaseConfig, {
-    // 入口
-    entry: {
-        main: './src/main',
-        vendors: ['vue', 'vue-router']
-    },
-    // 输出
-    output: {
-        path:path.join(__dirname, './example'),
-        publicPath: '',
-        filename: '[name].js',
-        chunkFilename: '[name].chunk.js'
-    },
-    resolve: {
-        alias: {
-            dpzvc: './src/index',
-            vue: 'vue/dist/vue.js'
-        }
-    },
-    plugins: [
-
-        new webpack.DefinePlugin({
-                'process.env.NODE_ENV': process.env.NODE_ENV,
-        }),
-        new ExtractTextPlugin({ filename: '[name].css', disable: true, allChunks: true }),
-        new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }),
-        new webpack.LoaderOptionsPlugin({
-            // test: /\.xxx$/, // may apply this only for some modules
-            options: {
-                babel:{
-                    presets: ['es2015','stage-0'],
-                    plugins: ['transform-runtime']
-                }
-            }
-        }),
-        new HtmlWebpackPlugin({
-            inject: true,
-            filename: '../example/index.html',
-            template: './src/template/index.ejs'
-        }),
-        new FriendlyErrorsPlugin()
-    ],
-    devServer:{
-        contentBase:"./",
-        // host:"192.168.1.101",
-        // host:"192.168.0.131",
-         host:"localhost",
-        port:"3000"
-    }
-});
+const path = require('path');
+const { merge } = require('webpack-merge');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const baseConfig = require('./webpack.base.config.js');
 
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    main: path.resolve(__dirname, 'src/main.js'),
+    vendors: ['vue', 'vue-router']
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist-dev'),
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
+    publicPath: '/',
+  },
+  devtool: 'eval-source-map',
+  devServer: {
+    static: { directory: path.resolve(__dirname, 'dist-dev') },
+    compress: true,
+    hot: true,
+    historyApiFallback: true,
+    port: 3000
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname,'src/template/index.ejs'),
+      inject: true,
+      filename: 'index.html'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[name].chunk.css'
+    })
+  ]
+});