mirror of
https://github.com/xsf0105/vue3-h5-template.git
synced 2025-04-05 19:41:57 +08:00
debug
This commit is contained in:
xsf
parent
a8133a3bfe
commit
aa270ce8d8
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,5 +0,0 @@
|
||||
node_modules/
|
||||
build/
|
||||
d.html
|
||||
npm-debug.log
|
||||
.idea/
|
||||
11
index.html
11
index.html
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
||||
<title></title>
|
||||
<link href="/build/style.css" rel="stylesheet"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/build/vendor.js"></script><script src="/build/build.js"></script></body>
|
||||
</html>
|
||||
11
index.tpl
11
index.tpl
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
46
package.json
46
package.json
@ -1,46 +0,0 @@
|
||||
{
|
||||
"name": "vue-spa-webpack",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"extract-text-webpack-plugin": "^0.8.2",
|
||||
"mint-ui": "^0.2.7",
|
||||
"open-browser-webpack-plugin": "^0.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.3.17",
|
||||
"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.0",
|
||||
"cssnext-loader": "^1.0.1",
|
||||
"file-loader": "^0.8.4",
|
||||
"hammerjs": "^2.0.6",
|
||||
"html-loader": "^0.3.0",
|
||||
"html-webpack-plugin": "^1.6.2",
|
||||
"jshint-loader": "^0.8.3",
|
||||
"style-loader": "^0.13.0",
|
||||
"url-loader": "^0.5.6",
|
||||
"vue": "^1.0.20",
|
||||
"vue-hot-reload-api": "^1.2.2",
|
||||
"vue-html-loader": "^1.1.0",
|
||||
"vue-loader": "^8.2.0",
|
||||
"vue-router": "^0.7.11",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"webpack": "^1.12.9",
|
||||
"webpack-dev-server": "^1.14.0",
|
||||
"webpack-zepto": "0.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"mb": "export PRODUCTION=1 && webpack --progress --hide-modules",
|
||||
"wb": "set PRODUCTION=1 && webpack --progress --hide-modules",
|
||||
"start": "webpack-dev-server --progress --profile --colors --inline ",
|
||||
"port": "webpack-dev-server --progress --colors --inline --port 9090 ",
|
||||
"hot": "webpack-dev-server --progress --colors --inline --hot",
|
||||
"cp": "cp -r index.html ./build/ d:/wamp/www/vue",
|
||||
"ip": "webpack-dev-server --progress --colors --hot --host=0.0.0.0 --port 9000"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
73
readme.md
73
readme.md
@ -1,73 +0,0 @@
|
||||
# Example VUE-SPA
|
||||
- If you have any questions, please contacts by my QQ群:424073859
|
||||
- Any helpful suggestions would be welcome！（欢迎提出意见和建议！如有帮助，欢迎star！）
|
||||
- Reactjs: https://github.com/allan2coder/React-SPA-Tutorial
|
||||
- Angularjs(2.x): https://github.com/allan2coder/angular2-SPA
|
||||
|
||||
|
||||
|
||||
## How to use
|
||||
``` bash
|
||||
$ git clone https://github.com/allan2coder/Vue-SPA.git <yourAppName>
|
||||
$ cd <yourAppName>
|
||||
$ npm install
|
||||
```
|
||||
|
||||
launch the project app.
|
||||
``` bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Then, You should see a new browser tap opening and a page of "index.html" in http://127.0.0.1:8080.
|
||||
|
||||
-watch on your mobile
|
||||
|
||||
```
|
||||
npm run ip
|
||||
```
|
||||
访问 你本地的ip:9000
|
||||
|
||||
## Release
|
||||
MAC
|
||||
|
||||
```
|
||||
npm run mb
|
||||
```
|
||||
|
||||
windows
|
||||
|
||||
```
|
||||
npm run wb
|
||||
```
|
||||
|
||||
## Construction
|
||||
<pre>
|
||||
│──.gitignore # 忽略无需git控制的文件 比如 node_modules
|
||||
│──package.json # 项目配置
|
||||
│──readme.md # 项目说明
|
||||
│──index.html # 首页
|
||||
│──index.tpl # 首页模板 在发布的时候 执行 PRODUCTION=1 webpack 会生成一个d.html并注入脚本，样式，达到版本控制的目的
|
||||
│──webpack.config.js # webpack 配置文件
|
||||
│
|
||||
├─node_modules
|
||||
└─src
|
||||
│──app.js # 启动配置，配置路由，过滤器
|
||||
│──app.vue # 主vue
|
||||
│──filters.js # 过滤器
|
||||
│──routers.js # 路由
|
||||
│
|
||||
├─components # 组件
|
||||
│ │──my-component.vue
|
||||
│
|
||||
├─css # 公用样式
|
||||
│ │──common.css
|
||||
│
|
||||
└─views # 页面
|
||||
──about.vue
|
||||
──home.vue
|
||||
──not-found.vue
|
||||
</pre>
|
||||
|
||||
##学习参考：
|
||||
待续...
|
||||
|
||||
22
src/app.js
22
src/app.js
@ -1,22 +0,0 @@
|
||||
//加载公共样式
|
||||
require('./css/common.css');
|
||||
require('./css/main.css');
|
||||
require('./css/animate.css');
|
||||
|
||||
const Vue = require('vue');
|
||||
const VueRouter = require('vue-router');
|
||||
const filters = require('./common/filters'); // register filters 自定义过滤器
|
||||
const _config = require('./common/config'); // API接口 可以在需要的页面引入,此页面可以不引入!
|
||||
|
||||
var App = Vue.extend(require('./app.vue'));
|
||||
Vue.use(VueRouter);
|
||||
|
||||
var router = new VueRouter({
|
||||
hashbang: true, //为true的时候 example.com/#!/foo/bar ， false的时候 example.com/#/foo/bar
|
||||
//abstract:true, //地址栏不会有变化
|
||||
linkActiveClass:'custom-active-class' //全局设置连接匹配时的类名 参考http://vuejs.github.io/vue-router/en/link.html
|
||||
});
|
||||
|
||||
require('./routers')(router);
|
||||
|
||||
router.start(App,'#app');
|
||||
85
src/app.vue
85
src/app.vue
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<router-view></router-view>
|
||||
<footer class="fixed-bottom clearfix">
|
||||
<div class="col4" v-for="item in items" v-link="item">
|
||||
<a class="cur" href="" v-text="item.name">{{$index}}</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<button @click="showPanel()" style="float:right;">侧边栏按钮</button>
|
||||
|
||||
<section class="panel" id="panelNav" :class="{ 'active': isShow }">
|
||||
<ul class="nav-aside">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">List</a></li>
|
||||
<li><a href="#">Demo</a></li>
|
||||
<li><a href="#">Download</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'mint-ui/lib/style.css';
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
items:{
|
||||
'/':{
|
||||
name:'index'
|
||||
},
|
||||
'/news': {
|
||||
name:'news'
|
||||
},
|
||||
'/search/:viewId': {
|
||||
name:'search'
|
||||
},
|
||||
'/about':{
|
||||
name:'about'
|
||||
}
|
||||
},
|
||||
isShow: false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
showPanel: function () {
|
||||
this.isShow = !this.isShow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.panel.active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
z-index: 980;
|
||||
width: 120px;
|
||||
background-color: #333;
|
||||
-webkit-transform: translate3d(-120px, 0, 0);
|
||||
transform: translate3d(-120px, 0, 0);
|
||||
-webkit-transition: -webkit-transform 0.3s ease-in-out;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.nav-aside {
|
||||
line-height: 40px;
|
||||
}
|
||||
.nav-aside li {
|
||||
border-bottom: 1px solid #222;
|
||||
color: #fff;
|
||||
}
|
||||
.nav-aside li a {
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,24 +0,0 @@
|
||||
const server_host = 'http://115.239.229.12:8020/';
|
||||
module.exports = {
|
||||
SERVICE: {
|
||||
POLICY: {
|
||||
LIST: server_host + 'policy/findPage',
|
||||
DETAILS: server_host + 'policy/load',
|
||||
STORE: server_host + 'policyCollect/save',
|
||||
UNSTORE: server_host + 'policyCollect/delete',
|
||||
SHARE: server_host + 'policyShare/save',
|
||||
PRAISE: server_host + 'policy/praise',
|
||||
// 在线匹配
|
||||
MATCHONLINE: server_host + 'policy/matchePolicy'
|
||||
|
||||
},
|
||||
EDU: {
|
||||
LIST: server_host + 'educationStudy/findPage',
|
||||
DETAILS: server_host + 'educationStudy/load',
|
||||
STORE: server_host + 'educationStudyCollect/save',
|
||||
UNSTORE: server_host + 'educationStudyCollect/delete',
|
||||
SHARE: server_host + 'educationStudyShare/save',
|
||||
PRAISE: server_host + 'educationStudy/praise'
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
|
||||
|
||||
function timeago(time) {
|
||||
time = new Date(time);
|
||||
var delta = parseInt((new Date() - time) / 1000, 10);
|
||||
if (delta <= 0) return 'just now';
|
||||
|
||||
var minutes = delta / 60;
|
||||
if (minutes < 1) return 'less than a minute ago';
|
||||
if (minutes < 2) return 'about a minute ago';
|
||||
|
||||
var hours = minutes / 60;
|
||||
if (hours < 1) return parseInt(minutes, 10) + ' minutes ago';
|
||||
if (hours < 1.5) return 'about an hour ago';
|
||||
|
||||
var days = hours / 24;
|
||||
if (days < 1) return Math.round(hours) + ' hours ago';
|
||||
if (days < 7) return parseInt(days, 10) + ' days ago';
|
||||
|
||||
var month = time.getMonth();
|
||||
if (month < 10) month = '0' + month;
|
||||
var date = time.getDate();
|
||||
if (date < 10) date = '0' + date;
|
||||
return [time.getFullYear(), month, date].join('-');
|
||||
}
|
||||
|
||||
|
||||
function urlize(text) {
|
||||
if (!text) return '';
|
||||
var pattern = /https?:\/\/[^\s<]+[^<.,:;"')\]\s]/g;
|
||||
return text.replace(pattern, function(u) {
|
||||
var t = u.replace('http://', '');
|
||||
return '<a href="' + u + '">' + t + '</a>';
|
||||
});
|
||||
}
|
||||
|
||||
//获取图片地址，如果地址带有 http://那么就认为是绝对地址，然后直接返回
|
||||
function imgUrl(url){
|
||||
if(url.match(/http:\/\//)){
|
||||
return url;
|
||||
}
|
||||
|
||||
//全站统一配置，页面首先会引用
|
||||
if(window.abp){
|
||||
return window.abp.imageDomain + url;
|
||||
}
|
||||
var testUrl = 'http://img.yaomaiche.com'; //此url到时候走配置
|
||||
|
||||
if(this.isTest){
|
||||
testUrl = 'http://img.test.yaomaiche.com';
|
||||
}
|
||||
return testUrl + url;
|
||||
}
|
||||
|
||||
|
||||
//显示价格
|
||||
function price(value,currency){
|
||||
var digitsRE = /(\d{3})(?=\d)/g
|
||||
value = parseFloat(value)
|
||||
if (!isFinite(value) || (!value && value !== 0)) return ''
|
||||
currency = currency != null ? currency : '¥'
|
||||
var stringified = Math.abs(value).toFixed(2)
|
||||
var _int = stringified.slice(0, -3)
|
||||
var i = _int.length % 3
|
||||
var head = i > 0
|
||||
? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
|
||||
: ''
|
||||
var _float = stringified.slice(-3)
|
||||
var sign = value < 0 ? '-' : ''
|
||||
return currency + sign + head +
|
||||
_int.slice(i).replace(digitsRE, '$1,') +
|
||||
_float
|
||||
}
|
||||
|
||||
exports.imgUrl = imgUrl;
|
||||
exports.price = price;
|
||||
exports.timeago = timeago;
|
||||
exports.urlize = urlize;
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- div.select_components_mask 类根据堆叠关系 不用设置z-index -->
|
||||
<div class="select_components_mask" v-show="show" @click.stop="show=false"></div>
|
||||
<slot name="title">default title</slot>
|
||||
|
||||
<div class="select" @click.stop="show=!show">
|
||||
|
||||
<div class="select-content">{{chooseval}}</div>
|
||||
|
||||
<div class="select_arrow">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<ul class="select_wrap" :class="{ 'hide': !show }">
|
||||
<li v-for="d in items" :class="{ 'hover': d.hover }" @mouseout="mouseout(d,$index)" @mouseover="mouseover(d,$index)" @click="choose"> {{ d.text }} </li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: ['items'],
|
||||
data:function(){
|
||||
return {
|
||||
show : false,
|
||||
ishover:false,
|
||||
chooseval:'请选择'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
mouseover:function(item,index){
|
||||
item.hover = true;
|
||||
},
|
||||
mouseout:function(item,index){
|
||||
item.hover = false;
|
||||
},
|
||||
choose:function(e){
|
||||
this.chooseval = e.target.innerHTML;
|
||||
},
|
||||
hideWrap:function(){
|
||||
this.show = false;
|
||||
console.log('隐藏hideWrap');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.select_components_mask{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.select{
|
||||
height:40px;
|
||||
position: relative;
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
color:#949494;
|
||||
}
|
||||
.select-content{
|
||||
margin-top:12px;
|
||||
margin-left: 20px;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.select_arrow{
|
||||
width:38px;
|
||||
height:38px;
|
||||
position: absolute;
|
||||
right:1px;
|
||||
top:1px;
|
||||
background:#000;
|
||||
}
|
||||
.select_arrow span{
|
||||
position:absolute;
|
||||
margin: 13px -5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 14px solid #fff;
|
||||
}
|
||||
.select_wrap{
|
||||
margin: 0 0 0 -1px;;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
}
|
||||
.select_wrap li{
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
padding-left:18px;
|
||||
color:#000;
|
||||
list-style: none;
|
||||
}
|
||||
.select_wrap li.hover{
|
||||
background:#949494;
|
||||
}
|
||||
.select_wrap.hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="panel" id="panelNav" :class="{ 'active': isShow }">
|
||||
<ul class="nav-aside">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">List</a></li>
|
||||
<li><a href="#">Demo</a></li>
|
||||
<li><a href="#">Download</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
isShow: false,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
showPanel: function () {
|
||||
console.log(1);
|
||||
this.isShow = !this.isShow;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*.panel.active {*/
|
||||
/*-webkit-transform: translate3d(0, 0, 0);*/
|
||||
/*transform: translate3d(0, 0, 0);*/
|
||||
/*}*/
|
||||
/*.panel {*/
|
||||
/*position: absolute;*/
|
||||
/*top: -1px;*/
|
||||
/*bottom: -1px;*/
|
||||
/*left: 0;*/
|
||||
/*z-index: 980;*/
|
||||
/*width: 120px;*/
|
||||
/*background-color: #333;*/
|
||||
/*-webkit-transform: translate3d(-120px, 0, 0);*/
|
||||
/*transform: translate3d(-120px, 0, 0);*/
|
||||
/*-webkit-transition: -webkit-transform 0.3s ease-in-out;*/
|
||||
/*transition: transform 0.3s ease-in-out;*/
|
||||
/*}*/
|
||||
/*.nav-aside {*/
|
||||
/*line-height: 40px;*/
|
||||
/*}*/
|
||||
/*.nav-aside li {*/
|
||||
/*border-bottom: 1px solid #222;*/
|
||||
/*color: #fff;*/
|
||||
/*}*/
|
||||
/*.nav-aside li a {*/
|
||||
/*color: #fff;*/
|
||||
/*padding: 0 5px;*/
|
||||
/*display: block;*/
|
||||
/*}*/
|
||||
</style>
|
||||
165
src/css/animate.css
vendored
165
src/css/animate.css
vendored
@ -1,165 +0,0 @@
|
||||
/*所有的动画*/
|
||||
.slideleft-enter {
|
||||
animation:slideleft-in .3s;
|
||||
}
|
||||
.slideleft-leave {
|
||||
animation:slideleft-out .3s;
|
||||
}
|
||||
.slideright-enter {
|
||||
animation:slideright-in .3s;
|
||||
}
|
||||
.slideright-leave {
|
||||
animation:slideright-out .3s;
|
||||
}
|
||||
.slidetop-enter {
|
||||
animation:slidetop-in .3s;
|
||||
}
|
||||
.slidetop-leave {
|
||||
animation:slidetop-out .3s;
|
||||
}
|
||||
.slidebottom-enter {
|
||||
animation:slidebottom-in .3s;
|
||||
}
|
||||
.slidebottom-leave {
|
||||
animation:slidebottom-out .3s;
|
||||
}
|
||||
@keyframes slideleft-in {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideleft-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideright-in {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideright-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slidetop-in {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidetop-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slidebottom-in {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slidebottom-out {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*切换效果 -- 渐隐*/
|
||||
.fadein-enter{
|
||||
animation:fadein-in 0.3s ease;
|
||||
}
|
||||
.fadein-leave{
|
||||
animation:fadein-out 0.3s ease;
|
||||
}
|
||||
|
||||
/*切换效果 -- 从右渐入*/
|
||||
.fadeInRight-enter {
|
||||
animation:fadeInRight-in 0.3s ease;
|
||||
}
|
||||
.fadeInRight-leave{
|
||||
animation:fadeInRight-out 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadein-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadein-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fadeInRight-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px,0,0)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none
|
||||
}
|
||||
}
|
||||
@keyframes fadeInRight-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: none
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px,0,0)
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.bbb{
|
||||
background:black;
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/*清零*/
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
|
||||
fieldset,img { border:0;}
|
||||
ol,ul { list-style:none; }
|
||||
h1,h2,h3,h4,h5,h6,button,input,select,textarea { font-size:100%;
|
||||
font-weight: normal; }
|
||||
button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }
|
||||
table{ border-collapse: collapse; border-spacing: 0; }
|
||||
i, cite, em, var, dfn, address { font-style: normal; }
|
||||
body{ font:14px "方正兰亭细黑简体","微软雅黑","宋体",Arial;}
|
||||
a{ text-decoration:none; outline: none;}
|
||||
a:hover{ text-decoration: none; }
|
||||
a:active, a:focus{ outline:none; }
|
||||
b{ font-weight: normal; }
|
||||
input ,button{ border: none; outline: none;}
|
||||
input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;}
|
||||
button:active{
|
||||
transform:scale(0.9);
|
||||
-webkit-transform: scale(0.9);
|
||||
-moz-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
-o-transform: scale(0.9);
|
||||
}
|
||||
textarea{
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-o-appearance: none;
|
||||
resize: none;
|
||||
}
|
||||
input{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #232323;
|
||||
}
|
||||
button{
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
/*font-family: "iconfont";*/
|
||||
/*src: require('iconfont.woff') format('woff'),*/
|
||||
/*require('iconfont.ttf') format('truetype'),*/
|
||||
/*require('iconfont.svg#iconfont') format('svg');*/
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* common css */
|
||||
.col2{
|
||||
width: 50%;
|
||||
}
|
||||
.col3{
|
||||
width: 33.33%;
|
||||
}
|
||||
.col4{
|
||||
width: 25%;
|
||||
}
|
||||
.col6{
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.fixed-bottom div {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.fixed-bottom a {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #7a7a7a;
|
||||
line-height: 50px;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
h2{
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.about img{
|
||||
width: 180px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.about{
|
||||
padding-top: 15px;
|
||||
}
|
||||
BIN
src/images/1.gif
BIN
src/images/1.gif
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@ -1,58 +0,0 @@
|
||||
module.exports = function(router){
|
||||
router.map({
|
||||
'/':{
|
||||
name:'index',
|
||||
component: require('./views/index.vue')
|
||||
},
|
||||
'/news':{
|
||||
name:'news',
|
||||
component: function(reslove){
|
||||
return require(['./views/news.vue'],reslove)
|
||||
}
|
||||
},
|
||||
'/search': {
|
||||
name:'search',
|
||||
component: require('./views/search.vue')
|
||||
},
|
||||
'/about/:viewId': {
|
||||
name:'about',
|
||||
component: require('./views/about.vue'),
|
||||
auth: true // 此页面需要用户登录
|
||||
},
|
||||
'/my_views': {
|
||||
name:'my_views',
|
||||
component: require('./views/my_views.vue'),
|
||||
},
|
||||
'/login': {
|
||||
name:'login',
|
||||
component: require('./views/login.vue'),
|
||||
},
|
||||
});
|
||||
|
||||
window.routeList=[];
|
||||
|
||||
router.beforeEach(function(transition){
|
||||
console.log('before---------------');
|
||||
//可以通过在路由中的自定义字段来验证用户是否需要登陆
|
||||
// console.log('通过配置路由中自定义的字段验证是否需要登陆');
|
||||
if(transition.to.auth){
|
||||
if(localStorage.userId) {
|
||||
transition.next();
|
||||
} else {
|
||||
var redirect = encodeURIComponent(transition.to.path);
|
||||
transition.redirect('/login?redirect=' + redirect);
|
||||
}
|
||||
} else {
|
||||
transition.next();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//可以记录访问路径
|
||||
router.afterEach(function(transition){
|
||||
console.log('-----------------after');
|
||||
for (var i = 0; i < routeList.length; i++) {
|
||||
console.log(routeList[i].name);
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h2>You're in {{title}} page!</h2>
|
||||
<p>{{content}}</p>
|
||||
<p>
|
||||
<img :src="imageSrc">
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
require('../css/testInAbout.css');
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
imageSrc:require('../images/logo.png'),
|
||||
content:'aboutMessage',
|
||||
title:'about'
|
||||
}
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Welcome to Home router page!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
msg:'aboutMessage',
|
||||
title:'home'
|
||||
}
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,108 +0,0 @@
|
||||
<style>
|
||||
.index{
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.index h2{
|
||||
font-size: 28px;;
|
||||
}
|
||||
.router-link{
|
||||
color: cornflowerblue;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="index">
|
||||
<h2>vue-router 介绍:</h2>
|
||||
<a class="router-link" href="http://router.vuejs.org/zh-cn/" target="_blank">点击这里</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var lifecycle = []; //为了描述生命周期， 在 canActivate 阶段 还没有 this.lifecycle
|
||||
|
||||
import Vue from 'vue'
|
||||
import { Toast } from 'mint-ui';
|
||||
|
||||
module.exports = {
|
||||
//props: ['父组建传的值'],
|
||||
data:function(){
|
||||
lifecycle.push("data");
|
||||
return {
|
||||
msg: '各个阶段，可以查看控制台输出，message from my-views',
|
||||
title:'my_views',
|
||||
lifecycle:lifecycle
|
||||
}
|
||||
},
|
||||
route:{
|
||||
//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果
|
||||
canActivate:function(transition){
|
||||
//canActivate阶段，可以做一些用户验证的事情
|
||||
Toast('Test toast');
|
||||
return true;
|
||||
},
|
||||
activate:function(transition){
|
||||
//console.log('active');
|
||||
this.lifecycle.push("route.activate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。</a>");
|
||||
//this.$root.$set('header',this.title);
|
||||
|
||||
transition.next();
|
||||
//此方法结束后，api会调用afterActivate 方法
|
||||
//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true
|
||||
},
|
||||
data: function(transition) {
|
||||
var _this = this;
|
||||
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据</a>");
|
||||
|
||||
// 说明之前请求过 则不用再请求了
|
||||
if(this.$root.myViewsData){
|
||||
this.$data = this.$root.myViewsData;
|
||||
transition.next();
|
||||
console.log('已经请求过了不再请求数据');
|
||||
return;
|
||||
}
|
||||
|
||||
//将数据同步到根节点
|
||||
this.$root.myViewsData = this.$data;
|
||||
setTimeout(function(){
|
||||
//这里 _this.$loadingRouteData 是 true
|
||||
transition.next({msg:'加载后的数据'});
|
||||
//在调用完transition.next 后，_this.$loadingRouteData 为 false
|
||||
}.bind(this),4000);
|
||||
},
|
||||
canDeactivate:function(transition){
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-deactivate.html'>在验证阶段，当一个组件将要被切出的时候被调用。</a>");
|
||||
transition.next();
|
||||
},
|
||||
deactivate: function (transition) {
|
||||
this.lifecycle.push("route.deactivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html'>在激活阶段，当一个组件将要被禁用和移除之时被调用。</a>");
|
||||
this.lifecycle = [];
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.lifecycle.push("created <a href='http://cn.vuejs.org/api/options.html#created'>在实例被创建的时候同步调用。在这个阶段，实例已经完成了包含以下内容的准备工作：数据观察，计算属性，方法，以及事件回调。但 DOM 编译还没开始，vm.$el 此时尚不可用。</a>");
|
||||
},
|
||||
beforeCompile:function(){
|
||||
this.lifecycle.push("beforeCompile <a href='http://cn.vuejs.org/api/options.html#beforeCompile'>在编译开始之前调用。</a>");
|
||||
},
|
||||
compiled:function(){
|
||||
this.lifecycle.push("compiled <a href='http://cn.vuejs.org/api/options.html#compiled'>在编译完成后调用。在这个阶段，所有的指令都已经完成绑定，数据变化会触发DOM更新。但此时尚不能保证 $el 已经被插入到DOM中。</a>");
|
||||
},
|
||||
ready:function(){
|
||||
this.lifecycle.push("ready <a href='http://cn.vuejs.org/api/options.html#ready'>在编译完成后并且 $el 第一次插入文档时调用，也就是刚好在第一次 attached 钩子之后调用。注意只有通过指令或 Vue 实例方法，比如 $appendTo() 插入才会触发 ready。</a>");
|
||||
},
|
||||
attached:function(){
|
||||
this.lifecycle.push("attached <a href='http://cn.vuejs.org/api/options.html#attached'>当 vm.$el 被一个指令或是 vm 实例方法（例如$appendTo()）插入到DOM里的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
detached:function(){
|
||||
this.lifecycle.push("detached <a href='http://cn.vuejs.org/api/options.html#detached'>当 vm.$el 被一个指令或是 vm 实例方法从 DOM 里移除的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
beforeDestroy:function(){
|
||||
this.lifecycle.push("beforeDestroy <a href='http://cn.vuejs.org/api/options.html#beforeDestroy'>在一个 Vue 实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。</a>");
|
||||
},
|
||||
destroyed:function(){
|
||||
this.lifecycle.push("destroyed <a href='http://cn.vuejs.org/api/options.html#destroyed'>在一个 Vue 实例被销毁之后调用。当这个钩子被调用时，该 Vue 实例的所有指令都已经被解除绑定，所有子实例也已经被销毁。注意如果有一个离开过渡效果，destroyed 会在过渡效果结束之后才被调用。</a>");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
看来汝方才点击的页面需要登录才能看呀~
|
||||
页面还没写，你自己看着搞搞把。
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,98 +0,0 @@
|
||||
<style>
|
||||
.my-views h2 {
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<h2>啥玩意儿？my_views.vue</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var lifecycle = []; //为了描述生命周期， 在 canActivate 阶段 还没有 this.lifecycle
|
||||
|
||||
module.exports = {
|
||||
//props: ['父组建传的值'],
|
||||
data:function(){
|
||||
lifecycle.push("data");
|
||||
return {
|
||||
msg: '各个阶段，可以查看控制台输出，message from my-views',
|
||||
title:'my_views',
|
||||
lifecycle:lifecycle
|
||||
}
|
||||
},
|
||||
//这里才是route的生存周期
|
||||
route:{
|
||||
//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果
|
||||
canActivate:function(transition){
|
||||
//canActivate阶段，可以做一些用户验证的事情
|
||||
lifecycle.push("route.canActivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-activate.html'>在验证阶段，当一个组件将要被切入的时候被调用。</a>");
|
||||
return true;
|
||||
},
|
||||
activate:function(transition){
|
||||
//console.log('active');
|
||||
this.lifecycle.push("route.activate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。</a>");
|
||||
// this.$root.$set('header',this.title);
|
||||
|
||||
transition.next();
|
||||
//此方法结束后，api会调用afterActivate 方法
|
||||
//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true
|
||||
},
|
||||
data: function(transition) {
|
||||
var _this = this;
|
||||
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据</a>");
|
||||
|
||||
// 说明之前请求过 则不用再请求了
|
||||
if(this.$root.myViewsData){
|
||||
this.$data = this.$root.myViewsData;
|
||||
transition.next();
|
||||
console.log('已经请求过了不再请求数据');
|
||||
return;
|
||||
}
|
||||
|
||||
//将数据同步到根节点
|
||||
this.$root.myViewsData = this.$data;
|
||||
setTimeout(function(){
|
||||
//这里 _this.$loadingRouteData 是 true
|
||||
transition.next({msg:'加载后的数据'});
|
||||
//在调用完transition.next 后，_this.$loadingRouteData 为 false
|
||||
}.bind(this),4000);
|
||||
},
|
||||
canDeactivate:function(transition){
|
||||
this.lifecycle.push("route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-deactivate.html'>在验证阶段，当一个组件将要被切出的时候被调用。</a>");
|
||||
transition.next();
|
||||
},
|
||||
deactivate: function (transition) {
|
||||
this.lifecycle.push("route.deactivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html'>在激活阶段，当一个组件将要被禁用和移除之时被调用。</a>");
|
||||
this.lifecycle = [];
|
||||
transition.next();
|
||||
}
|
||||
},
|
||||
|
||||
created:function(){
|
||||
this.lifecycle.push("created <a href='http://cn.vuejs.org/api/options.html#created'>在实例被创建的时候同步调用。在这个阶段，实例已经完成了包含以下内容的准备工作：数据观察，计算属性，方法，以及事件回调。但 DOM 编译还没开始，vm.$el 此时尚不可用。</a>");
|
||||
},
|
||||
beforeCompile:function(){
|
||||
this.lifecycle.push("beforeCompile <a href='http://cn.vuejs.org/api/options.html#beforeCompile'>在编译开始之前调用。</a>");
|
||||
},
|
||||
compiled:function(){
|
||||
this.lifecycle.push("compiled <a href='http://cn.vuejs.org/api/options.html#compiled'>在编译完成后调用。在这个阶段，所有的指令都已经完成绑定，数据变化会触发DOM更新。但此时尚不能保证 $el 已经被插入到DOM中。</a>");
|
||||
},
|
||||
ready:function(){
|
||||
this.lifecycle.push("ready <a href='http://cn.vuejs.org/api/options.html#ready'>在编译完成后并且 $el 第一次插入文档时调用，也就是刚好在第一次 attached 钩子之后调用。注意只有通过指令或 Vue 实例方法，比如 $appendTo() 插入才会触发 ready。</a>");
|
||||
},
|
||||
attached:function(){
|
||||
this.lifecycle.push("attached <a href='http://cn.vuejs.org/api/options.html#attached'>当 vm.$el 被一个指令或是 vm 实例方法（例如$appendTo()）插入到DOM里的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
detached:function(){
|
||||
this.lifecycle.push("detached <a href='http://cn.vuejs.org/api/options.html#detached'>当 vm.$el 被一个指令或是 vm 实例方法从 DOM 里移除的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>");
|
||||
},
|
||||
beforeDestroy:function(){
|
||||
this.lifecycle.push("beforeDestroy <a href='http://cn.vuejs.org/api/options.html#beforeDestroy'>在一个 Vue 实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。</a>");
|
||||
},
|
||||
destroyed:function(){
|
||||
this.lifecycle.push("destroyed <a href='http://cn.vuejs.org/api/options.html#destroyed'>在一个 Vue 实例被销毁之后调用。当这个钩子被调用时，该 Vue 实例的所有指令都已经被解除绑定，所有子实例也已经被销毁。注意如果有一个离开过渡效果，destroyed 会在过渡效果结束之后才被调用。</a>");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="news">
|
||||
<h2>
|
||||
教你使用component！
|
||||
</h2>
|
||||
<uiselect :items.sync="items">
|
||||
<h3 slot="title">下面这个来自component</h3>
|
||||
</uiselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data:function(){
|
||||
return {
|
||||
items:[{text:'男',hover:false},{text:'女',hover:false}],
|
||||
title:'select模拟'
|
||||
}
|
||||
},
|
||||
components:{
|
||||
uiselect: require('../components/select.vue')
|
||||
},
|
||||
route:{
|
||||
activate:function(transition){
|
||||
transition.next();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.news{
|
||||
text-align: center;
|
||||
}
|
||||
.news h2{
|
||||
font-size: 28px;;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<style>
|
||||
.search h2{
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 15px;;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="search">
|
||||
<h2>
|
||||
Welcome to search router page!
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
@ -1,133 +0,0 @@
|
||||
/*
|
||||
先清空 n-build 文件夹下的文件
|
||||
在nodejs中，可以通过fs（file system）模块进行文件的I/O操作(fs: http://www.2cto.com/kf/201411/351586.html)。
|
||||
*/
|
||||
var fs = require('fs'),
|
||||
buildPath='./build/';
|
||||
var folder_exists = fs.existsSync(buildPath);
|
||||
|
||||
if(folder_exists == true) {
|
||||
var dirList = fs.readdirSync(buildPath);
|
||||
dirList.forEach(function(fileName)
|
||||
{
|
||||
fs.unlinkSync(buildPath + fileName);
|
||||
});
|
||||
console.log("先清除build文件!");
|
||||
console.log("clearing " + buildPath);
|
||||
};
|
||||
|
||||
/*
|
||||
readfile方法: 进行文件数据的读取
|
||||
writeFile方法: 将数据写入文件到某个文件夹下
|
||||
先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路径
|
||||
*/
|
||||
fs.readFile("index.html",'utf-8',function(err,data){
|
||||
if(err){
|
||||
console.log("error");
|
||||
}else{
|
||||
//将index.html里面的hash值清除掉
|
||||
var devhtml = data.replace(/((?:href|src)="[^"]+\.)(\w{20}\.)(js|css)/g, '$1$3');
|
||||
fs.writeFileSync('index.html', devhtml);
|
||||
}
|
||||
});
|
||||
var webpack = require('webpack');
|
||||
//var vue = require("vue-loader");
|
||||
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//混淆压缩
|
||||
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;//检测重用模块
|
||||
var ExtractTextPlugin = require("extract-text-webpack-plugin");//独立样式文件
|
||||
var production = process.env.PRODUCTION;//在命令行 输入 “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面
|
||||
var plugins = [
|
||||
//会将所有的样式文件打包成一个单独的style.css
|
||||
new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , {
|
||||
disable: false,
|
||||
allChunks: true //所有独立样式打包成一个css文件
|
||||
}),
|
||||
//new ExtractTextPlugin("[name].css" )
|
||||
//自动分析重用的模块并且打包成单独的文件
|
||||
new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ),
|
||||
function(){
|
||||
return this.plugin('done', function(stats) {
|
||||
var content;
|
||||
//这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html
|
||||
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
|
||||
console.log('版本是：'+JSON.stringify(stats.toJson().hash));
|
||||
//return fs.writeFileSync('build/assets.json', content);
|
||||
});
|
||||
}
|
||||
];
|
||||
|
||||
//发布编译时，压缩，版本控制
|
||||
if (process.env.PRODUCTION) {
|
||||
plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false } })); //压缩
|
||||
}
|
||||
|
||||
/*
|
||||
一：版本控制
|
||||
package.json中的
|
||||
"html-webpack-plugin": "^1.6.2",
|
||||
模块是把生成的带有md5戳的文件，插入到index.html中。
|
||||
通过index.tpl模板，生成 index.html
|
||||
HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin
|
||||
https://github.com/ampedandwired/html-webpack-plugin/issues/52
|
||||
*/
|
||||
var HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
plugins.push( new HtmlWebpackPlugin({
|
||||
filename:'../index.html',//会生成index.html在根目录下,并注入脚本
|
||||
template:'index.tpl',
|
||||
inject:true //此参数必须加上，不加不注入
|
||||
}));
|
||||
/*
|
||||
二：编译后自动打开浏览器 2016/08/19
|
||||
*/
|
||||
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
|
||||
plugins.push(new OpenBrowserPlugin({ url: 'http://localhost:8080' }));
|
||||
|
||||
/*
|
||||
publicPath路径就是你发布之后的路径，
|
||||
比如你想发布到你站点的/util/vue/build 目录下, 那么设置
|
||||
publicPath: "/util/vue/build/",
|
||||
此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误
|
||||
*/
|
||||
module.exports = {
|
||||
entry: ["./src/app.js"],
|
||||
output: {
|
||||
path: "./build",
|
||||
publicPath: "/build/",
|
||||
//"build.[hash].js"//[hash]MD5戳 解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题 见：http://segmentfault.com/a/1190000003499526 资源路径切换
|
||||
filename: production ? "build.[hash].js" : "build.js"
|
||||
},
|
||||
module: {
|
||||
preLoaders:[
|
||||
// {
|
||||
// //代码检查
|
||||
// test:/\.js$/,exclude:/node_modules/,loader:'jshint-loader'
|
||||
// }
|
||||
],
|
||||
loaders: [
|
||||
// 加载vue组件，并将css全部整合到一个style.css里面
|
||||
// 但是使用这种方式后 原先可以在vue组件中 在style里面加入 scoped 就不能用了,
|
||||
// 好处是使用了cssnext，那么样式按照标准的来写就行了，会自动生成兼容代码 http://cssnext.io/playground/
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!cssnext-loader")},
|
||||
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
|
||||
{test: /\.woff$/, loader: "url?limit=10000&minetype=application/font-woff"},
|
||||
{test: /\.ttf$/, loader: "file"},
|
||||
{test: /\.eot$/, loader: "file"},
|
||||
{test: /\.svg$/, loader: "file"}
|
||||
]
|
||||
},
|
||||
vue:{
|
||||
css:ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!cssnext-loader")
|
||||
},
|
||||
plugins : plugins,
|
||||
devtool: 'source-map'//,
|
||||
// resolve: {
|
||||
// // 现在可以写 require('file') 代替 require('file.coffee')
|
||||
// extensions: ['', '.js', '.json', '.coffee','vue']
|
||||
// }
|
||||
};
|
||||
|
||||
|
||||
65
学习资料.md
65
学习资料.md
@ -1,65 +0,0 @@
|
||||
#Vue教程
|
||||
|
||||
[细节与最佳实践](http://vuejs.org/guide/best-practices.html)
|
||||
|
||||
[Vue1.0.x文档](http://vuejs.org/)
|
||||
|
||||
[Vue1.0.x绑定语法参考](https://github.com/vuejs/vue/issues/1325)
|
||||
|
||||
[每次更新的变化](https://github.com/vuejs/vue/releases)
|
||||
|
||||
与webpack 一起使用所需插件
|
||||
|
||||
[vue-loader-example](https://github.com/vuejs/vue-loader-example)
|
||||
|
||||
[vue-html-loader](https://github.com/vuejs/vue-html-loader)
|
||||
|
||||
####文章
|
||||
`尤小右`
|
||||
|
||||
[Vue.js：轻量高效的前端组件化方案](http://www.csdn.net/article/1970-01-01/2825439)
|
||||
|
||||
`勾三股四`
|
||||
|
||||
[Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/)
|
||||
|
||||
[Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/)
|
||||
|
||||
`稀土掘金`
|
||||
|
||||
[Vue 组件化开发实践](http://ftandy.github.io/2015/09/05/vue/)
|
||||
|
||||
`Randy`
|
||||
|
||||
[Vue.js 和 Webpack（一）为什么使用Vue](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1.html)
|
||||
|
||||
[Vue.js 和 Webpack（二）使用webpack](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2.html)
|
||||
|
||||
[Vue.js 和 Webpack（三）Vue.js + Webpack](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3.html)
|
||||
|
||||
#webpack教程
|
||||
[learn-webpack](http://vingojw.github.io/2015/08/19/learn-webpack/)
|
||||
|
||||
#Vue-router教程
|
||||
[中文文档](http://vuejs.github.io/vue-router/zh-cn/index.html) - [英文文档](http://vuejs.github.io/vue-router/en/index.html)
|
||||
[学习笔记](https://github.com/vingojw/learn-vue-router)
|
||||
|
||||
#技术交流
|
||||
|
||||
[Vue技术论坛](http://forum.vuejs.org/)
|
||||
|
||||
[Vue的聊天室，很多人在里面讨论并解决问题](https://gitter.im/vuejs/vue)
|
||||
|
||||
#demo
|
||||
|
||||
[qingcheng](https://github.com/zerqu/qingcheng)
|
||||
|
||||
[vue-strap 用vue实现bootstrap](https://github.com/yuche/vue-strap)
|
||||
|
||||
[vue-mui](https://github.com/mennghao/vue-mui)
|
||||
|
||||
[通过学习（copy）以上两个demo，使用 Vue1.0 + VueRouter + webpack](https://github.com/vingojw/vue-vueRoute-webpack)
|
||||
|
||||
[Chat by Vue + Webpack](https://github.com/Coffcer/vue-chat)
|
||||
|
||||
[用Vue实现的拖拽效果](http://jsfiddle.net/lain8dono/mrnyf79e/)
|
||||
154
文档.md
154
文档.md
@ -1,154 +0,0 @@
|
||||
#### webpack参数解释
|
||||
|
||||
使用配置请参看package.json!
|
||||
–inline选项会自动把webpack-dev-server客户端加到webpack的入口文件配置中。
|
||||
–progress 显示打包进度
|
||||
–colors配置打包输出颜色显示
|
||||
–hot热加载，代码修改完后自动刷新
|
||||
–inline 是刷新后的代码自动注入到打包后的文件中(当源文件改变时会自动刷新页面)
|
||||
-d 是debug模式，输入一个source-map，并且可以看到每一个打包的文件
|
||||
-p 是对代码进行压缩
|
||||
|
||||
|
||||
#### 使用具名路径
|
||||
|
||||
```
|
||||
<a v-link="{ name: 'myviews', params: { viewId: 123 }}">User</a>
|
||||
```
|
||||
|
||||
#### 组件传值的时候单个单词小写，如果有多个单词用"-"连接 [API说明](http://rc.vuejs.org/guide/components.html#camelCase_vs-_kebab-case)
|
||||
|
||||
```
|
||||
<uiradio :items.sync="mutilCheckitems" :mutil-check.sync="mutilCheck">
|
||||
|
||||
```
|
||||
然后在组件props中用驼峰的方式访问['mutilCheck']。
|
||||
|
||||
#### 组件传值得时候尽量不要使用表达式，可以在computed中定义
|
||||
比如：
|
||||
|
||||
```
|
||||
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="!mutilCheck">
|
||||
```
|
||||
修改为
|
||||
```
|
||||
<uiradio :items.sync="singleCheckitems" :mutil-check.sync="singleCheck"></uiradio>
|
||||
```
|
||||
然后定义computed
|
||||
|
||||
```
|
||||
...
|
||||
computed:{
|
||||
singleCheck:function(){
|
||||
return false;
|
||||
}
|
||||
},
|
||||
...
|
||||
```
|
||||
|
||||
#### 在绑定属性的时候
|
||||
```
|
||||
<div class="tab-panel" v-show="show" transition="transiton">
|
||||
<slot name="tab-panel"></slot>
|
||||
</div>
|
||||
此处的 transition="transiton" 代表的是 transition 这个类名
|
||||
```
|
||||
而如果前面加个`:`则代表的是动态属性，: 是 v-bind的简写 参考 [Vue1.0.0绑定语法参考](https://github.com/vuejs/vue/issues/1325)
|
||||
|
||||
```
|
||||
<div class="tab-panel" v-show="show" :transition="transiton">
|
||||
```
|
||||
|
||||
#### 绑定属性用双引号
|
||||
|
||||
|
||||
#### 关于 vueComponent.sublime-snippet 文件
|
||||
```
|
||||
功能：sublime中编写vue组件的片段提示
|
||||
使用：
|
||||
sublime中 菜单栏 - >Preferences - > 浏览插件
|
||||
将文件复制到 User目录下
|
||||
项目中新建 `组件名字.vue` 文件
|
||||
ctrl+shift+p 输入 vuecomponent 回车
|
||||
```
|
||||
|
||||
|
||||
#### 在vue组件 template 中不能出现 `<` 字符, 如果有此字符，那么在使用webpack.optimize.UglifyJsPlugin压缩的时候，编译会报错
|
||||
|
||||
#### DOM属性定义用""包起来,否则不正确的字符可能会导致在 使用webpack.optimize.UglifyJsPlugin压缩的时候,控制台卡死。
|
||||
|
||||
#### vue文件的，template模版中，注释的html里面如果有img标签，相关资源也会被打包。
|
||||
|
||||
```
|
||||
<!--
|
||||
...
|
||||
<img src="./xx.jpg">
|
||||
...
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
#### 在data属性里面不要定义以下划线开头的字段。
|
||||
|
||||
```
|
||||
data:{
|
||||
_k:'v' // this._k 获取不到
|
||||
}
|
||||
```
|
||||
|
||||
#### vue-router路由配置的时候，不要写下划线
|
||||
|
||||
```
|
||||
'/loan':{
|
||||
name:'loan',
|
||||
component: require('./views/loan.vue')
|
||||
},
|
||||
'/loan_old':{
|
||||
name:'xxx',
|
||||
component: require('./views/loan_old.vue')
|
||||
},
|
||||
下面的会覆盖上面的，原来本应该跳转到loan的可能现在都跳到了loan_old
|
||||
```
|
||||
|
||||
#### 关于版本控制
|
||||
参考：
|
||||
[http://webpack.github.io/docs/long-term-caching.html](http://webpack.github.io/docs/long-term-caching.html)
|
||||
|
||||
[https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21](https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21)
|
||||
|
||||
|
||||
```
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash:8].js'),
|
||||
new webpack.optimize.UglifyJsPlugin({sourceMap: false}),
|
||||
new ExtractTextPlugin("style.[chunkhash:8].css"),
|
||||
function() {
|
||||
return this.plugin('done', function(stats) {
|
||||
var content;
|
||||
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
|
||||
return fs.writeFileSync('build/assets.json', content);
|
||||
});
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 禁止在层上滑动(比如：背景层，不想让用户滚动)
|
||||
```
|
||||
@touchstart.stop.prevent
|
||||
```
|
||||
|
||||
#### 如果要阻止默认事件，一定要写在前面，否则会影响其他事件绑定
|
||||
```
|
||||
@touchmove.stop.prevent @click.stop="show=false"
|
||||
```
|
||||
|
||||
#### 尽量少用<template>,用多了，感觉渲染的会慢很多。
|
||||
```
|
||||
<template v-if="flag">
|
||||
bla bla bla...
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
#### 压缩，发布生产的时候，设置 Vue.config.debug = false; 去除注释，因为某些安卓机型里面，可能会出现莫名奇妙的问题。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user