diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 9cc9479..0000000 --- a/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules/ -build/ -d.html -npm-debug.log -.idea/ \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index dd295b1..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - -
- - diff --git a/index.tpl b/index.tpl deleted file mode 100644 index bb7ce37..0000000 --- a/index.tpl +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - -
- - diff --git a/package.json b/package.json deleted file mode 100644 index 8a746ca..0000000 --- a/package.json +++ /dev/null @@ -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" -} diff --git a/readme.md b/readme.md deleted file mode 100644 index 314b749..0000000 --- a/readme.md +++ /dev/null @@ -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 - -![image](https://github.com/allan2coder/Vue-SPA/blob/master/src/images/1.gif) - -## How to use -``` bash -$ git clone https://github.com/allan2coder/Vue-SPA.git -$ cd -$ 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 -
-│──.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
-
- -##学习参考： -待续... - diff --git a/src/app.js b/src/app.js deleted file mode 100644 index 08bfcf2..0000000 --- a/src/app.js +++ /dev/null @@ -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'); \ No newline at end of file diff --git a/src/app.vue b/src/app.vue deleted file mode 100644 index 6f3c055..0000000 --- a/src/app.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/common/config.js b/src/common/config.js deleted file mode 100644 index 2a02886..0000000 --- a/src/common/config.js +++ /dev/null @@ -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' - }, - } -} \ No newline at end of file diff --git a/src/common/filters.js b/src/common/filters.js deleted file mode 100644 index e4182bc..0000000 --- a/src/common/filters.js +++ /dev/null @@ -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 '' + t + ''; - }); -} - -//获取图片地址，如果地址带有 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; diff --git a/src/components/select.vue b/src/components/select.vue deleted file mode 100644 index 1fa59c8..0000000 --- a/src/components/select.vue +++ /dev/null @@ -1,115 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/sideBar.vue b/src/components/sideBar.vue deleted file mode 100644 index 1f29da1..0000000 --- a/src/components/sideBar.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/css/animate.css b/src/css/animate.css deleted file mode 100644 index cbe0be1..0000000 --- a/src/css/animate.css +++ /dev/null @@ -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) - } -} diff --git a/src/css/b.css b/src/css/b.css deleted file mode 100644 index a4e9078..0000000 --- a/src/css/b.css +++ /dev/null @@ -1,3 +0,0 @@ -.bbb{ - background:black; -} \ No newline at end of file diff --git a/src/css/common.css b/src/css/common.css deleted file mode 100644 index 506c976..0000000 --- a/src/css/common.css +++ /dev/null @@ -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%; -} - diff --git a/src/css/main.css b/src/css/main.css deleted file mode 100644 index c047b68..0000000 --- a/src/css/main.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/css/testInAbout.css b/src/css/testInAbout.css deleted file mode 100644 index b41d1e3..0000000 --- a/src/css/testInAbout.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/images/1.gif b/src/images/1.gif deleted file mode 100644 index fd84b60..0000000 Binary files a/src/images/1.gif and /dev/null differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 8bbf984..0000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/routers.js b/src/routers.js deleted file mode 100644 index ba671ee..0000000 --- a/src/routers.js +++ /dev/null @@ -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); - }; - }); -} \ No newline at end of file diff --git a/src/views/about.vue b/src/views/about.vue deleted file mode 100644 index 5a88d20..0000000 --- a/src/views/about.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/home.vue b/src/views/home.vue deleted file mode 100644 index 52d1ce4..0000000 --- a/src/views/home.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue deleted file mode 100644 index 53b7f7f..0000000 --- a/src/views/index.vue +++ /dev/null @@ -1,108 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/views/login.vue b/src/views/login.vue deleted file mode 100644 index 15d05a8..0000000 --- a/src/views/login.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/my_views.vue b/src/views/my_views.vue deleted file mode 100644 index 180431d..0000000 --- a/src/views/my_views.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/views/news.vue b/src/views/news.vue deleted file mode 100644 index 33e012d..0000000 --- a/src/views/news.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/search.vue b/src/views/search.vue deleted file mode 100644 index b6ebd59..0000000 --- a/src/views/search.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 1fc87e5..0000000 --- a/webpack.config.js +++ /dev/null @@ -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'] - // } -}; - - diff --git a/学习资料.md b/学习资料.md deleted file mode 100644 index ba72f4b..0000000 --- a/学习资料.md +++ /dev/null @@ -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/) \ No newline at end of file diff --git a/文档.md b/文档.md deleted file mode 100644 index 7ff2b86..0000000 --- a/文档.md +++ /dev/null @@ -1,154 +0,0 @@ -#### webpack参数解释 - -使用配置请参看package.json! -–inline选项会自动把webpack-dev-server客户端加到webpack的入口文件配置中。 -–progress 显示打包进度 -–colors配置打包输出颜色显示 -–hot热加载，代码修改完后自动刷新 -–inline 是刷新后的代码自动注入到打包后的文件中(当源文件改变时会自动刷新页面) --d 是debug模式，输入一个source-map，并且可以看到每一个打包的文件 --p 是对代码进行压缩 - - -#### 使用具名路径 - -``` -User -``` - -#### 组件传值的时候单个单词小写，如果有多个单词用"-"连接 [API说明](http://rc.vuejs.org/guide/components.html#camelCase_vs-_kebab-case) - -``` - - -``` -然后在组件props中用驼峰的方式访问['mutilCheck']。 - -#### 组件传值得时候尽量不要使用表达式，可以在computed中定义 -比如： - -``` - -``` -修改为 -``` - -``` -然后定义computed - -``` - ... - computed:{ - singleCheck:function(){ - return false; - } - }, - ... -``` - -#### 在绑定属性的时候 -``` -
- -
- 此处的 transition="transiton" 代表的是 transition 这个类名 -``` -而如果前面加个`:`则代表的是动态属性，: 是 v-bind的简写 参考 [Vue1.0.0绑定语法参考](https://github.com/vuejs/vue/issues/1325) - -``` -
-``` - -#### 绑定属性用双引号 - - -#### 关于 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标签，相关资源也会被打包。 - -``` - - -``` - -#### 在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" -``` - -#### 尽量少用