Skip to content

Commit 9a28967

Browse files
icarusionicarusion
committed
init
init
1 parent 86098da commit 9a28967

17 files changed

+422
-0
lines changed

‎.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.idea
2+
.idea/
3+
.DS_Store
4+
node_modules/
5+
.project
6+
dist
7+
dist/*
8+
src/config/*.tmp
9+
src/config/env.js
10+
/index.html
11+
/index_prod.html

‎README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# iView-project
2+
> 源自[https://github.com/icarusion/vue-vueRouter-webpack](https://github.com/icarusion/vue-vueRouter-webpack)
3+
4+
本工程适用于基于 Vue.js1.0 + vue-router + webpack + iView 的项目，已经将 iView 配置完成，只需要按步骤初始化即可。
5+
6+
## 安装
7+
```bush
8+
// 安装前请先确保已安装node和npm
9+
// 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
10+
npm install webpack -g
11+
npm install webpack-dev-server -g
12+
13+
// 安装成功后,再安装依赖
14+
npm install
15+
```
16+
## 运行
17+
### 开发环境
18+
```bush
19+
// 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行
20+
npm run init
21+
npm run dev
22+
```
23+
### 生产环境(打包)
24+
```bush
25+
npm run build
26+
```
27+
### 访问
28+
在浏览器地址栏输入[http://127.0.0.1:8080](http://127.0.0.1:8080)

‎package.json

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "iview-project",
3+
"version": "1.0.0",
4+
"description": "A base project using Vue.js1.0、Vue-Router、webpack and with iView.",
5+
"main": "index.js",
6+
"scripts": {
7+
"init": "webpack --progress --config webpack.dev.config.js",
8+
"dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
9+
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/iview/iview-project.git"
14+
},
15+
"author": "Aresn",
16+
"license": "MIT",
17+
"dependencies": {
18+
"vue": "^1.0.26",
19+
"vue-router": "^0.7.13",
20+
"iview": "0.9.8-rc-1"
21+
},
22+
"devDependencies": {
23+
"autoprefixer-loader": "^2.0.0",
24+
"babel": "^6.3.13",
25+
"babel-core": "^6.3.21",
26+
"babel-loader": "^6.2.0",
27+
"babel-plugin-transform-runtime": "^6.3.13",
28+
"babel-preset-es2015": "^6.3.13",
29+
"babel-runtime": "^5.8.34",
30+
"css-loader": "^0.23.1",
31+
"extract-text-webpack-plugin": "^1.0.1",
32+
"file-loader": "^0.8.5",
33+
"html-loader": "^0.3.0",
34+
"html-webpack-plugin": "^2.22.0",
35+
"less": "^2.7.1",
36+
"less-loader": "^2.2.3",
37+
"node-sass": "^3.10.1",
38+
"sass-loader": "^4.0.2",
39+
"style-loader": "^0.13.1",
40+
"url-loader": "^0.5.7",
41+
"vue-hot-reload-api": "^1.2.0",
42+
"vue-html-loader": "^1.2.0",
43+
"vue-loader": "^7.2.0",
44+
"vue-style-loader": "^1.0.0",
45+
"webpack": "^1.13.1"
46+
},
47+
"bugs": {
48+
"url": "https://github.com/iview/iview-project/issues"
49+
},
50+
"homepage": "https://www.iviewui.com"
51+
}

‎src/components/app.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<style scoped>
2+
@import '../styles/common.css';
3+
</style>
4+
<template>
5+
<div>
6+
<router-view></router-view>
7+
</div>
8+
</template>
9+
<script>
10+
export default {
11+
data () {
12+
return {}
13+
},
14+
ready () {
15+
16+
},
17+
beforeDestroy () {
18+
19+
},
20+
methods: {
21+
22+
}
23+
}
24+
</script>

‎src/config/config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Created by aresn on 16/7/18.
3+
*/
4+
import Env from './env';
5+
6+
let config = {
7+
env: Env
8+
};
9+
export default config;

‎src/directives/time.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Created by aresn on 16/7/18.
3+
*/
4+
export default {
5+
bind () {
6+
7+
},
8+
update () {
9+
this.el.innerHTML = new Date();
10+
this.timeout = setInterval(() => {
11+
this.el.innerHTML = new Date();
12+
})
13+
},
14+
unbind () {
15+
clearInterval(this.timeout);
16+
}
17+
};

‎src/filters/number-separator.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Created by aresn on 16/7/4.
3+
*/
4+
/**
5+
* 千位分隔符
6+
* */
7+
export default function (value) {
8+
return value.toString().replace(/\B(?=(\d{3})+$)/g,',');
9+
}

‎src/images/logo.png

3.8 KB
Loading

‎src/libs/util.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Created by aresn on 16/7/18.
3+
*/
4+
let util = {
5+
6+
};
7+
util.alert = function(content) {
8+
window.alert(content);
9+
};
10+
11+
export default util;

