init

init

build/build-components.js

@@ -0,0 +1,3 @@
+/**
+ * todo 编译.vue组件为.js文件
+ */

build/build-style.js

@@ -0,0 +1,68 @@
+/**
+ * 编译样式文件
+ * iview.css 是基础组件css
+ * iview.pack.css 是套装的全部css
+ * iview.all.css 是基础组件加套装的全部css
+ * packages/*.css 是某个套装的css
+ * article.css 是文章排版的css
+ * */
+var gulp = require('gulp');
+var minifyCSS = require('gulp-minify-css');
+var less = require('gulp-less');
+var rename = require('gulp-rename');
+var concat = require('gulp-concat');
+
+// 组件的基础css
+gulp.task('base', function () {
+     gulp.src('../styles/index.less')
+         .pipe(less())
+         .pipe(minifyCSS())
+         .pipe(rename('iview.css'))
+         .pipe(gulp.dest('../dist/styles'))
+});
+
+// 字体
+gulp.task('fonts', function () {
+    gulp.src('../styles/common/iconfont/fonts/*.*')
+        .pipe(gulp.dest('../dist/styles/fonts'))
+});
+
+// 文章排版
+gulp.task('article', function () {
+    gulp.src('../styles/article/index.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('article.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 套装的全部css
+gulp.task('pack-all', function () {
+    gulp.src('../styles/package.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('iview.pack.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 每个套装的css
+gulp.task('pack', function () {
+    gulp.src(['../styles/packages/*.less', '!../styles/packages/index.less'])
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename({
+            prefix: 'iview.pack.'
+        }))
+        .pipe(gulp.dest('../dist/styles/packages'))
+});
+
+// 全部css(包含组件和套装)
+gulp.task('all', function () {
+    gulp.src(['../styles/index.less', '../styles/package.less'])
+        .pipe(less())
+        .pipe(concat('iview.all.css'))
+        .pipe(minifyCSS())
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+gulp.task('default', ['base', 'fonts', 'article', 'pack-all', 'pack', 'all']);

build/vue.config.js

@@ -0,0 +1,12 @@
+var compiler = require('vueify').compiler;
+var fs = require('fs');
+
+var data = fs.readFileSync('../components/button/button.vue', 'utf-8');
+// console.log(data);
+
+var fileContent = data;
+var filePath = '../components/button';
+compiler.compile(fileContent, filePath, function (err, result) {
+    // result is a common js module string
+    console.log(result);
+});

build/webpack.config.js

@@ -0,0 +1,72 @@
+/**
+ * 本地预览
+ */
+
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    // 入口
+    entry: {
+        main: './local/main',
+        vendors: ['vue', 'vue-router']
+    },
+    // 输出
+    output: {
+        path: path.join(__dirname, '.././local/dist'),
+        publicPath: '/local/dist/',
+        filename: '[name].js',
+        chunkFilename: '[name].chunk.js'
+    },
+    // 加载器
+    module: {
+        loaders: [
+            { test: /\.vue$/, loader: 'vue' },
+            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
+            { test: /\.css$/, loader: 'style!css!autoprefixer'},
+            { test: /\.less$/, loader: 'style!css!less' },
+            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
+            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'},
+            { test: /\.(html|tpl)$/, loader: 'html-loader' }
+        ]
+    },
+    vue: {
+        loaders: {
+            css: ExtractTextPlugin.extract(
+                "style-loader",
+                "css-loader?sourceMap",
+                {
+                    publicPath: "../local/dist/"
+                }
+            ),
+            less: ExtractTextPlugin.extract(
+                'vue-style-loader',
+                'css-loader!less-loader'
+            ),
+            js: 'babel'
+        }
+    },
+    // 转es5
+    babel: {
+        presets: ['es2015'],
+        plugins: ['transform-runtime']
+    },
+    resolve: {
+        // require时省略的扩展名，如：require('module') 不需要module.js
+        extensions: ['', '.js', '.vue'],
+        alias: {
+            iview: '../.././index'
+        }
+    },
+    plugins: [
+        new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }),             // 提取CSS
+        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),                           // 提取第三方库
+        new HtmlWebpackPlugin({                                                                     // 构建html文件
+            filename: '../../index.html',
+            template: './local/template/index.html',
+            inject: 'body'
+        })
+    ]
+};