Skip to content

I
iview-project
Commit 9a289674 authored by 梁灏's avatar 梁灏
Browse files
Options

init 

init
parent 86098dab
Show whitespace changes
Inline Side-by-side
Showing with 422 additions and 0 deletions
.gitignore 0 → 100644
View file @ 9a289674
.idea
.idea/
.DS_Store
node_modules/
.project
dist
dist/*
src/config/*.tmp
src/config/env.js
/index.html
/index_prod.html
\ No newline at end of file
README.md 0 → 100644
View file @ 9a289674
# iView-project
> 源自[https://github.com/icarusion/vue-vueRouter-webpack](https://github.com/icarusion/vue-vueRouter-webpack)
本工程适用于基于 Vue.js1.0 + vue-router + webpack + iView 的项目，已经将 iView 配置完成，只需要按步骤初始化即可。
## 安装
```bush
// 安装前请先确保已安装node和npm
// 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
npm install webpack -g
npm install webpack-dev-server -g
// 安装成功后,再安装依赖
npm install
```
## 运行
### 开发环境
```bush
// 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行
npm run init
npm run dev
```
### 生产环境(打包)
```bush
npm run build
```
### 访问
在浏览器地址栏输入[http://127.0.0.1:8080](http://127.0.0.1:8080)
package.json 0 → 100644
View file @ 9a289674
{
"name": "iview-project",
"version": "1.0.0",
"description": "A base project using Vue.js1.0、Vue-Router、webpack and with iView.",
"main": "index.js",
"scripts": {
"init": "webpack --progress --config webpack.dev.config.js",
"dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iview/iview-project.git"
},
"author": "Aresn",
"license": "MIT",
"dependencies": {
"vue": "^1.0.26",
"vue-router": "^0.7.13",
"iview": "0.9.8-rc-1"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^2.22.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.10.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1"
},
"bugs": {
"url": "https://github.com/iview/iview-project/issues"
},
"homepage": "https://www.iviewui.com"
}
src/components/app.vue 0 → 100644
View file @ 9a289674
<style scoped>
@import '../styles/common.css';
</style>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {}
},
ready () {
},
beforeDestroy () {
},
methods: {
}
}
</script>
src/config/config.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/7/18.
*/
import Env from './env';
let config = {
env: Env
};
export default config;
\ No newline at end of file
src/directives/time.js 0 → 100644
View file @ 9a289674
/**
* 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
src/filters/number-separator.js 0 → 100644
View file @ 9a289674
/**
* 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/libs/util.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/7/18.
*/
let util = {
};
util.alert = function(content) {
window.alert(content);
};
export default util;
\ No newline at end of file
src/main.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/6/20.
*/
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router';
import Env from './config/env';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(VueRouter);
Vue.use(iView);
// 开启debug模式
Vue.config.debug = true;
// 路由配置
let router = new VueRouter({
// 是否开启History模式的路由,默认开发环境开启,生产环境不开启。如果生产环境的服务端没有进行相关配置,请慎用
history: Env != 'production'
});
router.map(Routers);
router.beforeEach(() => {
window.scrollTo(0, 0);
});
router.afterEach(() => {
});
router.redirect({
'*': "/index"
});
router.start(App, '#app');
\ No newline at end of file
src/router.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/8/22.
*/
const routers = {
'/index': {
component (resolve) {
require(['./views/index.vue'], resolve);
}
}
};
export default routers;
\ No newline at end of file
src/template/index.ejs 0 → 100644
View file @ 9a289674
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Webpack App</title>
<meta charset="UTF-8">
<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] %>">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[1] %>"></script>
</body>
</html>
\ No newline at end of file
src/views/index.vue 0 → 100644
View file @ 9a289674
<style scoped lang="less">
.index{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
h1{
height: 150px;
img{
height: 100%;
}
}
h2{
color: #666;
}
.ivu-row{
height: 100%;
}
}
</style>
<template>
<div class="index">
<Row type="flex" justify="center" align="middle">
<i-col span="24">
<h1>
<img src="../images/logo.png">
</h1>
<h2>一套基于 Vue.js 的高质量UI组件库</h2>
</i-col>
</Row>
</div>
</template>
<script>
export default {
}
</script>
webpack.base.config.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/7/5.
*/
var path = require('path');
var webpack = require('webpack');
module.exports = {
// 入口
entry: {
main: './src/main',
vendors: ['vue', 'vue-router']
},
// 输出
output: {
path: path.join(__dirname, './dist')
},
// 加载器
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
{ 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' }
]
},
// 转es5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
plugins: [
]
};
\ No newline at end of file
webpack.dev.config.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/7/5.
*/
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) {
var buf = 'export default "development";';
fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){});
});
module.exports = config;
\ No newline at end of file
webpack.prod.config.js 0 → 100644
View file @ 9a289674
/**
* Created by aresn on 16/7/5.
*/
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) {
var buf = 'export default "production";';
fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){});
});
module.exports = config;
\ 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