‎src/main.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Created by aresn on 16/6/20.
3+
*/
4+
import Vue from 'vue';
5+
import VueRouter from 'vue-router';
6+
import App from 'components/app.vue';
7+
import Routers from './router';
8+
import Env from './config/env';
9+
import iView from 'iview';
10+
import 'iview/dist/styles/iview.css';
11+
12+
Vue.use(VueRouter);
13+
Vue.use(iView);
14+
15+
// 开启debug模式
16+
Vue.config.debug = true;
17+
18+
// 路由配置
19+
let router = new VueRouter({
20+
// 是否开启History模式的路由,默认开发环境开启,生产环境不开启。如果生产环境的服务端没有进行相关配置,请慎用
21+
history: Env != 'production'
22+
});
23+
24+
router.map(Routers);
25+
26+
router.beforeEach(() => {
27+
window.scrollTo(0, 0);
28+
});
29+
30+
router.afterEach(() => {
31+
32+
});
33+
34+
router.redirect({
35+
'*': "/index"
36+
});
37+
router.start(App, '#app');

‎src/router.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Created by aresn on 16/8/22.
3+
*/
4+
const routers = {
5+
'/index': {
6+
component (resolve) {
7+
require(['./views/index.vue'], resolve);
8+
}
9+
}
10+
};
11+
export default routers;

‎src/styles/common.css

Whitespace-only changes.

‎src/template/index.ejs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<title>Webpack App</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
7+
<link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
12+
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[1] %>"></script>
13+
</body>
14+
</html>

‎src/views/index.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<style scoped lang="less">
2+
.index{
3+
width: 100%;
4+
position: absolute;
5+
top: 0;
6+
bottom: 0;
7+
left: 0;
8+
text-align: center;
9+
h1{
10+
height: 150px;
11+
img{
12+
height: 100%;
13+
}
14+
}
15+
h2{
16+
color: #666;
17+
}
18+
.ivu-row{
19+
height: 100%;
20+
}
21+
}
22+
</style>
23+
<template>
24+
<div class="index">
25+
<Row type="flex" justify="center" align="middle">
26+
<i-col span="24">
27+
<h1>
28+
<img src="../images/logo.png">
29+
</h1>
30+
<h2>一套基于 Vue.js 的高质量UI组件库</h2>
31+
</i-col>
32+
</Row>
33+
</div>
34+
</template>
35+
<script>
36+
export default {
37+
38+
}
39+
</script>

‎webpack.base.config.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Created by aresn on 16/7/5.
3+
*/
4+
5+
var path = require('path');
6+
var webpack = require('webpack');
7+
8+
module.exports = {
9+
// 入口
10+
entry: {
11+
main: './src/main',
12+
vendors: ['vue', 'vue-router']
13+
},
14+
// 输出
15+
output: {
16+
path: path.join(__dirname, './dist')
17+
},
18+
// 加载器
19+
module: {
20+
loaders: [
21+
{ test: /\.vue$/, loader: 'vue' },
22+
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
23+
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
24+
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
25+
{ test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'},
26+
{ test: /\.(html|tpl)$/, loader: 'html-loader' }
27+
]
28+
},
29+
// 转es5
30+
babel: {
31+
presets: ['es2015'],
32+
plugins: ['transform-runtime']
33+
},
34+
resolve: {
35+
// require时省略的扩展名，如：require('module') 不需要module.js
36+
extensions: ['', '.js', '.vue'],
37+
// 别名，可以直接使用别名来代表设定的路径以及其他
38+
alias: {
39+
filter: path.join(__dirname, './src/filters'),
40+
components: path.join(__dirname, './src/components')
41+
}
42+
},
43+
plugins: [
44+
45+
]
46+
};

‎webpack.dev.config.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Created by aresn on 16/7/5.
3+
*/
4+
5+
var webpack = require('webpack');
6+
var config = require('./webpack.base.config');
7+
var HtmlWebpackPlugin = require('html-webpack-plugin');
8+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
9+
var fs = require('fs');
10+
11+
config.devtool = '#source-map'; // source-map
12+
config.output.publicPath = '/dist/'; // 资源路径
13+
config.output.filename = '[name].js'; // 入口js命名
14+
config.output.chunkFilename = '[name].chunk.js'; // 路由js命名
15+
16+
config.vue = {
17+
loaders: {
18+
css: ExtractTextPlugin.extract(
19+
"style-loader",
20+
"css-loader?sourceMap",
21+
{
22+
publicPath: "/dist/"
23+
}
24+
),
25+
less: ExtractTextPlugin.extract(
26+
'vue-style-loader',
27+
'css-loader!less-loader'
28+
),
29+
sass: ExtractTextPlugin.extract(
30+
'vue-style-loader',
31+
'css-loader!sass-loader'
32+
)
33+
}
34+
};
35+
36+
config.plugins = (config.plugins || []).concat([
37+
new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }), // 提取CSS
38+
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), // 提取第三方库
39+
new HtmlWebpackPlugin({ // 构建html文件
40+
filename: '../index.html',
41+
template: './src/template/index.ejs',
42+
inject: false
43+
})
44+
]);
45+
46+
// 写入环境变量
47+
fs.open('./src/config/env.js', 'w', function (err, fd) {
48+
var buf = 'export default "development";';
49+
fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){});
50+
});
51+
52+
module.exports = config;

0 commit comments

Comments
 (0)