myvue

├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── renders ├── 1.jpg └── 2.jpg ├── src ├── App.vue ├── common │ ├── css │ │ └── base.css │ └── imgs │ │ └── loading.gif ├── components │ ├── comments.vue │ ├── down.vue │ ├── dropload.vue │ ├── footer.vue │ ├── header.vue │ ├── modal.vue │ ├── news.vue │ └── slider.vue └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-dropload下拉加载实例 2 | 3 | ## 项目目的 4 | * 主要用以测试vue-resource，vue-router测试单页应用 5 | 6 | ## 相关知识点 7 | * .vue组件的开发 8 | * vue-router 简单路由的使用 9 | * 项目中公共样式如何引入 10 | * vue-resource 进行ajax请求的使用 11 | * 使用babel以及webpack 进行编译打包 12 | * 模态框 13 | * 轮播组件 14 | 15 | ## 安装 16 | * 本例使用vue-cli开发的，所以可以直接clone到本地 17 | ``` bash 18 | # install dependencies 19 | npm install 20 | 21 | # serve with hot reload at localhost:8080 22 | npm run dev 23 | 24 | ``` 25 | 26 | ## 效果图 27 | 28 | ![image](https://github.com/ITCNZ/vue-dropload/blob/master/renders/1.jpg) ![image](https://github.com/ITCNZ/vue-dropload/blob/master/renders/2.jpg) 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | myvue 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myvue", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "zhouhaipeng <1527127028@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.1.0", 13 | "vue-infinite-scroll": "^2.0.0", 14 | "vue-resource": "^1.0.3", 15 | "vue-router": "^2.1.1", 16 | "vuex": "^2.1.1" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.0.0", 20 | "babel-loader": "^6.0.0", 21 | "babel-preset-es2015": "^6.0.0", 22 | "cross-env": "^3.0.0", 23 | "css-loader": "^0.25.0", 24 | "file-loader": "^0.9.0", 25 | "vue-loader": "^10.0.0", 26 | "vue-template-compiler": "^2.1.0", 27 | "webpack": "^2.1.0-beta.25", 28 | "webpack-dev-server": "^2.1.0-beta.9" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /renders/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITCNZ/vue-dropload/112f61242aa70b2a1a0b3875771c69bc051e7900/renders/1.jpg -------------------------------------------------------------------------------- /renders/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITCNZ/vue-dropload/112f61242aa70b2a1a0b3875771c69bc051e7900/renders/2.jpg -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | 32 | 46 | -------------------------------------------------------------------------------- /src/common/css/base.css: -------------------------------------------------------------------------------- 1 | /* CSS Document */ 2 | html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 3 | header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 4 | table{border-collapse:collapse;border-spacing:0;} 5 | caption,th{text-align:left;font-weight:normal;} 6 | html,body,fieldset,img,iframe,abbr{border:0;} 7 | i,cite,em,var,address,dfn{font-style:normal;} 8 | [hidefocus],summary{outline:0;} 9 | li{list-style:none;} 10 | h1,h2,h3,h4,h5,h6,small{font-size:100%;} 11 | sup,sub{font-size:83%;} 12 | pre,code,kbd,samp{font-family:inherit;} 13 | q:before,q:after{content:none;} 14 | textarea{overflow:auto;resize:none;} 15 | label,summary{cursor:default;} 16 | a,button{cursor:pointer;} 17 | h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} 18 | h1{ font-size:18px; margin-bottom:20px;} 19 | del,ins,u,s,a,a:hover{text-decoration:none;} 20 | body,textarea,input,button,select,keygen,legend{font:14px/1.5 \5fae\8f6f\96c5\9ed1,\5b8b\4f53,arial;color:#333;outline:0;} 21 | body{background:#fff;} 22 | a{color:#42b983;transition: all .4s ease-in-out;} 23 | .router-link-active{ background:#42b983; color:#fff; text-decoration:none} 24 | .router-link-active a{color:#fff;} 25 | -------------------------------------------------------------------------------- /src/common/imgs/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITCNZ/vue-dropload/112f61242aa70b2a1a0b3875771c69bc051e7900/src/common/imgs/loading.gif -------------------------------------------------------------------------------- /src/components/comments.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 114 | 115 | 127 | -------------------------------------------------------------------------------- /src/components/down.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/components/dropload.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 75 | 76 | -------------------------------------------------------------------------------- /src/components/footer.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | 29 | -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 35 | 36 | 71 | -------------------------------------------------------------------------------- /src/components/modal.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/news.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 68 | 69 | 83 | -------------------------------------------------------------------------------- /src/components/slider.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 134 | 135 | 147 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueResource from 'vue-resource' 3 | import VueRouter from 'vue-router' 4 | import Vuex from 'vuex' 5 | import infiniteScroll from 'vue-infinite-scroll' 6 | import App from './App.vue' 7 | import news from "./components/news.vue" 8 | import dropload from "./components/dropload.vue" 9 | import down from "./components/down.vue" 10 | import comments from "./components/comments.vue" 11 | Vue.use(VueResource) 12 | Vue.use(VueRouter) 13 | Vue.use(Vuex) 14 | Vue.use(infiniteScroll) 15 | 16 | //创建路由 17 | var router = new VueRouter({ 18 | routes: [ 19 | { path: '/news', component: news }, 20 | { path: '/dropload', component: dropload}, 21 | { path: '/down', component: down }, 22 | { path: '/comments', component: comments } 23 | ] 24 | }); 25 | 26 | new Vue({ 27 | el: '#app', 28 | render: h => h(App), 29 | router: router 30 | }) -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this nessessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.common.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#eval-source-map' 54 | } 55 | 56 | if (process.env.NODE_ENV === 'production') { 57 | module.exports.devtool = '#source-map' 58 | // http://vue-loader.vuejs.org/en/workflow/production.html 59 | module.exports.plugins = (module.exports.plugins || []).concat([ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: '"production"' 63 | } 64 | }), 65 | new webpack.optimize.UglifyJsPlugin({ 66 | sourceMap: true, 67 | compress: { 68 | warnings: false 69 | } 70 | }), 71 | new webpack.LoaderOptionsPlugin({ 72 | minimize: true 73 | }) 74 | ]) 75 | } 76 | --------------------------------------------------------------------------------

评论列表：