Commit 53b74b99 authored by 梁灏's avatar 梁灏

publish iview project2

parent ee2684b2
{
"presets": [
["es2015", { "modules": false }]
]
}
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
"description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.", "description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"dev": "webpack-dev-server --content-base ./ --inline --hot --compress --history-api-fallback --config webpack.dev.config.js", "init": "webpack --progress --config webpack.dev.config.js",
"dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js" "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
}, },
"repository": { "repository": {
......
<style scoped> <style scoped>
@import '../styles/common.css'; @import 'styles/common.css';
</style> </style>
<template> <template>
<div> <div>
......
/**
* Created by aresn on 16/7/18.
*/
import Env from './env'; import Env from './env';
let config = { let config = {
......
/**
* Created by aresn on 16/7/18.
*/
export default {
bind () {
},
update () {
this.el.innerHTML = new Date();
this.timeout = setInterval(() => {
this.el.innerHTML = new Date();
})
},
unbind () {
clearInterval(this.timeout);
}
};
\ No newline at end of file
/**
* Created by aresn on 16/7/4.
*/
/**
* 千位分隔符
* */
export default function (value) {
return value.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
\ No newline at end of file
src/images/logo.png

3.8 KB | W: | H:

src/images/logo.png

1.52 KB | W: | H:

src/images/logo.png
src/images/logo.png
src/images/logo.png
src/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
/**
* Created by aresn on 16/7/18.
*/
let util = { let util = {
}; };
util.alert = function(content) { util.title = function (title) {
window.alert(content); title = title ? title + ' - Home' : 'iView project';
window.document.title = title;
}; };
export default util; export default util;
\ No newline at end of file
/**
* Created by aresn on 16/6/20.
*/
import Vue from 'vue'; import Vue from 'vue';
import iView from 'iview';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router'; import Routers from './router';
import Env from './config/env'; import Util from './libs/util';
import iView from 'iview'; import App from './app.vue';
import 'iview/dist/styles/iview.css'; import 'iview/dist/styles/iview.css';
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(iView); Vue.use(iView);
// 开启debug模式
Vue.config.debug = true;
// 路由配置 // 路由配置
let router = new VueRouter({ const RouterConfig = {
// 是否开启History模式的路由,默认开发环境开启,生产环境不开启。如果生产环境的服务端没有进行相关配置,请慎用 mode: 'history',
history: Env != 'production' routes: Routers
};
const router = new VueRouter(RouterConfig);
router.beforeEach((to, from, next) => {
iView.LoadingBar.start();
Util.title(to.meta.title);
next();
}); });
router.map(Routers); router.afterEach((to, from, next) => {
iView.LoadingBar.finish();
router.beforeEach(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
router.afterEach(() => { new Vue({
el: '#app',
}); router: router,
render: h => h(App)
router.redirect({
'*': "/index"
}); });
router.start(App, '#app');
\ No newline at end of file
/** const routers = [
* Created by aresn on 16/8/22. {
*/ path: '/',
const routers = { meta: {
'/index': { title: ''
component (resolve) { },
require(['./views/index.vue'], resolve); component: (resolve) => require(['./views/index.vue'], resolve)
}
} }
}; ];
export default routers; export default routers;
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<title>Webpack App</title> <title>iView project</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>"> <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
......
import Vue from 'vue';
import iView from 'iview';
import VueRouter from 'vue-router';
\ No newline at end of file
...@@ -14,8 +14,12 @@ ...@@ -14,8 +14,12 @@
} }
h2{ h2{
color: #666; color: #666;
margin-bottom: 200px;
p{
margin: 0 0 50px;
}
} }
.ivu-row{ .ivu-row-flex{
height: 100%; height: 100%;
} }
} }
...@@ -23,17 +27,27 @@ ...@@ -23,17 +27,27 @@
<template> <template>
<div class="index"> <div class="index">
<Row type="flex" justify="center" align="middle"> <Row type="flex" justify="center" align="middle">
<i-col span="24"> <Col span="24">
<h1> <h1>
<img src="../images/logo.png"> <img src="../images/logo.png">
</h1> </h1>
<h2>一套基于 Vue.js 的高质量UI组件库</h2> <h2>
</i-col> <p>Welcome to your iView app!</p>
<Button type="ghost" @click="handleStart">Start iView</Button>
</h2>
</Col>
</Row> </Row>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: {
handleStart () {
this.$Modal.info({
title: 'Bravo',
content: 'Now, enjoy the convenience of iView.'
});
}
}
} }
</script> </script>
/** const path = require('path');
* Created by aresn on 16/7/5. const webpack = require('webpack');
*/ const ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
module.exports = { module.exports = {
// 入口
entry: { entry: {
main: './src/main', main: './src/main',
vendors: ['vue', 'vue-router'] vendors: './src/vendors'
}, },
// 输出
output: { output: {
path: path.join(__dirname, './dist') path: path.join(__dirname, './dist')
}, },
// 加载器
module: { module: {
loaders: [ rules: [
{ test: /\.vue$/, loader: 'vue' }, {
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, test: /\.vue$/,
{ test: /\.css$/, loader: 'style!css!autoprefixer'}, loader: 'vue-loader',
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, options: {
{ test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'}, loaders: {
{ test: /\.(html|tpl)$/, loader: 'html-loader' } less: ExtractTextPlugin.extract({
use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
}),
css: ExtractTextPlugin.extract({
use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
}
}
},
{
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'autoprefixer-loader'],
fallback: 'style-loader'
})
},
{
test: /\.less/,
use: ExtractTextPlugin.extract({
use: ['autoprefixer-loader', 'less-loader'],
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
},
{
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
] ]
}, },
// 转es5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: { resolve: {
// require时省略的扩展名,如:require('module') 不需要module.js extensions: ['.js', '.vue'],
extensions: ['', '.js', '.vue'],
// 别名,可以直接使用别名来代表设定的路径以及其他
alias: { alias: {
filter: path.join(__dirname, './src/filters'), 'vue': 'vue/dist/vue.esm.js'
components: path.join(__dirname, './src/components')
} }
}, }
plugins: [
]
}; };
\ No newline at end of file
/** const webpack = require('webpack');
* Created by aresn on 16/7/5. const HtmlWebpackPlugin = require('html-webpack-plugin');
*/ const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
var webpack = require('webpack');
var config = require('./webpack.base.config');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.devtool = '#source-map'; // source-map
config.output.publicPath = '/dist/'; // 资源路径
config.output.filename = '[name].js'; // 入口js命名
config.output.chunkFilename = '[name].chunk.js'; // 路由js命名
config.vue = {
loaders: {
css: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap",
{
publicPath: "/dist/"
}
),
less: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!less-loader'
),
sass: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!sass-loader'
)
}
};
config.plugins = (config.plugins || []).concat([
new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }), // 提取CSS
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), // 提取第三方库
new HtmlWebpackPlugin({ // 构建html文件
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
})
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) { fs.open('./src/config/env.js', 'w', function (err, fd) {
var buf = 'export default "development";'; const buf = 'export default "development";';
fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){}); fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
}); });
module.exports = config; module.exports = merge(webpackBaseConfig, {
\ No newline at end of file devtool: '#source-map',
output: {
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js'
}),
new HtmlWebpackPlugin({
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
})
]
});
\ No newline at end of file
/** const webpack = require('webpack');
* Created by aresn on 16/7/5. const HtmlWebpackPlugin = require('html-webpack-plugin');
*/ const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
var webpack = require('webpack');
var config = require('./webpack.base.config');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.output.publicPath = './dist/'; // 资源路径,根据需要可改为cdn地址
config.output.filename = '[name].[hash].js'; // 带hash值的入口js名称
config.output.chunkFilename = '[name].[hash].chunk.js'; // 带hash值的路由js名称
config.vue = {
loaders: {
css: ExtractTextPlugin.extract(
"style-loader",
"css-loader",
{
publicPath: "../dist/"
// 特别提醒,如果这里的publicPath是以http://xxx.xxx这样以http://开头的,要写成
// publicPath: "http:\\xxx.xxx",否则会编译为"http:/xxx.xxx"
}
),
less: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!less-loader'
),
sass: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!sass-loader'
)
}
};
config.plugins = (config.plugins || []).concat([
new ExtractTextPlugin("[name].[hash].css",{ allChunks : true,resolve : ['modules'] }), // 提取带hash值的css名称
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[hash].js'), // 提取带hash值的第三方库名称
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({ // 压缩文件
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({ // 构建html文件
filename: '../index_prod.html',
template: './src/template/index.ejs',
inject: false
})
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) { fs.open('./src/config/env.js', 'w', function (err, fd) {
var buf = 'export default "production";'; const buf = 'export default "production";';
fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){}); fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
}); });
module.exports = config; module.exports = merge(webpackBaseConfig, {
\ No newline at end of file output: {
publicPath: '/dist/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].[hash].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.[hash].js'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
filename: '../index_prod.html',
template: './src/template/index.ejs',
inject: false
})
]
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment