├── .gitignore ├── README.md ├── axios-demo ├── css │ ├── common.css │ ├── index.css │ └── jquery-ajax.css ├── data │ ├── tea-info.json │ └── test-fragment.html ├── img │ ├── favicon.ico │ ├── logo-32x32.png │ ├── logo-48x48.png │ ├── pet-01.jpg │ ├── pet-02.jpg │ └── pet-03.jpg ├── index.html ├── js │ ├── axios-base.js │ ├── axios-param.js │ ├── index.js │ └── jquery-ajax.js ├── pages │ ├── axios-base.html │ ├── axios-param.html │ └── jquery-ajax.html └── plugin │ ├── axios.min.js │ ├── bootstrap.min.css │ └── jquery.min.js ├── index.html.bak ├── source ├── css │ └── index.css ├── favicon.ico ├── img │ ├── arrow-right.png │ ├── pet-01.jpg │ ├── pet-02.jpg │ └── pet-03.jpg ├── logo-32x32.png ├── logo-48x48.png └── logo.png ├── 基础使用示例 ├── css │ ├── base-demo.css │ ├── base.css │ ├── classAndStyle.css │ ├── common.css │ ├── component.css │ └── index.css ├── img │ ├── album │ │ ├── car-01.jpg │ │ ├── car-02.jpg │ │ ├── car-03.jpg │ │ ├── girl-01.jpg │ │ ├── girl-02.jpg │ │ ├── girl-03.jpg │ │ ├── pet-01.jpg │ │ ├── pet-02.jpg │ │ ├── pet-03.jpg │ │ ├── scenery-01.jpg │ │ ├── scenery-02.jpg │ │ └── scenery-03.jpg │ ├── favicon.ico │ ├── img-loader.jpg │ ├── logo-32x32.png │ ├── logo-48x48.png │ └── logo.png ├── index.html ├── js │ ├── base-demo.js │ ├── base.js │ ├── classAndStyle.js │ ├── component.js │ ├── computed.js │ ├── constructor.js │ ├── filter.js │ ├── rendering.js │ └── template.js ├── pages │ ├── base-demo.html │ ├── base.html │ ├── classAndStyle.html │ ├── component.html │ ├── computed.html │ ├── constructor.html │ ├── filter.html │ ├── rendering.html │ └── template.html └── plugin │ ├── axios.js │ ├── bootstrap.min.css │ ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 │ ├── lodash.min.js │ ├── vue.js │ └── vue.min.js ├── 进阶使用示例 ├── css │ ├── common.css │ └── index.css ├── img │ ├── album │ │ ├── car-01.jpg │ │ ├── car-02.jpg │ │ ├── car-03.jpg │ │ ├── girl-01.jpg │ │ ├── girl-02.jpg │ │ ├── girl-03.jpg │ │ ├── pet-01.jpg │ │ ├── pet-02.jpg │ │ ├── pet-03.jpg │ │ ├── scenery-01.jpg │ │ ├── scenery-02.jpg │ │ └── scenery-03.jpg │ ├── favicon.ico │ ├── img-loader.jpg │ ├── logo-32x32.png │ ├── logo-48x48.png │ └── logo.png ├── index.html ├── js │ ├── component-event.js │ └── component-levup.js ├── pages │ ├── component-event.html │ └── component-levup.html └── plugin │ ├── axios.js │ ├── bootstrap.min.css │ ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 │ ├── lodash.min.js │ ├── vue-router.min.js │ ├── vue.js │ └── vue.min.js └── 高级使用示例 ├── library-manager ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── BookInfoList.vue │ │ ├── HeaderBlock.vue │ │ ├── MainContainer.vue │ │ └── SearchTools.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── scripts │ │ └── main-container.js │ └── styles │ │ ├── book-info-list.less │ │ └── common.less └── static │ ├── .gitkeep │ └── book-info.json ├── plugin ├── axios.js ├── bootstrap.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── vue-router.js ├── vue-router.min.js ├── vue.js └── vue.min.js ├── router-animation-cli ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Cart.vue │ │ ├── Category.vue │ │ ├── Home.vue │ │ └── Me.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── styles │ │ └── common.less └── static │ └── .gitkeep ├── router-base ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── todos-cli ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── icon-checkbox-no.svg │ │ ├── icon-checkbox-yes.svg │ │ └── logo.png │ ├── components │ │ └── TodosList.vue │ ├── main.js │ ├── scripts │ │ └── todos.js │ └── styles │ │ ├── style.less │ │ └── todo-list.less └── static │ └── .gitkeep ├── use-plugin-cli ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Axios.vue │ │ ├── Boot.vue │ │ ├── Echarts.vue │ │ └── Jquery.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── scripts │ │ ├── dom-ctrl.js │ │ └── set-charts.js └── static │ ├── .gitkeep │ └── role-info.json └── vue-cli内的package详解.txt /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | 3 | .idea 4 | /高级使用示例/vue-cli/node_modules/ 5 | source/图形制作 6 | .vscode 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue代码示例 2 | 本示从Vue的入门、进阶到高级的使用提供了实例，后续的内容还将继续完善... 3 | 4 | > 最后更新日期：2018年4月18日 -------------------------------------------------------------------------------- /axios-demo/css/common.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：公共页面样式 4 | * 日期：2017/4/17 5 | **/ 6 | /****************************************/ 7 | /* 初始化 */ 8 | /****************************************/ 9 | * { 10 | box-sizing: border-box; 11 | } 12 | html,body { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | a { 17 | color: #41b883; 18 | } 19 | a:hover { 20 | color: #35495e; 21 | } 22 | button { 23 | cursor: pointer; 24 | } 25 | input,select,button { 26 | outline: none; 27 | font: 18px "Microsoft Yahei",sans-serif; 28 | } 29 | input,select { 30 | min-width: 140px; 31 | padding: 4px 6px; 32 | border: 1px solid #999999; 33 | } 34 | /* 细节布局 */ 35 | .mt-10 { 36 | margin-top: 20px; 37 | } 38 | .mt-20 { 39 | margin-top: 20px; 40 | } 41 | /****************************************/ 42 | /* 细节设置 */ 43 | /****************************************/ 44 | body { 45 | background-color: #f3f3f3; 46 | font: normal 20px/1.6 Consolas, 'Courier New', "Microsoft YaHei", sans-serif; 47 | padding-bottom: 50px; 48 | } 49 | main { 50 | width: 640px; 51 | margin: 0 auto; 52 | } 53 | main > h1 { 54 | text-align: center; 55 | margin-bottom: 24px; 56 | } 57 | main > section { 58 | padding: 12px; 59 | background-color: #fff; 60 | border-radius: 5px; 61 | border: 1px solid #ddd; 62 | margin-bottom: 20px; 63 | } 64 | main > section h2 { 65 | margin: 0; 66 | padding: 0; 67 | } 68 | main section ul { 69 | color: #11bc52; 70 | } 71 | section h2 + button { 72 | margin: 10px 0; 73 | } 74 | 75 | /**** 表格样式 ****/ 76 | .frag-table { 77 | width: 100%; 78 | } 79 | .frag-table thead { 80 | background-color: #3a3b3c; 81 | color: #ffffff; 82 | } 83 | .frag-table, .frag-table th, .frag-table td { 84 | border: 1px solid #acacac; 85 | border-collapse: collapse; 86 | } 87 | .frag-table th, .frag-table td { 88 | padding: 12px; 89 | font-weight: normal; 90 | } 91 | .frag-table th { 92 | font-size: 16px; 93 | } 94 | .frag-table td { 95 | font-size: 18px; 96 | } 97 | .frag-table td img { 98 | height: 72px; 99 | } 100 | 101 | /**** 表单样式 ****/ 102 | form > div { 103 | padding-top: 20px; 104 | } 105 | form label, label input { 106 | display: inline-block; 107 | } 108 | form label { 109 | width: 96px; 110 | text-align: right; 111 | } 112 | -------------------------------------------------------------------------------- /axios-demo/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：索引页样式设置 4 | * 日期：2017/4/15 5 | **/ 6 | 7 | h1 { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | color: #35495e; 11 | } 12 | 13 | .vue-icon { 14 | width: 32px; 15 | height: 32px; 16 | background: url("../img/logo-32x32.png") no-repeat; 17 | display: inline-block; 18 | vertical-align: middle; 19 | margin-right: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /axios-demo/css/jquery-ajax.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/css/jquery-ajax.css -------------------------------------------------------------------------------- /axios-demo/data/tea-info.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "brand": "川茶集团", 4 | "name": "明前春芽", 5 | "type": "绿茶" 6 | }, 7 | { 8 | "brand": "西湖龙井", 9 | "name": "明前珍品", 10 | "type": "绿茶" 11 | }, 12 | { 13 | "brand": "武夷山", 14 | "name": "大红袍", 15 | "type": "红茶" 16 | }, 17 | { 18 | "brand": "下关沱茶", 19 | "name": "正山昔归", 20 | "type": "普洱茶" 21 | } 22 | ] -------------------------------------------------------------------------------- /axios-demo/data/test-fragment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 40 |
编号头像名称系列技能
PET-001 15 | 16 | 菊花狗草系疯狂卖萌
PET-002 24 | 25 | 躺猫咪毛系睁眼睡觉
PET-003 33 | 34 | 黑头猪肉系吃猪肉
-------------------------------------------------------------------------------- /axios-demo/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/favicon.ico -------------------------------------------------------------------------------- /axios-demo/img/logo-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/logo-32x32.png -------------------------------------------------------------------------------- /axios-demo/img/logo-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/logo-48x48.png -------------------------------------------------------------------------------- /axios-demo/img/pet-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/pet-01.jpg -------------------------------------------------------------------------------- /axios-demo/img/pet-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/pet-02.jpg -------------------------------------------------------------------------------- /axios-demo/img/pet-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/axios-demo/img/pet-03.jpg -------------------------------------------------------------------------------- /axios-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Axios示例 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Axios.js插件使用示例

16 |
17 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /axios-demo/js/axios-base.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Axios基本示例 3 | * 日期：2018/4/18 4 | **/ 5 | /* axios使用GET请求HTML文档 */ 6 | const btnLoadData1 = document.querySelector("#loadAnimalData"); 7 | btnLoadData1.onclick = function() { 8 | // 执行GET方式请求HTML文件 9 | axios.get('../data/test-fragment.html') 10 | .then(function(frag) { 11 | let teaInfo = document.querySelector('#animalData'); 12 | console.log(frag); 13 | teaInfo.innerHTML = frag.data; 14 | }) 15 | // 请求失败 16 | .catch(function () { 17 | console.error('数据请求错误'); 18 | }); 19 | } 20 | 21 | /* axios使用GET请求JSON数据 */ 22 | const btnLoadData2 = document.querySelector("#loadTeaInfo"); 23 | btnLoadData2.onclick = function() { 24 | // 执行GET方式请求JSON文件 25 | axios.get('../data/tea-info.json') 26 | // 请求成功 27 | .then(function (response) { 28 | let teaInfo = document.querySelector('#teaInfo'); 29 | console.log(response); 30 | const data = response.data, 31 | data_length = data.length; 32 | for(let i = 0; i < data_length; i++) { 33 | teaInfo.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 34 | } 35 | }) 36 | // 请求失败 37 | .catch(function () { 38 | console.error('数据请求错误'); 39 | }); 40 | } 41 | 42 | -------------------------------------------------------------------------------- /axios-demo/js/axios-param.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Axios传参示例 3 | * 日期：2018/4/18 4 | **/ 5 | /* 用GET方式发送不同的参数获得不同数据 */ 6 | const btnLoadData1 = document.querySelector("#loadData-1"); 7 | btnLoadData1.onclick = function() { 8 | const petSelectVal = document.querySelector('#petSelect').value; 9 | const petInfo = document.querySelector('#petInfo'); 10 | // 允许的参数有："pikachu"、"penhuolong"、"miaowahua" 11 | axios.get('https://www.aulence.com/php/role-info.php?role=' + petSelectVal) 12 | .then((resp) => { 13 | // console.log(resp); 14 | const data = resp.data; 15 | // 设定名称、系列和技能 16 | petInfo.children[0].children[1].innerHTML = data.name; 17 | petInfo.children[1].children[1].innerHTML = data.series; 18 | petInfo.children[2].children[1].innerHTML = data.skill.join("、"); 19 | }); 20 | // 或者是写成这种形式 21 | // axios.get('http://aulence.com/php/role-info.php', { 22 | // params: { 23 | // role: 'penhuolong' 24 | // } 25 | // }) 26 | // .then((resp) => { 27 | // console.log(resp.data) 28 | // }); 29 | } 30 | 31 | 32 | 33 | /* Axios使用POST方式向后台发送数据 */ 34 | const btnLoadData2 = document.querySelector("#loadData-2"); 35 | /* const userSignUpInfo = { 36 | name: '', 37 | tel: '', 38 | pwd: '' 39 | } */ 40 | btnLoadData2.onclick = function() { 41 | const userSignUpInfo = { 42 | name: userInfoForm.name.value, 43 | tel: userInfoForm.tel.value, 44 | pwd: userInfoForm.pwd.value 45 | } 46 | // 创建一个URL查询字符串对象 47 | const params = new URLSearchParams(); 48 | // 这样写效率低，可维护性不强 49 | // params.append('name','aulence'); 50 | // params.append('tel','18116657687'); 51 | // params.append('pwd','123456'); 52 | // 可以改写成这种形式 53 | for(let x in userSignUpInfo) { 54 | params.append(x, userSignUpInfo[x]); 55 | } 56 | //　使用POST向后台发送带参数请求 57 | axios.post('https://www.aulence.com/php/user-signup.php', params).then((resp) => { 58 | alert('来自后台返回的结果：\n' + resp.data) 59 | }); 60 | } -------------------------------------------------------------------------------- /axios-demo/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Axios示例 3 | * 日期：2017/6/26 4 | **/ 5 | /* axios的AJAX */ 6 | axios.get('data/tea-info.json') 7 | .then(function (response) { 8 | let teaInfo = document.getElementById('tea-info'); 9 | console.log(response); 10 | const data = response.data, 11 | data_length = data.length; 12 | for(let i = 0; i < data_length; i++) { 13 | teaInfo.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 14 | } 15 | }) 16 | .catch(function () { 17 | console.error('数据请求错误'); 18 | }); 19 | 20 | /* jquery的AJAX-1 */ 21 | $.get('data/tea-info.json', function (data) { 22 | let teaInfo2 = document.getElementById('tea-info2'); 23 | //console.log(data); 24 | const data_length = data.length; 25 | for(let i = 0; i < data_length; i++) { 26 | teaInfo2.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 27 | } 28 | }); 29 | 30 | /* jquery的AJAX-2 */ 31 | $.get('data/tea-info.json').done(function (data) { 32 | let teaInfo3 = document.getElementById('tea-info3'); 33 | //console.log(data); 34 | const data_length = data.length; 35 | for(let i = 0; i < data_length; i++) { 36 | teaInfo3.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 37 | } 38 | }); 39 | 40 | /* jquery的AJAX-3 */ 41 | $.get('data/tea-info.json').then( 42 | // 请求成功 43 | function (data) { 44 | let teaInfo4 = document.getElementById('tea-info4'); 45 | const data_length = data.length; 46 | for(let i = 0; i < data_length; i++) { 47 | teaInfo4.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 48 | } 49 | }, 50 | // 请求失败 51 | function () { 52 | console.error('数据URL错误或网络错误！'); 53 | } 54 | ); 55 | 56 | /* axios通过不同参数向后台发送GET请求 */ 57 | // 允许的参数有："pikachu"、"penhuolong"、"miaowahua" 58 | axios.get('http://aulence.com/php/role-info.php?role=pikachu') 59 | .then((resp) => { 60 | console.log('---------------------------------'); 61 | console.log('axios通过不同参数向后台发送GET请求：pikachu'); 62 | console.log(resp.data); 63 | console.log('---------------------------------'); 64 | }); 65 | // 或者是 66 | axios.get('http://aulence.com/php/role-info.php', { 67 | params: { 68 | role: 'penhuolong' 69 | } 70 | }) 71 | .then((resp) => { 72 | console.log('---------------------------------'); 73 | console.log('axios通过不同参数向后台发送GET请求：penhuolong'); 74 | console.log(resp.data) 75 | console.log('---------------------------------'); 76 | }); 77 | 78 | /* axios向后台发送POST请求 */ 79 | // 这里是通过表单获取到的键值对 80 | const userSignUpInfo = { 81 | name: 'aulence', 82 | tel: '18116657687', 83 | pwd: '123456' 84 | } 85 | // 创建一个URL查询字符串对象 86 | const params = new URLSearchParams(); 87 | // params.append('name','aulence'); 88 | // params.append('tel','18116657687'); 89 | // params.append('pwd','123456'); 90 | for(let x in userSignUpInfo) { 91 | params.append(x, userSignUpInfo[x]); 92 | } 93 | 94 | axios.post('http://aulence.com/php/user-signup.php', params).then((resp) => { 95 | console.log('---------------------------------'); 96 | console.log('axios向后台发送POST请求'); 97 | console.log(resp.data); 98 | console.log('---------------------------------'); 99 | }); 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /axios-demo/js/jquery-ajax.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery的AJAX使用 3 | * 日期：2018/4/18 4 | **/ 5 | 6 | $(function() { 7 | // jQuery 1.x版本AJAX调用 8 | $("#loadData-1").click(function() { 9 | jquery_v1(); 10 | }); 11 | 12 | // jQuery 2.x版本AJAX调用 13 | $("#loadData-2").click(function() { 14 | jquery_v2(); 15 | }); 16 | 17 | // jQuery 3.x版本AJAX调用 18 | $("#loadData-3").click(function() { 19 | jquery_v3(); 20 | }); 21 | }); 22 | 23 | /* jquery的AJAX-1 */ 24 | function jquery_v1() { 25 | $.get('../data/tea-info.json', function (data) { 26 | let teaInfo2 = document.getElementById('tea-info-1'); 27 | const data_length = data.length; 28 | for(let i = 0; i < data_length; i++) { 29 | teaInfo2.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 30 | } 31 | }); 32 | } 33 | 34 | /* jquery的AJAX-2 */ 35 | function jquery_v2() { 36 | $.get('../data/tea-info.json').done(function (data) { 37 | let teaInfo3 = document.getElementById('tea-info-2'); 38 | const data_length = data.length; 39 | for(let i = 0; i < data_length; i++) { 40 | teaInfo3.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 41 | } 42 | }); 43 | } 44 | 45 | /* jquery的AJAX-3 */ 46 | function jquery_v3() { 47 | $.get('../data/tea-info.json').then( 48 | // 请求成功 49 | function (data) { 50 | let teaInfo4 = document.getElementById('tea-info-3'); 51 | const data_length = data.length; 52 | for(let i = 0; i < data_length; i++) { 53 | teaInfo4.innerHTML += `
  • ${data[i].brand} - ${data[i].name} - ${data[i].type}
    • `; 54 | } 55 | }, 56 | // 请求失败 57 | function () { 58 | console.error('数据URL错误或网络错误！'); 59 | } 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /axios-demo/pages/axios-base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | axios.js基本使用 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
    31 |

    axios.js基本使用

    32 | 33 |
    34 |

    Axios使用GET请求HTML文档

    35 | 36 |
    37 |
    38 |
    39 |

    Axios使用GET请求JSON数据

    40 | 41 | 42 |
    43 |
    44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /axios-demo/pages/axios-param.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | axios.js向后台传参 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 |
    22 |

    axios.js向后台传参

    23 | 24 |
    25 |

    使用GET方式发送不同的参数获得不同数据

    26 |
    27 | 32 | 33 |
    34 | 35 |
    36 |
    37 | 38 | ---- 39 |
    40 |
    41 | 42 | ---- 43 |
    44 |
    45 | 46 | ---- 47 |
    48 |
    49 |
    50 | 51 |
    52 |

    Axios使用POST方式向后台发送数据

    53 |
    54 |
    55 | 56 | 57 |
    58 |
    59 | 60 | 61 |
    62 |
    63 | 64 | 65 |
    66 |
    67 | 68 |
    69 |
    70 | 71 | 72 |
    73 | 74 |
    75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /axios-demo/pages/jquery-ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery AJAX的使用 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 |
    22 |

    jQuery不同版本使用AJAX的方式

    23 | 24 |
    25 |

    jQuery 1.x版本的AJAX

    26 | 27 | 28 |
    29 | 30 |
    31 |

    jQuery 2.x版本的AJAX

    32 | 33 | 34 |
    35 | 36 |
    37 |

    jQuery 3.x版本的AJAX

    38 | 39 | 40 |
    41 | 42 |
    43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /index.html.bak: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 由于项目包含较多依赖项（在“高级使用示例”中），使用该页面作为导航入口可能会有较大的性能问题，所以请根据需要单独进入基础、进阶、高级文件夹单独用“live-server”启动教程项目。 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | Vue.js系列课程 46 | 47 | 48 | 49 | 50 | 51 |

    Vue.js系列课程

    52 | 72 | 73 | 88 | 89 | -------------------------------------------------------------------------------- /source/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | * { 3 | box-sizing: border-box; 4 | } 5 | body,html { 6 | margin: 0; 7 | font: normal 20px "Microsoft Yahei"; 8 | } 9 | h1 { 10 | text-align: center; 11 | font-weight: normal; 12 | color: #41b883; 13 | } 14 | nav { 15 | width: 480px; 16 | margin: 0 auto; 17 | } 18 | nav ul { 19 | border: 1px solid #41b883; 20 | border-radius: 3px; 21 | list-style: none; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | nav ul li { 26 | border-bottom: 1px solid #41b883; 27 | transition: all 0.15s; 28 | position: relative; 29 | } 30 | nav ul li:hover { 31 | background-color: #41b883; 32 | } 33 | nav ul li:last-of-type { 34 | border-bottom: none; 35 | } 36 | nav ul li a,nav ul li span { 37 | width: 100%; height: 100%; 38 | padding: 12px; 39 | cursor: pointer; 40 | text-decoration: none; 41 | color: #41b883; 42 | display: block; 43 | } 44 | nav ul li:hover a,nav ul li:hover span { 45 | color: #ffffff; 46 | } 47 | nav ul li .arrow-right { 48 | width: 24px; height: 24px; 49 | background: url("../img/arrow-right.png") no-repeat; 50 | background-size: cover; 51 | position: absolute; 52 | right: 12px; 53 | top: 14px; 54 | display: none; 55 | } 56 | nav ul li:hover .arrow-right { 57 | display: block; 58 | } -------------------------------------------------------------------------------- /source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/favicon.ico -------------------------------------------------------------------------------- /source/img/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/img/arrow-right.png -------------------------------------------------------------------------------- /source/img/pet-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/img/pet-01.jpg -------------------------------------------------------------------------------- /source/img/pet-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/img/pet-02.jpg -------------------------------------------------------------------------------- /source/img/pet-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/img/pet-03.jpg -------------------------------------------------------------------------------- /source/logo-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/logo-32x32.png -------------------------------------------------------------------------------- /source/logo-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/logo-48x48.png -------------------------------------------------------------------------------- /source/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/source/logo.png -------------------------------------------------------------------------------- /基础使用示例/css/base-demo.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：Vue基础总结DEMO 4 | * 日期：2017/4/21 5 | **/ 6 | 7 | .createInfo { 8 | margin-bottom: 20px; 9 | } 10 | 11 | table.table th, table.table td { 12 | font-size: 20px; 13 | } 14 | table.table th, table.table td:last-child { 15 | white-space: nowrap; 16 | } 17 | table.table button.btn { 18 | font-size: 18px; 19 | padding: 4px 16px; 20 | } -------------------------------------------------------------------------------- /基础使用示例/css/base.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：vue基础 4 | * 日期：2017/4/17 5 | **/ 6 | 7 | #app-6 input[type='text'] { 8 | width: 360px; 9 | height: auto; 10 | font-size: 22px; 11 | display: inline-block; 12 | padding: 6px 8px; 13 | } -------------------------------------------------------------------------------- /基础使用示例/css/classAndStyle.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：Vue的class和style绑定 4 | * 日期：2017/6/26 5 | **/ 6 | 7 | /* 样式元件 */ 8 | .text-red { 9 | color: #ff0000; 10 | } 11 | .text-green { 12 | color: #00ff00; 13 | } 14 | .text-blue { 15 | color: #0000ff; 16 | } 17 | .fz-22 { 18 | font-size: 22px; 19 | } 20 | .fz-26 { 21 | font-size: 26px; 22 | } 23 | .fz-34 { 24 | font-size: 34px; 25 | } 26 | .text-underline { 27 | text-decoration: underline; 28 | } 29 | .text-success { 30 | color: #22c847; 31 | } 32 | .text-fail { 33 | color: #bf5253; 34 | } 35 | .text-red { 36 | color: #ff0000; 37 | } 38 | .text-blue { 39 | color: #0000ff; 40 | } 41 | .fs-italic { 42 | font-style: italic; 43 | } 44 | .border-success { 45 | border: 2px solid #22d44a; 46 | border-radius: 15px; 47 | padding: 10px; 48 | } 49 | .border-fail { 50 | border: 2px solid #d45859; 51 | border-radius: 15px; 52 | padding: 10px; 53 | } 54 | /* 爱好选择 */ 55 | .hobbyList ul { 56 | margin: 0; 57 | padding: 0; 58 | overflow: hidden; 59 | list-style: none; 60 | } 61 | .hobbyList ul li { 62 | padding: 6px 20px; 63 | color: #555555; 64 | float: left; 65 | cursor: pointer; 66 | user-select: none; 67 | margin-right: 20px; 68 | } 69 | .hobbyList ul li:hover { 70 | color: #627686; 71 | text-decoration: underline; 72 | } 73 | .hobbyList ul li.active { 74 | background-color: #2a77c6; 75 | border-radius: 5px; 76 | text-decoration: none; 77 | color: #ffffff; 78 | } 79 | 80 | /* 点击切换状态 */ 81 | #app-5 div { 82 | width: 248px; 83 | padding: 6px; 84 | border: 1px solid; 85 | background-color: #f3f3f3; 86 | cursor: pointer; 87 | user-select: none; 88 | } 89 | #app-5 .setRed { 90 | border-color: #d81818; 91 | color: #d81818; 92 | } 93 | #app-5 .setGreen { 94 | border-color: #10dd66; 95 | color: #10dd66; 96 | } 97 | #app-5 .setFamily { 98 | font-family: "华文行楷"; 99 | } 100 | #app-5 .setSize { 101 | font-size: 46px; 102 | } -------------------------------------------------------------------------------- /基础使用示例/css/component.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：vue组件基础 4 | * 日期：2017/4/18 5 | **/ 6 | 7 | #app-4 { 8 | overflow: hidden; 9 | } 10 | #app-4 ul { 11 | float: left; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /基础使用示例/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：索引页样式设置 4 | * 日期：2017/4/15 5 | **/ 6 | 7 | h1 { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | color: #35495e; 11 | } 12 | 13 | .vue-icon { 14 | width: 32px; 15 | height: 32px; 16 | background: url("../img/logo-32x32.png") no-repeat; 17 | display: inline-block; 18 | vertical-align: middle; 19 | margin-right: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /基础使用示例/img/album/car-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/car-01.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/car-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/car-02.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/car-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/car-03.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/girl-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/girl-01.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/girl-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/girl-02.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/girl-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/girl-03.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/pet-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/pet-01.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/pet-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/pet-02.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/pet-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/pet-03.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/scenery-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/scenery-01.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/scenery-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/scenery-02.jpg -------------------------------------------------------------------------------- /基础使用示例/img/album/scenery-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/album/scenery-03.jpg -------------------------------------------------------------------------------- /基础使用示例/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/favicon.ico -------------------------------------------------------------------------------- /基础使用示例/img/img-loader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/img-loader.jpg -------------------------------------------------------------------------------- /基础使用示例/img/logo-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/logo-32x32.png -------------------------------------------------------------------------------- /基础使用示例/img/logo-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/logo-48x48.png -------------------------------------------------------------------------------- /基础使用示例/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/img/logo.png -------------------------------------------------------------------------------- /基础使用示例/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue实例演示索引--基础篇 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

    实例演示索引--基础篇

    15 |
    16 | 45 |
    46 | 47 | -------------------------------------------------------------------------------- /基础使用示例/js/base-demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue基础总结练习 3 | * 日期：2017/4/21 4 | **/ 5 | Vue.config.silent = true; 6 | 7 | let vm = new Vue({ 8 | el: '#app', 9 | data: { 10 | seriesDefined: ['雷','木','水','火','土','光','暗'], 11 | strongPointDefined: ['攻击','防御','智力','体质','敏捷'], 12 | buttonName: '创建角色', 13 | modifyStatus: false, 14 | operateObjIndex: NaN, 15 | newRole: { 16 | id: 'DS-', 17 | name: '', 18 | series: '雷', 19 | strongPoint: '攻击' 20 | }, 21 | roleInfo: [ 22 | { 23 | id: 'DS-001', 24 | name: '钢·雷顿兽', 25 | series: '雷', 26 | strongPoint: '防御' 27 | }, 28 | { 29 | id: 'DS-002', 30 | name: '噩梦·幽梦兽', 31 | series: '暗', 32 | strongPoint: '攻击' 33 | }, 34 | { 35 | id: 'DS-003', 36 | name: '冰·花刺兽', 37 | series: '木', 38 | strongPoint: '敏捷' 39 | }, 40 | { 41 | id: 'DS-004', 42 | name: '熔·岩甲兽', 43 | series: '土', 44 | strongPoint: '体质' 45 | } 46 | ] 47 | }, 48 | methods: { 49 | // 创建角色 50 | createRole: function () { 51 | // 如果当前的状态不为修改状态 52 | if(this.modifyStatus === false) { 53 | // 添加到一条新数据到 54 | this.roleInfo.push(this.newRole); 55 | } 56 | // 如果为修改状态 57 | else { 58 | // 修改对象对应的表格数据 59 | this.roleInfo.splice(this.operateObjIndex, 1, this.newRole); 60 | // 恢复按钮名称 61 | this.buttonName = '创建角色'; 62 | this.modifyStatus = false; 63 | } 64 | 65 | // 添加完newRole对象后，重置newRole对象 66 | this.newRole = { 67 | id: 'DS-', 68 | name: '', 69 | series: '雷', 70 | strongPoint: '攻击' 71 | } 72 | }, 73 | // 删除角色 74 | deleteRole: function (index) { 75 | this.roleInfo.splice(index,1); 76 | }, 77 | // 修改角色 78 | editRole: function (index) { 79 | // 修改按钮名称 80 | this.buttonName = '确认修改'; 81 | this.newRole = { 82 | id: this.roleInfo[index].id, 83 | name: this.roleInfo[index].name, 84 | series: this.roleInfo[index].series, 85 | strongPoint: this.roleInfo[index].strongPoint 86 | }; 87 | this.modifyStatus = true; 88 | this.operateObjIndex = index; 89 | }, 90 | // 表格升序排列 91 | ascending: function () { 92 | this.roleInfo.sort(function (role1, role2) { 93 | let id_1 = role1.id.replace(/\D*/g,''), 94 | id_2 = role2.id.replace(/\D*/g,''); 95 | return id_1 - id_2; 96 | }); 97 | }, 98 | // 表格降序排列 99 | descending: function () { 100 | this.roleInfo.sort(function (role1, role2) { 101 | let id_1 = role1.id.replace(/\D*/g,''), 102 | id_2 = role2.id.replace(/\D*/g,''); 103 | return id_2 - id_1; 104 | }); 105 | } 106 | } 107 | }); 108 | 109 | 110 | /** 111 | * 到目前为止我们接触的VM主要的配置项包括 112 | */ 113 | /* new Vue({ 114 | // 基本配置 115 | el: '#app', // 选择器 116 | data: {}, // 数据 117 | computed: {}, // 计算属性 118 | methods: {}, // 事件 119 | // 8个钩子函数 120 | beforeCreate() {}, // 数据创建前 121 | created() {}, // 数据创建后 122 | beforeMount() {}, // 视图元素生成前 123 | mounted() {}, // 视图元素生成后 124 | beforeUpdate() {}, // 数据在更新的时候之前的操作 125 | updated() {}, // 数据在更新的时候之后的操作 126 | beforeDestroy() {}, // VM（视图模型）在销毁操作执行的时候之前的操作 127 | destroyed() {}, // VM在销毁操作执行的时候之后的操作 128 | // 其它配置 129 | filters: {}, // 过滤器 130 | watch: {}, // 检测器 131 | components: {} // 组件 132 | }); */ 133 | 134 | -------------------------------------------------------------------------------- /基础使用示例/js/base.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：vue基础 3 | * 日期：2017/4/17 4 | **/ 5 | 6 | const app1 = new Vue({ 7 | el: '#app-1', 8 | data: { 9 | message: '这是我希望在该标签输出的内容' 10 | } 11 | }); 12 | 13 | const app2 = new Vue({ 14 | el: '#app-2', 15 | data: { 16 | title: '这是鼠标悬浮后提示的文本', 17 | url: 'https://www.baidu.com/' 18 | } 19 | }); 20 | 21 | const app3 = new Vue({ 22 | el: '#app-3', 23 | data: { 24 | show: true, 25 | hide: false 26 | } 27 | }); 28 | 29 | const app4 = new Vue({ 30 | el: '#app-4', 31 | data: { 32 | // 汽车信息 33 | carInfo: [ 34 | { name: '柯尼塞格one1', price: '99999999' }, 35 | { name: 'LykanHypersport', price: '90000000' }, 36 | { name: '迈巴赫exelero', price: '60000000' }, 37 | { name: '西尔贝', price: '50000000' }, 38 | { name: '阿斯顿马丁one-77', price: '47000000' } 39 | ] 40 | } 41 | }); 42 | 43 | const app5 = new Vue({ 44 | el: '#app-5', 45 | data: { 46 | content: '#app-5：原来的文本内容。' 47 | }, 48 | // Vue的事件都是通过这个对象进行设置的 49 | methods: { 50 | // 添加文本的事件 51 | addText: function () { 52 | const testStr = '新增的文本内容'; 53 | // 如果找不到对应的字符串，则新增指定文本 54 | if(!this.content.includes(testStr)) { 55 | this.content += testStr; 56 | } else { 57 | alert('文本已经添加！'); 58 | } 59 | } 60 | } 61 | }); 62 | 63 | const app6 = new Vue({ 64 | el: '#app-6', 65 | data: { 66 | text: '数据双向绑定' 67 | } 68 | }); 69 | 70 | 71 | -------------------------------------------------------------------------------- /基础使用示例/js/classAndStyle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue的class和style绑定 3 | * 日期：2017/6/26 4 | **/ 5 | Vue.config.silent = true; 6 | 7 | const app1 = new Vue({ 8 | el: '#app-1', 9 | data: { 10 | statusTrue: true, 11 | statusFalse: false 12 | } 13 | }); 14 | 15 | const app2 = new Vue({ 16 | el: '#app-2', 17 | data: { 18 | styleObject: { 19 | 'fz-26': true, 20 | 'text-blue': true, 21 | 'text-underline': false 22 | } 23 | } 24 | }); 25 | 26 | const app3 = new Vue({ 27 | el: '#app-3', 28 | data: { 29 | getHobby: [], 30 | hobbyList: [ 31 | { buttonName: '编程', activeStatus: true }, 32 | { buttonName: '游戏', activeStatus: true }, 33 | { buttonName: '看书', activeStatus: false }, 34 | { buttonName: '美食', activeStatus: true }, 35 | { buttonName: '运动', activeStatus: false }, 36 | { buttonName: '电影', activeStatus: true } 37 | ] 38 | }, 39 | methods: { 40 | // 选中效果 41 | toggleClass: function (index) { 42 | // 通过这样的方式来实现状态的切换（true/false）是比较常用的最简单方式 43 | this.hobbyList[index].activeStatus = !this.hobbyList[index].activeStatus; 44 | this.getHobby = this.getHobbyMethod(this.hobbyList); 45 | }, 46 | // 返回选中项数组的方法 47 | getHobbyMethod(arr) { 48 | const hobby = []; 49 | for(let x in arr) { 50 | if(arr[x].activeStatus) { 51 | hobby.push(arr[x].buttonName); 52 | } 53 | } 54 | return hobby; 55 | } 56 | } 57 | }); 58 | 59 | const app4 = new Vue({ 60 | el: '#app-4', 61 | data: { 62 | stateText: { 63 | success: '成功', 64 | fail: '失败' 65 | }, 66 | toggle: true, 67 | status: 'ok', 68 | header: null 69 | }, 70 | computed: { 71 | successClass: function () { 72 | return { 73 | 'border-success': this.toggle && this.status && !this.header, 74 | 'text-success': this.toggle === true && this.status === 'ok' && this.header === null 75 | } 76 | }, 77 | failClass: function (index) { 78 | return { 79 | 'border-success': !this.toggle && !this.status && this.header, 80 | 'text-success': this.toggle === false && this.status === 'fail' && this.header !== null, 81 | 'border-fail': 2 > 3 || 5 > 3, 82 | 'text-fail': true, 83 | 'mt-10': 53 + 47 === 100 84 | } 85 | } 86 | } 87 | }); 88 | 89 | const app5 = new Vue({ 90 | el: '#app-5', 91 | data: { 92 | danger: '危险的操作', 93 | security: '安全的操作', 94 | operate: true, 95 | setFont: { 96 | setRed: true, 97 | setGreen: false, 98 | setFamily: true, 99 | setSize: true 100 | } 101 | }, 102 | methods: { 103 | changeState() { 104 | this.operate = !this.operate; 105 | this.setFont.setRed = !this.setFont.setRed; 106 | this.setFont.setGreen = !this.setFont.setGreen; 107 | } 108 | } 109 | }); 110 | 111 | const app6 = new Vue({ 112 | el: '#app-6', 113 | data: { 114 | red: 'text-red', 115 | blue: 'text-blue', 116 | fz: 'fz-22', 117 | fs: 'fs-italic', 118 | yes: true, 119 | no: false 120 | } 121 | }); 122 | 123 | Vue.component('test-class', { 124 | props: ['prop'], 125 | template: '

    测试组件挂载class，及样式优先级

    ' 126 | }); 127 | const app7 = new Vue({ 128 | el: '#app-7', 129 | data: {} 130 | }); 131 | -------------------------------------------------------------------------------- /基础使用示例/js/component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：vue组件 3 | * 日期：2017/4/17 4 | **/ 5 | 6 | /* 私有组件 */ 7 | const app1 = new Vue({ 8 | el: '#app-1', 9 | data: { 10 | txtData: 'VM传递过来的数据' 11 | }, 12 | components: { 13 | 'comp-item': { 14 | props: ['data'], 15 | template: ` 16 |
    17 |

    我是自定义组件

    18 |

    在这里可以写HTML代码，也可以嵌入“{{data}}”

    19 |
    20 | ` 21 | } 22 | } 23 | }); 24 | 25 | /* 全局组件 */ 26 | Vue.component('li-carinfo-item', { 27 | // 属性“carprop”的值来对应视图的VM内的data属性内的数据 28 | props: ['carList'], 29 | template: ` 30 | 33 | ` 34 | }); 35 | 36 | /* 全局组件--示例1 */ 37 | const app2 = new Vue({ 38 | el: '#app-2', 39 | data: { 40 | high_carInfo: [ 41 | { name: '兰博基尼' }, 42 | { name: '劳斯莱斯' }, 43 | { name: '宾利' }, 44 | { name: '法拉利' }, 45 | { name: '阿斯顿马丁' } 46 | ] 47 | } 48 | }); 49 | 50 | /* 全局组件--示例2 */ 51 | const app3 = new Vue({ 52 | el: '#app-3', 53 | data: { 54 | norm_carInfo: [ 55 | { name: '上海大众' }, 56 | { name: '北京现代' }, 57 | { name: '长安福特' }, 58 | { name: '华晨宝马' }, 59 | { name: '成都公交' } 60 | ] 61 | } 62 | }); 63 | 64 | /* 全局组件--示例3 */ 65 | const app4 = new Vue({ 66 | el: '#app-4', 67 | data: { 68 | lowe_mbick: [ 69 | { name: '钱江摩托' }, 70 | { name: '嘉陵摩托' }, 71 | { name: '力帆摩托' } 72 | ], 73 | norm_mbick: [ 74 | { name: '本田摩托' }, 75 | { name: '宝马摩托' }, 76 | { name: '雅马哈摩托' } 77 | ], 78 | high_mbick: [ 79 | { name: '川崎摩托' }, 80 | { name: '杜卡迪摩托' }, 81 | { name: '哈雷摩托' } 82 | ] 83 | } 84 | }); 85 | -------------------------------------------------------------------------------- /基础使用示例/js/constructor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：vue构造器 3 | * 日期：2017/4/18 4 | **/ 5 | 6 | // 关闭 Vue 所有的日志与警告 7 | Vue.config.silent = true; 8 | // 关闭 Vue 控制台中输出的“处于开发模式”的信息 9 | Vue.config.productionTip = true; 10 | 11 | /* 模块通用对象（全局） */ 12 | window.appname = { 13 | setName: '数据内容1' 14 | }; 15 | 16 | /* #app1 */ 17 | let appname = { 18 | setName: '数据内容1' 19 | }; 20 | const app1 = new Vue({ 21 | el: '#app-1', 22 | data: appname 23 | }); 24 | 25 | /* #app2 */ 26 | let app2data = { 27 | setName: '数据内容2', 28 | oldVal: '--暂无--' 29 | }; 30 | const app2 = new Vue({ 31 | el: '#app-2', 32 | data: app2data 33 | }); 34 | app2.$watch('setName', function (newVal, oldVal) { 35 | app2data.oldVal = oldVal; 36 | }); 37 | 38 | let createData = "未处理"; 39 | /* #app3 */ 40 | const app3 = new Vue({ 41 | // 注意这里指定的“el”并非是在构造函数的参数内配置的 42 | // 而是在实例最后通过“$mount”方法进行指定的 43 | data: { 44 | handle: createData, 45 | name: '我是app-3的名称', 46 | prop: '我是app-3的属性' 47 | }, 48 | // 钩子函数：数据实例创建前执行 49 | beforeCreate: function() { 50 | createData = "处理后"; 51 | }, 52 | // 钩子函数：数据实例创建后执行 53 | created: function () { 54 | document.getElementsByClassName('content')[0].textContent = `${this.handle}：${this.name}，${this.prop}。`; 55 | } 56 | }).$mount('#app-3'); 57 | 58 | /* #app4 */ 59 | const app4 = new Vue({ 60 | el: '#app-4', 61 | data: { 62 | testString: '' 63 | }, 64 | created: function () { 65 | this.testString = '测试文本内容'; 66 | }, 67 | // 钩子函数：模板编译之后，但在VM实例替换视图前执行 68 | beforeMount: function() { 69 | this.testString = '被修改后的' + this.testString; 70 | }, 71 | // 钩子函数：VM实例替换视图后执行 72 | mounted: function () { 73 | this.testString += "~~~" 74 | this.$refs.hookElement.style.cssText = ` 75 | padding: 10px 12px; 76 | background-image: linear-gradient(179deg, rgb(222, 108, 251), rgb(83, 3, 103)); 77 | color:#fff; 78 | `; 79 | } 80 | }); 81 | 82 | /* #app5 */ 83 | const app5 = new Vue({ 84 | el: '#app-5', 85 | data: { 86 | testString: '测试的', 87 | run: false, 88 | }, 89 | mounted: function () { 90 | this.testString += "文本内容" 91 | }, 92 | // 钩子函数：数据更新前执行 93 | beforeUpdate: function() { 94 | if(this.testString.includes('文本内容')) { 95 | this.run = true; 96 | } else { 97 | this.run = false; 98 | } 99 | }, 100 | // 钩子函数：数据更新后执行 101 | updated: function() { 102 | if(this.run) { 103 | this.$refs.hookElement.style.fontSize = "32px"; 104 | this.$refs.hookElement.style.color = "#08f"; 105 | } else { 106 | this.$refs.hookElement.style.fontSize = "20px"; 107 | this.$refs.hookElement.style.color = "#333"; 108 | alert('请确保数据中包含“文本内容”字样！'); 109 | } 110 | } 111 | }); 112 | 113 | /* #app6 */ 114 | const app6 = new Vue({ 115 | el: '#app-6', 116 | data: { 117 | str: '我想要被销毁' 118 | }, 119 | methods: { 120 | deleteVM() { 121 | app6.$destroy(); 122 | } 123 | }, 124 | beforeDestroy: function() { 125 | this.$refs.hookElement.style.color = '#f00'; 126 | alert('我可能要被销毁了'); 127 | }, 128 | destroyed: function() { 129 | alert('我已经被销毁了。无法再对“app6”这个VM进行修改了。'); 130 | } 131 | }); 132 | 133 | -------------------------------------------------------------------------------- /基础使用示例/js/filter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue过滤器 3 | * 日期：2017/4/19 4 | **/ 5 | 6 | /*******************************************/ 7 | /* 过滤器操作 */ 8 | /*******************************************/ 9 | window.onload = function () { 10 | 11 | const app1 = new Vue({ 12 | el: '#app-1', 13 | data: { 14 | content: 'this is vue filter!' 15 | } 16 | }); 17 | 18 | const app2 = new Vue({ 19 | el: '#app-2', 20 | data: { 21 | money: 234659.3 22 | } 23 | }); 24 | 25 | const app3 = new Vue({ 26 | el: '#app-3', 27 | data: { 28 | keyboardInfo: { 29 | goods: 'Cherry樱桃机械键盘-MX-BOARD 9.0', 30 | country: '德国', 31 | price: 1376 32 | } 33 | } 34 | }); 35 | 36 | const app4 = new Vue({ 37 | el: '#app-4', 38 | data: { 39 | refrigerator: { 40 | goods: '海尔智能王冰箱', 41 | country: '中国', 42 | manuDate: 1492531200000 43 | } 44 | }, 45 | filters: { 46 | // 毫秒转本地日期格式过滤器 47 | toLocalDate: function(value) { 48 | if (!value) { 49 | return '[非法日期格式]'; 50 | } 51 | if(typeof value === 'number') { 52 | value = new Date(value).toLocaleString(); 53 | } 54 | return value; 55 | } 56 | } 57 | }); 58 | }; 59 | 60 | 61 | 62 | /*******************************************/ 63 | /* 过滤器定义 */ 64 | /*******************************************/ 65 | // 首字母大写 66 | Vue.filter('capitalize', function(value) { 67 | if (!value) { 68 | return ''; 69 | } 70 | value = value.toString(); 71 | return value.charAt(0).toUpperCase() + value.slice(1); 72 | }); 73 | 74 | // 全部字母大写 75 | Vue.filter('uppercase', function(value) { 76 | if (!value) { 77 | return ''; 78 | } 79 | value = value.toString(); 80 | return value.toUpperCase(); 81 | }); 82 | 83 | // 全部字母小写 84 | Vue.filter('lowerCase', function(value) { 85 | if (!value) { 86 | return ''; 87 | } 88 | value = value.toString(); 89 | return value.toLowerCase(); 90 | }); 91 | 92 | // 书名号 93 | Vue.filter('bookmark', function (val) { 94 | if(!val) { 95 | return ''; 96 | } 97 | val = '《' + val + '》'; 98 | return val; 99 | }); 100 | 101 | // 货币符号 102 | Vue.filter('currency', function(value) { 103 | if(typeof value === 'number') { 104 | value = '￥' + parseFloat(value.toFixed(2)).toLocaleString(); 105 | // 如果有小数 106 | if(value.lastIndexOf('\.') !== -1) { 107 | // 获取小数位 108 | const decimalLength = value.slice(value.lastIndexOf('\.') + 1).length; 109 | // 只有有一位小数 110 | if(decimalLength === 1) { 111 | value += "0" 112 | } 113 | } 114 | // 如果没有小数 115 | else { 116 | value += ".00" 117 | } 118 | } 119 | return value; 120 | }); 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /基础使用示例/js/rendering.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue渲染方式 3 | * 日期：2018/6/3 4 | **/ 5 | 6 | const roleInfo_arr = ['天魁星——及时雨：宋江','天罡星——玉麒麟：卢俊义','天机星——智多星：吴用','天闲星——入云龙：公孙胜','天勇星——大刀：关胜','天雄星——豹子头：林冲','天猛星——霹雳火：秦明']; 7 | 8 | const roleInfo_obj = [ 9 | { star: '天威星', title: '双鞭', name: '呼延灼'}, 10 | { star: '天英星', title: '小李广', name: '华荣'}, 11 | { star: '天贵星', title: '小旋风', name: '柴进'}, 12 | { star: '天富星', title: '扑天雕', name: '李应'}, 13 | { star: '天满星', title: '美髯公', name: '朱仝'}, 14 | { star: '天孤星', title: '花和尚', name: '鲁智深'}, 15 | { star: '天伤星', title: '行者', name: '武松'}, 16 | ]; 17 | const app1 = new Vue({ 18 | el: '#app-1', 19 | data: { 20 | listRender_arr: roleInfo_arr, 21 | listRender_obj: roleInfo_obj 22 | } 23 | }); 24 | 25 | const app2 = new Vue({ 26 | el: '#app-2', 27 | data: { 28 | indexString: 'index为：', 29 | starName: '，星宿：', 30 | titleName: '，头衔：', 31 | nameIs: '，姓名：', 32 | listRender_obj: roleInfo_obj 33 | } 34 | }); 35 | 36 | 37 | const app3 = new Vue({ 38 | el: '#app-3', 39 | data: { 40 | roleInfo: { 41 | name: '诸葛亮', 42 | title: '卧龙', 43 | writings: '《隆中对》、《出师表》、《诫子书》等' 44 | } 45 | } 46 | }); 47 | 48 | const app4 = new Vue({ 49 | el: '#app-4', 50 | data: { 51 | dlInfo: [ 52 | { type: '水果', name: '葡萄、荔枝、葡萄' }, 53 | { type: '肉类', name: '牛肉、羊肉、猪肉' }, 54 | { type: '谷类', name: '大麦、玉米、水稻' }, 55 | { type: '饮品', name: '汽水、咖啡、茶' } 56 | ] 57 | } 58 | }); 59 | 60 | const app5 = new Vue({ 61 | el: '#app-5', 62 | data: { 63 | hobbys: [ 64 | { name: '编程', show: true }, 65 | { name: '游戏', show: false }, 66 | { name: '看书', show: true }, 67 | { name: '美食', show: false }, 68 | { name: '运动', show: true }, 69 | { name: '电影', show: false }, 70 | ] 71 | }, 72 | methods: { 73 | showInfo(index) { 74 | alert("您点击的是：" + this.hobbys[index].name); 75 | } 76 | } 77 | }); 78 | 79 | const app6 = new Vue({ 80 | el: '#app-6', 81 | data: { 82 | selectItem: '萌宠', 83 | types: ['萌宠','风景','汽车','美女'], 84 | imgStyle: 'height: 160px; margin-right: 10px; border-radius: 15px', 85 | albums: { 86 | pet: ['../img/album/pet-01.jpg','../img/album/pet-02.jpg','../img/album/pet-03.jpg'], 87 | scenery: ['../img/album/scenery-01.jpg','../img/album/scenery-02.jpg','../img/album/scenery-03.jpg'], 88 | car: ['../img/album/car-01.jpg','../img/album/car-02.jpg','../img/album/car-03.jpg'], 89 | girl: ['../img/album/girl-01.jpg','../img/album/girl-02.jpg','../img/album/girl-03.jpg'] 90 | } 91 | } 92 | }); 93 | 94 | -------------------------------------------------------------------------------- /基础使用示例/js/template.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue模板语法 3 | * 日期：2017/4/19 4 | **/ 5 | 6 | const app1 = new Vue({ 7 | el: '#app-1', 8 | data: { 9 | content: '一次性插值的内容，数据更新不会影响插值的节点' 10 | }, 11 | methods: { 12 | modifContent: function () { 13 | this.content = '修改后的内容'; 14 | } 15 | } 16 | }); 17 | 18 | const app2 = new Vue({ 19 | el: '#app-2', 20 | data: { 21 | content1: '正常的文本内容', 22 | content2: '能显示HTML的内容，注意写法' 23 | } 24 | }); 25 | 26 | const app3 = new Vue({ 27 | el: '#app-3', 28 | data: { 29 | // 禁用状态 30 | state: true 31 | }, 32 | methods: { 33 | // 主按钮执行的操作 34 | runMethod: function() { 35 | alert('操作成功执行！'); 36 | }, 37 | // 激活按钮操作 38 | activer: function() { 39 | // 将禁用状态设置为false 40 | this.state = false; 41 | }, 42 | // 禁用按钮操作 43 | disabler: function() { 44 | // 将禁用状态设置为true 45 | this.state = true; 46 | } 47 | } 48 | }); 49 | 50 | const app4 = new Vue({ 51 | el: '#app-4', 52 | data: { 53 | total: 1000, 54 | state: '正确', 55 | skillArr: ['Angular', 'React', 'Vue'], 56 | obj: { 57 | quantifier: '个', 58 | personName: '葫芦娃' 59 | }, 60 | fn: function (a,b) { 61 | return a * b; 62 | } 63 | } 64 | }); 65 | 66 | const app5 = new Vue({ 67 | el: '#app-5', 68 | data: { 69 | gender: '保密' 70 | } 71 | }); 72 | 73 | const app6 = new Vue({ 74 | el: '#app-6', 75 | data: { 76 | hobby: ['电影'] 77 | } 78 | }); 79 | 80 | -------------------------------------------------------------------------------- /基础使用示例/pages/base-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue基础总结练习 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 | 21 |
    22 |
    23 |
    24 |

    Vue基础总结练习

    25 | 26 |
    27 |
    28 |
    29 | 30 | 31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 | 38 | 43 |
    44 |
    45 | 46 | 51 |
    52 |
    53 | 54 |
    55 |
    56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 76 | 77 | 78 |
    序号角色名系列擅长操作
    73 | 74 | 75 |
    79 |
    80 | 81 | 82 |
    83 |
    84 |
    85 |
    86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /基础使用示例/pages/classAndStyle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue的class和style绑定 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 22 |
    23 | 24 |
    25 |
    26 |

    Vue的class和style绑定

    27 | 28 |
    29 |

    #app-1：根据数据的布尔值添加class

    30 |

    红色的34像素字体，带下划线的段落

    35 |

    红色字体的段落

    40 |

    使用默认样式的段落

    45 |
    46 | 47 |
    48 |

    #app-2：通过视图模型里的数据对象添加class

    49 |

    本段落的class是通过数据定义的，所以不需要花括号

    50 |

    这样就可以修改“app2.styleObject["fz-26"]”等“class”（其实是属性）的布尔值来动态添加/移除class了

    51 |

    在控制台中输入“app2.styleObject["text-blue"] = false”观察效果

    52 |
    53 | 54 |
    55 |

    #app-3：通过切换class绑定的布尔值添加/移除样式

    56 |
    57 |
      58 | 61 | 62 |
    63 |
    64 |
    65 | 66 |
    67 |

    #app-4：通过计算属性设置class

    68 |
    {{stateText.success}}
    69 |
    {{stateText.fail}}
    70 | 有时我们需要根据现有的条件（主要是数据模型，即数据源）来判断当前元素的显示状态，可以像这样，通过条件设置的方式来启用或禁用指定的样式类 71 |
    72 | 73 |
    74 |

    #app-5：通过点击事件切换状态

    75 |
    {{danger}}
    76 |
    {{security}}
    77 | 在有些需要切换组件/控件显示状态的场景，可以使用这样的方式。这样的场景有：密码的明文切换、同样位置操作按钮的切换显示、开关功能（可能联动一系列的功能）、登录方式切换等 78 |
    79 | 80 |
    81 |

    #app-6：通过数组设置class

    82 |
    样式组合一
    83 |
    样式组合二
    84 |
    样式组合三
    85 | 86 |

    通过数组内的三元表达式添加class：

    87 |
    使用红色的22像素字体（全部执行）
    88 |
    使用红色的22像素字体（只执行字体大小）
    89 | 90 |

    通过数组+对象添加class：

    91 |
    使用蓝色的斜体字体（全部执行）
    92 |
    使用蓝色的斜体字体（只执行斜体）
    93 | 94 | 通过这样的方式使得样式的可控性更强，可以根据实现意图来对数据进行操作或判断，从而实现丰富的样式变换 95 |
    96 | 97 |
    98 |

    #app-7：在组件上设置class

    99 | 100 | 101 | 102 | 最终会将设置在子组件上的样式类和父组件上的样式拼接在一起，如果出现具体样式属性的冲突，会按照原样式表内的权重优先级进行覆盖 103 |
    104 |
    105 |
    106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /基础使用示例/pages/component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue组件基础 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 | 21 |
    22 | 23 |
    24 |
    25 |

    Vue组件基础

    26 | 27 |
    28 |

    #app-1：一个简单的私有组件

    29 | 30 | 这里的“comp-item”就是挂载到当前视图模型（VM，即View Model）上的子组件，而VM要向组件传递数据是通过视图上的属性值“txtData”向组件内的“data”属性实现的，而在组件内部，需要一个“props”属性定义这个属性，这样一来，在组件内部就可以通过模版语法使用它的VM载体来定义数据了。这样的实现灵感来至于React，而这种思维模式叫做“组件化编程思维”。 31 |

    不过在这里不理解没有关系，在我们的Vue进阶使用实例里面会进行详细说明。现在我们只需要知道何为组件，组件的表现形式是什么样的即可。

    32 |

    组件化编程思维是现在JavaScript框架（如Angular、React还有我们的主角Vue）的主要思维模式，它的设计遵从软件设计模式原则。（软件设计模式的六大原则：单一职责、里式替换、依赖倒置、接口隔离、迪米特法则、开闭）

    33 |

    想要更深入的了解软件的设计模式，可以看看这篇归纳得比较精简有趣的文章。

    34 |     35 |
    36 | 37 |
    38 |

    #app-2：使用公共组件渲染一个列表

    39 | 40 | 该位置出现的组件标签只是为公共组件提供了数据源“high_carInfo”，并且将别名“car”提供给组件内的“props”属性对象内的“carprop”属性。可以这样理解它们的关系：“var carprop = car;”，它们近似一种赋值关系。而“car”是“high_carInfo”内一个个对象的别名。 41 |

    如：“high_carInfo[2]”指的就是对象“{ name: '宾利' }”

    42 |     43 |
    44 | 45 |
    46 |

    #app-3：使用不同的数据同一个组件渲染列表

    47 | 48 | 注意这里已经是另外的VM实例了，但是仍然可以使用注册在全局内的公共组件。 49 |
    50 | 51 |
    52 |

    #app-4：使用同一个VM实例内的不同数据同一个组件渲染不同的列表

    53 | 54 | 55 | 56 | 57 | 58 | 59 | 以上的实例都主要体现了组件可复用、低耦合的特点。我们暂时可以用JavaScript内的函数来理解组件，就是当传入不同的参数的时候，函数内的语句照常执行，只是由于传入参数不同导致最终运行结果有所不同。 60 |

    最后再次强调，组件化编程思想是Vue的核心编程思想，掌握组件化编程思维对学习这门框架语言十分有益。在Vue进阶课程里我们会更深入地了解组件的编写使用。

    61 |     62 |
    63 | 64 |
    65 |
    66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /基础使用示例/pages/filter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue过滤器 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 | 21 |
    22 | 23 |
    24 |
    25 |

    Vue过滤器

    26 | 27 |
    28 |

    #app-1：字母大小写过滤

    29 |

    {{content | capitalize}}

    30 |

    {{content | uppercase}}

    31 |

    {{content | lowerCase}}

    32 |

    {{content | bookmark}}

    33 | 34 | 在Vue 1.0版本中提供了一系列的内置过滤器，由于作者一些设计理念上的变化（部分开发者认为这样有些“矫枉过正”），导致在Vue 2.0之后，所有的内置过滤器都被移除了，只有编写自定义过滤器了。 35 |

    在Vue 2.0的版本之后提供了两种形式的过滤器，一种是通过“Vue.filter”方法来注册全局的过滤器，还有一种是在Vue的实例（见“#app-4”的JS源码部分）或者是组件内部通过“filter”选项来配置过滤器。

    36 |

    详情查看Vue官网文档——过滤器。

    37 |     38 |
    39 | 40 |
    41 |

    #app-2:货币格式

    42 |

    {{money | currency}}

    43 | 这是一个处理货币格式的过滤器，这样的过滤器在中介类或金融类网站上非常有用武之地。（中介类网站如：淘宝、京东、拼多多、链家、滴滴、美团、广告平台等等） 44 |
    45 | 46 |
    47 |

    #app-3:对匹配类型的数据进行过滤（货币格式）

    48 |
      49 |
    • 50 | {{item | currency}} 51 |
      • 52 |
    53 | 可以在过滤器内部实现对数据类型的判断，让配置类型的数据参与转换操作，而不匹配的数据类型直接返回本身的值。 54 |
    55 | 56 |
    57 |

    #app-4:转换毫秒数为本地日期

    58 |
      59 |
    • 60 | {{item | toLocalDate}} 61 |
      • 62 |
    63 | 此例是将过滤器定义在实例内部的，其它实例无法使用。如果是需要将过滤定义在组件内部，代码格式完全相同。 64 |
    65 |
    66 |
    67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /基础使用示例/plugin/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/plugin/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /基础使用示例/plugin/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/plugin/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /基础使用示例/plugin/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/plugin/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /基础使用示例/plugin/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/基础使用示例/plugin/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /进阶使用示例/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：索引页样式设置 4 | * 日期：2017/4/15 5 | **/ 6 | 7 | h1 { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | color: #35495e; 11 | } 12 | 13 | .vue-icon { 14 | width: 32px; 15 | height: 32px; 16 | background: url("../img/logo-32x32.png") no-repeat; 17 | display: inline-block; 18 | vertical-align: middle; 19 | margin-right: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /进阶使用示例/img/album/car-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/car-01.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/car-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/car-02.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/car-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/car-03.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/girl-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/girl-01.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/girl-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/girl-02.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/girl-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/girl-03.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/pet-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/pet-01.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/pet-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/pet-02.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/pet-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/pet-03.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/scenery-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/scenery-01.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/scenery-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/scenery-02.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/album/scenery-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/album/scenery-03.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/favicon.ico -------------------------------------------------------------------------------- /进阶使用示例/img/img-loader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/img-loader.jpg -------------------------------------------------------------------------------- /进阶使用示例/img/logo-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/logo-32x32.png -------------------------------------------------------------------------------- /进阶使用示例/img/logo-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/logo-48x48.png -------------------------------------------------------------------------------- /进阶使用示例/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/img/logo.png -------------------------------------------------------------------------------- /进阶使用示例/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue实例演示索引--进阶篇 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

    实例演示索引--进阶篇

    15 |
    16 | 24 |
    25 | 26 | -------------------------------------------------------------------------------- /进阶使用示例/js/component-event.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue组件进阶 3 | * 日期：2017/6/27 4 | **/ 5 | Vue.config.silent = false; 6 | Vue.config.productionTip = false; 7 | 8 | /**** 示例-1 ****/ 9 | const app1 = new Vue({ 10 | el: '#app-1', 11 | data: { 12 | normal: ``, 13 | actually: `` 14 | }, 15 | 16 | }); 17 | 18 | /**** 示例-2 ****/ 19 | Vue.component('button-calc-add', { 20 | template: ``, 21 | data: function () { 22 | return { 23 | num: 0 24 | } 25 | }, 26 | methods: { 27 | addSelf: function (num) { 28 | this.num += num; 29 | // 触发子组件上绑定的“视图模型”（Vue示例的）部分的calcResult事件 30 | this.$emit('add-self'); 31 | } 32 | } 33 | }); 34 | const app2 = new Vue({ 35 | el: '#app-2', 36 | data: { 37 | res: 0 38 | }, 39 | methods: { 40 | calcResult: function () { 41 | this.res += 1 42 | } 43 | } 44 | }); 45 | 46 | /**** 示例-3 ****/ 47 | Vue.component('component-event', { 48 | template: ` 49 |
    50 | 56 |

    57 | 是否按住shift键：{{ shiftKey }}
    58 | 输入的键名是：{{ keyName }}
    59 | 对应的键值是：{{ keyCode }}
    60 | 通过什么事件触发的：{{ eventType }}
    61 | 元素的类型是：{{ elType }}
    62 | 元素父级元素是：{{ eltParent }}
    63 | 从页面载入完成到触发事件经过了多少秒： {{ timeStamp | toSecond }} 64 |

    65 |
    66 | `, 67 | data: function () { 68 | return { 69 | inputLong: 'width: 480px;', 70 | shiftKey: '', 71 | keyName: '', 72 | keyCode: '', 73 | elType: '', 74 | eltParent: '', 75 | eventType: '', 76 | timeStamp: '', 77 | } 78 | }, 79 | methods: { 80 | componentEvent (e) { 81 | this.shiftKey = e.shiftKey; 82 | this.keyName = e.key; 83 | this.keyCode = e.keyCode; 84 | this.eventType = e.type; 85 | this.elType = e.target.type; 86 | this.eltParent = e.target.parentElement.tagName; 87 | this.timeStamp = e.timeStamp; 88 | 89 | console.log(e); 90 | } 91 | }, 92 | filters: { 93 | toSecond(val) { 94 | if(val === '') { 95 | return val = ''; 96 | } 97 | return (val / 1000).toFixed(2); 98 | } 99 | } 100 | }); 101 | const app3 = new Vue().$mount('#app-3'); 102 | 103 | /**** 示例-4 ****/ 104 | Vue.component('event-modifier', { 105 | template: ` 106 |
    107 |

    108 | 可以打开百度 109 |

    110 |

    111 | 打不开百度 112 |

    113 |

    114 | 不仅打不开百度，还会被嘲讽 115 |

    116 | 117 |
    118 | `, 119 | methods: { 120 | taunt: function () { 121 | alert('哈哈哈，打不开吧！！！') 122 | } 123 | } 124 | }); 125 | const app4 = new Vue({ 126 | el: '#app-4' 127 | }); 128 | -------------------------------------------------------------------------------- /进阶使用示例/pages/component-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue组件事件 7 | 8 | 9 | 10 | 11 | 27 | 28 | 29 |
    30 | 36 |
    37 | 38 |
    39 |
    40 |

    Vue组件事件

    41 | 42 |
    43 |

    #app-1：双向数据绑定实现的本质也是通过事件

    44 |
    45 |

    之前我们使用过“v-model”来实现过数据的双向绑定，向这样的代码：

    46 |

    {{ normal }}

    47 |

    但实际上它是以下代码的“语法糖”：

    48 |

    {{ actually }}

    49 |
    50 | 51 | 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。[by：维基百科] 52 |
    53 | 54 |
    55 |

    #app-2：自定义事件的触发器

    56 | 57 | + 58 | 59 | = 60 | {{res}} 61 | 62 | 示例中视图上的“add-self”为事件的监听器($on)，而组件的methods对象内事件的“emit”为事件的触发器（$emit）。 63 |

    对于组件“button-calc-add”来讲，它并不知道父组件会做什么事情，它只报告内部发生的事件，只是通过emit触发了事件（也可以叫做发送）让父组件环境对应的监听器“add-self”知晓，而“add-self”这个监听器也会去做自己该做的事情。

    64 |

    该示例看似功能简单，但却体现了组件、数据模型、视图、视图模型之间的复杂关系，读懂该例子对于理解组件间的通讯很有帮助。

    65 |     66 |
    67 | 68 |
    69 |

    #app-3：组件内的事件对象

    70 | 71 | 72 | Vue的事件不同于原生JS事件的地方在于：“事件对象”不是事件函数参数括号自带的变量值，而是必须要手动声明的，而且声明的名称必须是“$event”这个对象值。当然除了像示例中组件定义tamplate内部HTML的“componentEvent($event)”事件这样直接传入该事件对象直接，也可以传入该对象的某个属性，如“eventName($event.keyCode)、eventName($event.target.tagName)”等 73 |
    74 | 75 |
    76 |

    #app-4：事件修饰符

    77 | 78 | 79 | 除了示例中出现的“prevent”修饰符以外，Vue还提供了以下事件修饰符： 80 |
      81 |
    • stop：阻止单击事件传播，即阻止冒泡
      • 82 |
    • capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在当前元素处理，然后才交由内部元素进行处理
      • 83 |
    • self：事件只在当前元素触发，并不会向下传播
      • 84 |
    • once：点击事件将只会触发一次
      • 85 |
    86 |

    事件修饰符可以采用链式的写法，像这样：

    87 |

    <!-- 同时阻止冒泡和默认事件 --> 88 | <a v-on:click.stop.prevent="doThat"></a>

    89 |     90 |
    91 | 92 |
    93 |
    94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /进阶使用示例/plugin/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/plugin/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /进阶使用示例/plugin/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/plugin/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /进阶使用示例/plugin/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/plugin/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /进阶使用示例/plugin/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/进阶使用示例/plugin/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /高级使用示例/library-manager/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/README.md: -------------------------------------------------------------------------------- 1 | # library-manager 2 | 3 | > 图书库查询 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/library-manager/build/logo.png -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve(dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | 'bootcss': 'bootstrap/dist/css/bootstrap.css' 40 | } 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | new webpack.ProvidePlugin({ 54 | axios: 'axios' 55 | }) 56 | ] 57 | }) 58 | 59 | module.exports = new Promise((resolve, reject) => { 60 | portfinder.basePort = process.env.PORT || config.dev.port 61 | portfinder.getPort((err, port) => { 62 | if (err) { 63 | reject(err) 64 | } else { 65 | // publish the new Port, necessary for e2e tests 66 | process.env.PORT = port 67 | // add port to devServer config 68 | devWebpackConfig.devServer.port = port 69 | 70 | // Add FriendlyErrorsPlugin 71 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 72 | compilationSuccessInfo: { 73 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 74 | }, 75 | onErrors: config.dev.notifyOnErrors 76 | ? utils.createNotifierCallback() 77 | : undefined 78 | })) 79 | 80 | resolve(devWebpackConfig) 81 | } 82 | }) 83 | }) 84 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.5 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false, 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: '/', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: true, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 图书管理 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "library-manager", 3 | "version": "1.0.0", 4 | "description": "图书库查询", 5 | "author": "aulence", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.17.1", 14 | "bootstrap": "^3.3.7", 15 | "vue": "^2.5.2", 16 | "vue-router": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^7.1.2", 20 | "babel-core": "^6.22.1", 21 | "babel-loader": "^7.1.1", 22 | "babel-plugin-transform-runtime": "^6.22.0", 23 | "babel-preset-env": "^1.3.2", 24 | "babel-preset-stage-2": "^6.22.0", 25 | "chalk": "^2.0.1", 26 | "copy-webpack-plugin": "^4.0.1", 27 | "css-loader": "^0.28.0", 28 | "eventsource-polyfill": "^0.9.6", 29 | "extract-text-webpack-plugin": "^3.0.0", 30 | "file-loader": "^1.1.4", 31 | "friendly-errors-webpack-plugin": "^1.6.1", 32 | "html-webpack-plugin": "^2.30.1", 33 | "less": "^2.7.3", 34 | "less-loader": "^4.0.5", 35 | "node-notifier": "^5.1.2", 36 | "optimize-css-assets-webpack-plugin": "^3.2.0", 37 | "ora": "^1.2.0", 38 | "portfinder": "^1.0.13", 39 | "postcss-import": "^11.0.0", 40 | "postcss-loader": "^2.0.8", 41 | "rimraf": "^2.6.0", 42 | "semver": "^5.3.0", 43 | "shelljs": "^0.7.6", 44 | "uglifyjs-webpack-plugin": "^1.1.1", 45 | "url-loader": "^0.5.8", 46 | "vue-loader": "^13.3.0", 47 | "vue-style-loader": "^3.0.1", 48 | "vue-template-compiler": "^2.5.2", 49 | "webpack": "^3.6.0", 50 | "webpack-bundle-analyzer": "^2.9.0", 51 | "webpack-dev-server": "^2.9.1", 52 | "webpack-merge": "^4.1.0" 53 | }, 54 | "engines": { 55 | "node": ">= 4.0.0", 56 | "npm": ">= 3.0.0" 57 | }, 58 | "browserslist": [ 59 | "> 1%", 60 | "last 2 versions", 61 | "not ie <= 8" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/library-manager/src/assets/logo.png -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/components/BookInfoList.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 51 | 52 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/components/HeaderBlock.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/components/MainContainer.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/components/SearchTools.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 28 | 29 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import BootstrapCSS from 'bootcss' 7 | 8 | Vue.config.productionTip = false 9 | 10 | /* eslint-disable no-new */ 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | template: '', 15 | components: { App } 16 | }) 17 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import MainContainer from '@/components/MainContainer' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | mode: 'history', 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'main', 13 | component: MainContainer 14 | } 15 | ] 16 | }) 17 | -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/styles/book-info-list.less: -------------------------------------------------------------------------------- 1 | @theme-color: rgb(100, 90, 82); 2 | /* 搜索没有匹配时显示的文本容器 */ 3 | .noMatching { 4 | text-align: center; 5 | color: lighten(@theme-color, 30%); 6 | } 7 | // 图书列表表格 8 | table { 9 | // 亮度控制 10 | @lightness-ctrl: 30%; 11 | // 表格主体背景 12 | background-color: lighten(@theme-color,@lightness-ctrl); 13 | // 表格颜色 14 | color: darken(@theme-color,20%); 15 | // 表格字体 16 | font-size: 0.9rem; 17 | // 重设bootstrap样式 18 | &.table { 19 | // 表头设置 20 | thead { 21 | tr { 22 | th { 23 | background-color: lighten(@theme-color,@lightness-ctrl * 0.5); 24 | font-size: 0.8rem; 25 | border-bottom: 1px solid lighten(@theme-color, 40%); 26 | } 27 | } 28 | } 29 | tbody { 30 | tr { 31 | td { 32 | border-bottom: 1px solid lighten(@theme-color, 40%); 33 | } 34 | } 35 | } 36 | } 37 | /* 隔行变色 */ 38 | tr:nth-child(even) { 39 | background-color: lighten(@theme-color,@lightness-ctrl * 0.8); 40 | .describe { 41 | & > div { 42 | &:after { 43 | background-image: repeating-linear-gradient(90deg, transparent 0, lighten(@theme-color,@lightness-ctrl * 0.8) 60%, lighten(@theme-color,@lightness-ctrl * 0.8) 100%); 44 | } 45 | } 46 | } 47 | } 48 | /* 被选中时表格行的样式 */ 49 | .checked-style { 50 | background-color: lighten(@theme-color, 35%); 51 | color: lighten(@theme-color, 60%); 52 | .describe { 53 | & > div { 54 | &:after { 55 | background-image: repeating-linear-gradient(90deg, transparent 0, lighten(@theme-color,35%) 60%, lighten(@theme-color,35%) 100%); 56 | } 57 | } 58 | } 59 | } 60 | .checkboxTd { 61 | width: 46px; 62 | text-align: center; 63 | input[type="checkbox"] { 64 | width: 20px; height: 20px; 65 | cursor: pointer; 66 | } 67 | } 68 | .bookName { 69 | width: 260px; 70 | } 71 | .describe { 72 | & > div { 73 | width: 540px; height: 76px; 74 | padding-right: 20px; 75 | overflow: hidden; 76 | position: relative; 77 | &:after { 78 | content: ""; 79 | width: 156px; 80 | height: 22px; 81 | padding-left: 4px; 82 | background-image: repeating-linear-gradient(90deg, transparent 0, lighten(@theme-color,@lightness-ctrl) 60%, lighten(@theme-color,@lightness-ctrl) 100%); 83 | position: absolute; 84 | right: 20px; 85 | bottom: 4px; 86 | } 87 | } 88 | } 89 | } -------------------------------------------------------------------------------- /高级使用示例/library-manager/src/styles/common.less: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* 样式初始化部分 */ 4 | * { 5 | box-sizing: border-box; 6 | } 7 | html,body { 8 | min-height: 100%; 9 | background-color: rgb(100, 90, 82); 10 | font: 20px 'Avenir', Helvetica, "Microsoft YaHei", Arial, sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | color: #f9f3e8; 14 | margin: 0; padding: 0; 15 | } 16 | body { 17 | overflow-y: scroll; 18 | } 19 | input, select, textarea, button { 20 | border: 1px solid #aaa; 21 | outline: none; 22 | } 23 | #app { 24 | padding-bottom: 50px; 25 | } 26 | ::-webkit-scrollbar { 27 | width: 10px; 28 | } 29 | ::-webkit-scrollbar-track { 30 | width: 10px; 31 | background-image: linear-gradient(90deg, rgb(100, 90, 82), rgb(153, 144, 136)); 32 | } 33 | ::-webkit-scrollbar-thumb { 34 | width: 10px; 35 | background-image: linear-gradient(90deg, rgb(71, 56, 45), rgb(134, 120, 111), rgb(65, 50, 39)); 36 | border-radius: 5px; 37 | cursor: -webkit-grab; 38 | } 39 | ::-webkit-scrollbar-thumb:hover { 40 | background-image: linear-gradient(90deg, rgb(129, 114, 104), rgb(190, 174, 163), rgb(129, 115, 106)); 41 | } -------------------------------------------------------------------------------- /高级使用示例/library-manager/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/library-manager/static/.gitkeep -------------------------------------------------------------------------------- /高级使用示例/plugin/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/plugin/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /高级使用示例/plugin/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/plugin/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /高级使用示例/plugin/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/plugin/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /高级使用示例/plugin/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/plugin/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/README.md: -------------------------------------------------------------------------------- 1 | # router 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec(cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/router-animation-cli/build/logo.png -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | { 44 | test: /\.vue$/, 45 | loader: 'vue-loader', 46 | options: vueLoaderConfig 47 | }, 48 | { 49 | test: /\.js$/, 50 | loader: 'babel-loader', 51 | include: [resolve('src'), resolve('test')] 52 | }, 53 | { 54 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 | loader: 'url-loader', 56 | options: { 57 | limit: 10000, 58 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 | } 60 | }, 61 | { 62 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 63 | loader: 'url-loader', 64 | options: { 65 | limit: 10000, 66 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 71 | loader: 'url-loader', 72 | options: { 73 | limit: 10000, 74 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 75 | } 76 | } 77 | ] 78 | }, 79 | node: { 80 | // prevent webpack from injecting useless setImmediate polyfill because Vue 81 | // source contains it (although only uses it if it's native). 82 | setImmediate: false, 83 | // prevent webpack from injecting mocks to Node native modules 84 | // that does not make sense for the client 85 | dgram: 'empty', 86 | fs: 'empty', 87 | net: 'empty', 88 | tls: 'empty', 89 | child_process: 'empty' 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | ] 54 | }) 55 | 56 | module.exports = new Promise((resolve, reject) => { 57 | portfinder.basePort = process.env.PORT || config.dev.port 58 | portfinder.getPort((err, port) => { 59 | if (err) { 60 | reject(err) 61 | } else { 62 | // publish the new Port, necessary for e2e tests 63 | process.env.PORT = port 64 | // add port to devServer config 65 | devWebpackConfig.devServer.port = port 66 | 67 | // Add FriendlyErrorsPlugin 68 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 69 | compilationSuccessInfo: { 70 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 71 | }, 72 | onErrors: config.dev.notifyOnErrors 73 | ? utils.createNotifierCallback() 74 | : undefined 75 | })) 76 | 77 | resolve(devWebpackConfig) 78 | } 79 | }) 80 | }) 81 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.5 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false, 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: '/', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: true, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | router 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "router", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "aulence", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.2", 14 | "vue-router": "^3.0.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^7.1.2", 18 | "babel-core": "^6.22.1", 19 | "babel-loader": "^7.1.1", 20 | "babel-plugin-transform-runtime": "^6.22.0", 21 | "babel-preset-env": "^1.3.2", 22 | "babel-preset-stage-2": "^6.22.0", 23 | "chalk": "^2.0.1", 24 | "copy-webpack-plugin": "^4.0.1", 25 | "css-loader": "^0.28.0", 26 | "eventsource-polyfill": "^0.9.6", 27 | "extract-text-webpack-plugin": "^3.0.0", 28 | "file-loader": "^1.1.4", 29 | "friendly-errors-webpack-plugin": "^1.6.1", 30 | "html-webpack-plugin": "^2.30.1", 31 | "less": "^2.7.3", 32 | "less-loader": "^4.0.5", 33 | "node-notifier": "^5.1.2", 34 | "optimize-css-assets-webpack-plugin": "^3.2.0", 35 | "ora": "^1.2.0", 36 | "portfinder": "^1.0.13", 37 | "postcss-import": "^11.0.0", 38 | "postcss-loader": "^2.0.8", 39 | "rimraf": "^2.6.0", 40 | "semver": "^5.3.0", 41 | "shelljs": "^0.7.6", 42 | "uglifyjs-webpack-plugin": "^1.1.1", 43 | "url-loader": "^0.5.8", 44 | "vue-loader": "^13.3.0", 45 | "vue-style-loader": "^3.0.1", 46 | "vue-template-compiler": "^2.5.2", 47 | "webpack": "^3.6.0", 48 | "webpack-bundle-analyzer": "^3.6.0", 49 | "webpack-dev-server": "^2.9.1", 50 | "webpack-merge": "^4.1.0" 51 | }, 52 | "engines": { 53 | "node": ">= 4.0.0", 54 | "npm": ">= 3.0.0" 55 | }, 56 | "browserslist": [ 57 | "> 1%", 58 | "last 2 versions", 59 | "not ie <= 8" 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | 32 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/router-animation-cli/src/assets/logo.png -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/components/Cart.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/components/Category.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/components/Me.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | // 组件导入 4 | import Home from '@/components/Home'; 5 | import Category from '@/components/Category'; 6 | import Cart from '@/components/Cart'; 7 | import Me from '@/components/Me'; 8 | 9 | Vue.use(Router) 10 | 11 | export default new Router({ 12 | // 默认mode（模式）为hash，可选值history（路径仿真）、abstract（无状态路径） 13 | mode: 'history', 14 | routes: [ 15 | { 16 | path: '/', 17 | name: 'home', 18 | component: Home 19 | }, 20 | { 21 | path: '/Category/:id', 22 | name: 'category', 23 | component: Category 24 | }, 25 | { 26 | path: '/Cart/:id', 27 | name: 'cart', 28 | component: Cart 29 | }, 30 | { 31 | path: '/Me/:id', 32 | name: 'me', 33 | component: Me 34 | }, 35 | ], 36 | linkActiveClass: 'active' 37 | }) 38 | -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/src/styles/common.less: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | * { 3 | box-sizing: border-box; 4 | } 5 | html,body { 6 | margin: 0; 7 | font: 20px "Avenir", Helvetica, "微软雅黑", Arial,sans-serif; 8 | } 9 | #app { 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | color: #2c3e50; 13 | } 14 | nav { 15 | padding: 10px 0; 16 | ul { 17 | width: 960px; 18 | margin: 0 auto; 19 | padding: 0; 20 | list-style: none; 21 | overflow: hidden; 22 | li { 23 | @navColor: #1ccf7f; 24 | @height: 40px; 25 | height: @height; 26 | padding: 0 20px; 27 | border-radius: 5px; 28 | line-height: @height; 29 | float: left; 30 | cursor: pointer; 31 | &:hover { 32 | color: @navColor; 33 | } 34 | &.active { 35 | background-color: @navColor; 36 | color: #ffffff; 37 | } 38 | } 39 | } 40 | } 41 | main { 42 | width: 960px; 43 | margin: 0 auto; 44 | position: relative; 45 | &>div { 46 | width: 100%; 47 | position: absolute; 48 | &>h1 { 49 | margin: 0; 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /高级使用示例/router-animation-cli/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/router-animation-cli/static/.gitkeep -------------------------------------------------------------------------------- /高级使用示例/router-base/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * 功能：Vue路由基础 4 | * 日期：2017/6/29 5 | **/ 6 | 7 | body { 8 | font: 16px "微软雅黑",serif; 9 | } 10 | 11 | main { 12 | width: 960px; 13 | min-width: 300px; 14 | margin-left: auto; 15 | margin-right: auto; 16 | } 17 | .content div { 18 | padding: 20px 12px; 19 | } 20 | 21 | header nav a { 22 | padding: 8px 20px; 23 | display: inline-block; 24 | } 25 | @media (max-width: 1024px) { 26 | main { 27 | width: 96%; 28 | margin-left: auto; 29 | margin-right: auto; 30 | } 31 | } 32 | @media (max-width: 420px) { 33 | main { 34 | width: 90%; 35 | margin-left: auto; 36 | margin-right: auto; 37 | } 38 | } -------------------------------------------------------------------------------- /高级使用示例/router-base/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue路由基础 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |

    Vue的路由基本配置

    17 |
    18 | 27 |
    28 |
    29 | 30 | 31 | 32 |
    33 |
    34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /高级使用示例/router-base/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 功能：Vue路由基础 3 | * 日期：2017/6/29 4 | **/ 5 | 6 | // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) 7 | 8 | // 1. 定义（路由）组件。 9 | // 可以从其他文件 import 进来 10 | const Home = { 11 | template: '
    这是网站首页的内容
    ' 12 | }; 13 | const Product = { 14 | template: '
    这是产品介绍的内容
    ' 15 | }; 16 | const Service = { 17 | template: '
    这是服务支持的内容
    ' 18 | }; 19 | const About = { 20 | template: '
    这是关于我们的内容
    ' 21 | }; 22 | 23 | // 2. 定义路由 24 | // 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。 25 | const routes = [ 26 | { path: '/home', component: Home }, 27 | { path: '/product', component: Product }, 28 | { path: '/service', component: Service }, 29 | { path: '/about', component: About } 30 | ]; 31 | 32 | // 3. 创建 router 实例，然后传 `routes` 配置 33 | // 你还可以传别的配置参数, 不过先这么简单着吧。 34 | const router = new VueRouter({ 35 | routes // （缩写）相当于 routes: routes 36 | }); 37 | 38 | // 4. 创建和挂载根实例。 39 | // 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能 40 | const app = new Vue({ 41 | router 42 | }).$mount('#app'); -------------------------------------------------------------------------------- /高级使用示例/todos-cli/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/README.md: -------------------------------------------------------------------------------- 1 | # todos 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/todos-cli/build/logo.png -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | { 44 | test: /\.vue$/, 45 | loader: 'vue-loader', 46 | options: vueLoaderConfig 47 | }, 48 | { 49 | test: /\.js$/, 50 | loader: 'babel-loader', 51 | include: [resolve('src'), resolve('test')] 52 | }, 53 | { 54 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 | loader: 'url-loader', 56 | options: { 57 | limit: 10000, 58 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 | } 60 | }, 61 | { 62 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 63 | loader: 'url-loader', 64 | options: { 65 | limit: 10000, 66 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 71 | loader: 'url-loader', 72 | options: { 73 | limit: 10000, 74 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 75 | } 76 | } 77 | ] 78 | }, 79 | node: { 80 | // prevent webpack from injecting useless setImmediate polyfill because Vue 81 | // source contains it (although only uses it if it's native). 82 | setImmediate: false, 83 | // prevent webpack from injecting mocks to Node native modules 84 | // that does not make sense for the client 85 | dgram: 'empty', 86 | fs: 'empty', 87 | net: 'empty', 88 | tls: 'empty', 89 | child_process: 'empty' 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | ] 54 | }) 55 | 56 | module.exports = new Promise((resolve, reject) => { 57 | portfinder.basePort = process.env.PORT || config.dev.port 58 | portfinder.getPort((err, port) => { 59 | if (err) { 60 | reject(err) 61 | } else { 62 | // publish the new Port, necessary for e2e tests 63 | process.env.PORT = port 64 | // add port to devServer config 65 | devWebpackConfig.devServer.port = port 66 | 67 | // Add FriendlyErrorsPlugin 68 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 69 | compilationSuccessInfo: { 70 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 71 | }, 72 | onErrors: config.dev.notifyOnErrors 73 | ? utils.createNotifierCallback() 74 | : undefined 75 | })) 76 | 77 | resolve(devWebpackConfig) 78 | } 79 | }) 80 | }) 81 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.5 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | // CSS Sourcemaps off by default because relative paths are "buggy" 44 | // with this option, according to the CSS-Loader README 45 | // (https://github.com/webpack/css-loader#sourcemaps) 46 | // In our experience, they generally work as expected, 47 | // just be aware of this issue when enabling this option. 48 | cssSourceMap: false, 49 | }, 50 | 51 | build: { 52 | // Template for index.html 53 | index: path.resolve(__dirname, '../dist/index.html'), 54 | 55 | // Paths 56 | assetsRoot: path.resolve(__dirname, '../dist'), 57 | assetsSubDirectory: 'static', 58 | assetsPublicPath: '/', 59 | 60 | /** 61 | * Source Maps 62 | */ 63 | 64 | productionSourceMap: true, 65 | // https://webpack.js.org/configuration/devtool/#production 66 | devtool: '#source-map', 67 | 68 | // Gzip off by default as many popular static hosts such as 69 | // Surge or Netlify already gzip all static assets for you. 70 | // Before setting to `true`, make sure to: 71 | // npm install --save-dev compression-webpack-plugin 72 | productionGzip: false, 73 | productionGzipExtensions: ['js', 'css'], 74 | 75 | // Run the build command with an extra argument to 76 | // View the bundle analyzer report after build finishes: 77 | // `npm run build --report` 78 | // Set to `true` or `false` to always turn it on or off 79 | bundleAnalyzerReport: process.env.npm_config_report 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | todos 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todos", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "aulence", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.2" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer": "^7.1.2", 17 | "babel-core": "^6.22.1", 18 | "babel-loader": "^7.1.1", 19 | "babel-plugin-transform-runtime": "^6.22.0", 20 | "babel-preset-env": "^1.3.2", 21 | "babel-preset-stage-2": "^6.22.0", 22 | "chalk": "^2.0.1", 23 | "copy-webpack-plugin": "^4.0.1", 24 | "css-loader": "^0.28.0", 25 | "eventsource-polyfill": "^0.9.6", 26 | "extract-text-webpack-plugin": "^3.0.0", 27 | "file-loader": "^1.1.4", 28 | "friendly-errors-webpack-plugin": "^1.6.1", 29 | "html-webpack-plugin": "^2.30.1", 30 | "less": "^2.7.3", 31 | "less-loader": "^4.0.5", 32 | "node-notifier": "^5.1.2", 33 | "optimize-css-assets-webpack-plugin": "^3.2.0", 34 | "ora": "^1.2.0", 35 | "portfinder": "^1.0.13", 36 | "postcss-import": "^11.0.0", 37 | "postcss-loader": "^2.0.8", 38 | "rimraf": "^2.6.0", 39 | "semver": "^5.3.0", 40 | "shelljs": "^0.7.6", 41 | "uglifyjs-webpack-plugin": "^1.1.1", 42 | "url-loader": "^0.5.8", 43 | "vue-loader": "^13.3.0", 44 | "vue-style-loader": "^3.0.1", 45 | "vue-template-compiler": "^2.5.2", 46 | "webpack": "^3.6.0", 47 | "webpack-bundle-analyzer": "^3.6.0", 48 | "webpack-dev-server": "^2.9.1", 49 | "webpack-merge": "^4.1.0" 50 | }, 51 | "engines": { 52 | "node": ">= 4.0.0", 53 | "npm": ">= 3.0.0" 54 | }, 55 | "browserslist": [ 56 | "> 1%", 57 | "last 2 versions", 58 | "not ie <= 8" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/assets/icon-checkbox-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Svg Vector Icons : http://www.sfont.cn 6 | 7 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/assets/icon-checkbox-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Svg Vector Icons : http://www.sfont.cn 6 | 7 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/todos-cli/src/assets/logo.png -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/components/TodosList.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 27 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | template: '', 12 | components: { App } 13 | }) 14 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/scripts/todos.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "TodosList", 3 | data() { 4 | return { 5 | todo: "", 6 | todoList: [], 7 | prevContent: '' 8 | }; 9 | }, 10 | computed: { 11 | notContent: function() { 12 | if(this.todoList.length === 0) { 13 | return true; 14 | } else { 15 | return false; 16 | } 17 | }, 18 | noDone() { 19 | var counter = 0; 20 | for(let x in this.todoList) { 21 | if(!this.todoList[x].checked) { 22 | counter++; 23 | } 24 | } 25 | return counter; 26 | } 27 | }, 28 | methods: { 29 | createTodo() { 30 | const nowTime = new Date().toLocaleString(); 31 | const newTodo = { 32 | content: this.todo, 33 | checked: false, 34 | nowTime 35 | } 36 | this.todoList.push(newTodo); 37 | this.todo = ""; 38 | }, 39 | getPrevVal() { 40 | this.todo = this.prevContent; 41 | }, 42 | swithState(index) { 43 | this.todoList[index].checked = !this.todoList[index].checked; 44 | }, 45 | deleItem(index) { 46 | this.todoList.splice(index,1); 47 | } 48 | }, 49 | watch: { 50 | todo(nowVal, oldVal) { 51 | this.prevContent = oldVal; 52 | } 53 | } 54 | }; -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/styles/style.less: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义输入框mixin 4 | .setInput { 5 | padding: 8px; 6 | border: 1px solid #acacac; 7 | border-radius: 3px; 8 | font: 20px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; 9 | &:focus { 10 | box-shadow: 0 0 10px #2397fdb2; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /高级使用示例/todos-cli/src/styles/todo-list.less: -------------------------------------------------------------------------------- 1 | article { 2 | width: 640px; 3 | padding: 20px; 4 | margin: 0 auto; 5 | color: #333333; 6 | h1 { 7 | text-align: center; 8 | } 9 | } 10 | /* 待办事项输入 */ 11 | .todo-input { 12 | // 引用mixin 13 | .setInput; 14 | width: 100%; 15 | padding: 12px; 16 | } 17 | /* 待办事项列表 */ 18 | .todo-list { 19 | @border-color: #acacac; 20 | padding: 0; 21 | border: 1px solid @border-color; 22 | border-radius: 5px; 23 | list-style: none; 24 | .noContent { 25 | text-align: center; 26 | text-indent: -28px; 27 | color: #888888; 28 | } 29 | li { 30 | @height: 56px; 31 | height: @height; 32 | line-height: @height; 33 | padding-left: 56px; 34 | border-bottom: 1px solid @border-color; 35 | position: relative; 36 | &:last-child { 37 | border-bottom: none; 38 | } 39 | i.icon { 40 | width: 20px; height: 20px; 41 | position: absolute; 42 | left: 18px; top: 50%; 43 | transform: translate(0,-50%); 44 | cursor: pointer; 45 | &.icon-checkbox-no { 46 | background: url(../assets/icon-checkbox-no.svg); 47 | } 48 | &.icon-checkbox-yes { 49 | background: url(../assets/icon-checkbox-yes.svg); 50 | } 51 | } 52 | .complete { 53 | text-decoration: line-through; 54 | color: #999999; 55 | } 56 | span { 57 | display: inline-block; 58 | &.content { 59 | width: ~"calc(100% - 190px)"; 60 | text-overflow: ellipsis; 61 | overflow: hidden; 62 | white-space: nowrap; 63 | } 64 | &.setTime, &.deleItem { 65 | position: absolute; 66 | } 67 | &.setTime { 68 | width: 178px; 69 | right: 12px; 70 | text-align: right; 71 | font-size: 0.8rem; 72 | color: #888888; 73 | } 74 | &.deleItem { 75 | width: 32px; 76 | right: -32px; 77 | text-align: center; 78 | font-size: 32px; 79 | cursor: pointer; 80 | color: #999999; 81 | display: none; 82 | &:hover { 83 | color: #e45454; 84 | } 85 | } 86 | } 87 | &:hover > .deleItem { 88 | display: inline-block; 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /高级使用示例/todos-cli/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/todos-cli/static/.gitkeep -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"] 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/README.md: -------------------------------------------------------------------------------- 1 | # use-store 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/use-plugin-cli/build/logo.png -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | 'bootstrap-css': 'bootstrap/dist/css/bootstrap.css' 40 | } 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | new webpack.ProvidePlugin({ 54 | $: 'jquery', 55 | jQuery: 'jquery', 56 | axios: 'axios' 57 | }) 58 | ] 59 | }) 60 | 61 | module.exports = new Promise((resolve, reject) => { 62 | portfinder.basePort = process.env.PORT || config.dev.port 63 | portfinder.getPort((err, port) => { 64 | if (err) { 65 | reject(err) 66 | } else { 67 | // publish the new Port, necessary for e2e tests 68 | process.env.PORT = port 69 | // add port to devServer config 70 | devWebpackConfig.devServer.port = port 71 | 72 | // Add FriendlyErrorsPlugin 73 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 74 | compilationSuccessInfo: { 75 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 76 | }, 77 | onErrors: config.dev.notifyOnErrors 78 | ? utils.createNotifierCallback() 79 | : undefined 80 | })) 81 | 82 | resolve(devWebpackConfig) 83 | } 84 | }) 85 | }) 86 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.5 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | '/api': { 15 | target: 'http://10.0.0.13:8764', // 接口的域名 16 | // secure: false, // 如果是https接口，需要配置这个参数 17 | changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 18 | pathRewrite: { 19 | '^/api': '' 20 | } 21 | } 22 | }, 23 | 24 | // Various Dev Server settings 25 | host: 'localhost', // can be overwritten by process.env.HOST 26 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 27 | autoOpenBrowser: false, 28 | errorOverlay: true, 29 | notifyOnErrors: true, 30 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 31 | 32 | // Use Eslint Loader? 33 | // If true, your code will be linted during bundling and 34 | // linting errors and warnings will be shown in the console. 35 | useEslint: true, 36 | // If true, eslint errors and warnings will also be shown in the error overlay 37 | // in the browser. 38 | showEslintErrorsInOverlay: false, 39 | 40 | /** 41 | * Source Maps 42 | */ 43 | 44 | // https://webpack.js.org/configuration/devtool/#development 45 | devtool: 'eval-source-map', 46 | 47 | // If you have problems debugging vue-files in devtools, 48 | // set this to false - it *may* help 49 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 50 | cacheBusting: true, 51 | 52 | // CSS Sourcemaps off by default because relative paths are "buggy" 53 | // with this option, according to the CSS-Loader README 54 | // (https://github.com/webpack/css-loader#sourcemaps) 55 | // In our experience, they generally work as expected, 56 | // just be aware of this issue when enabling this option. 57 | cssSourceMap: false, 58 | }, 59 | 60 | build: { 61 | // Template for index.html 62 | index: path.resolve(__dirname, '../dist/index.html'), 63 | 64 | // Paths 65 | assetsRoot: path.resolve(__dirname, '../dist'), 66 | assetsSubDirectory: 'static', 67 | assetsPublicPath: '/', 68 | 69 | /** 70 | * Source Maps 71 | */ 72 | 73 | productionSourceMap: true, 74 | // https://webpack.js.org/configuration/devtool/#production 75 | devtool: '#source-map', 76 | 77 | // Gzip off by default as many popular static hosts such as 78 | // Surge or Netlify already gzip all static assets for you. 79 | // Before setting to `true`, make sure to: 80 | // npm install --save-dev compression-webpack-plugin 81 | productionGzip: false, 82 | productionGzipExtensions: ['js', 'css'], 83 | 84 | // Run the build command with an extra argument to 85 | // View the bundle analyzer report after build finishes: 86 | // `npm run build --report` 87 | // Set to `true` or `false` to always turn it on or off 88 | bundleAnalyzerReport: process.env.npm_config_report 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 使用第三方库或者插件 7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "use-store", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "aulence", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.21.1", 14 | "bootstrap": "^3.3.7", 15 | "echarts": "^3.8.5", 16 | "jquery": "^3.5.0", 17 | "vue": "^2.5.2", 18 | "vue-router": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^7.1.2", 22 | "babel-core": "^6.22.1", 23 | "babel-loader": "^7.1.1", 24 | "babel-plugin-transform-runtime": "^6.22.0", 25 | "babel-preset-env": "^1.3.2", 26 | "babel-preset-stage-2": "^6.22.0", 27 | "chalk": "^2.0.1", 28 | "copy-webpack-plugin": "^4.0.1", 29 | "css-loader": "^0.28.0", 30 | "eventsource-polyfill": "^0.9.6", 31 | "extract-text-webpack-plugin": "^3.0.0", 32 | "file-loader": "^1.1.4", 33 | "friendly-errors-webpack-plugin": "^1.6.1", 34 | "html-webpack-plugin": "^2.30.1", 35 | "less": "^2.7.3", 36 | "less-loader": "^4.0.5", 37 | "node-notifier": "^8.0.1", 38 | "optimize-css-assets-webpack-plugin": "^3.2.0", 39 | "ora": "^1.2.0", 40 | "portfinder": "^1.0.13", 41 | "postcss-import": "^11.0.0", 42 | "postcss-loader": "^2.0.8", 43 | "rimraf": "^2.6.0", 44 | "semver": "^5.3.0", 45 | "shelljs": "^0.8.5", 46 | "uglifyjs-webpack-plugin": "^1.1.1", 47 | "url-loader": "^0.5.8", 48 | "vue-loader": "^13.3.0", 49 | "vue-style-loader": "^3.0.1", 50 | "vue-template-compiler": "^2.5.2", 51 | "webpack": "^3.6.0", 52 | "webpack-bundle-analyzer": "^2.9.0", 53 | "webpack-dev-server": "^2.9.1", 54 | "webpack-merge": "^4.1.0" 55 | }, 56 | "engines": { 57 | "node": ">= 4.0.0", 58 | "npm": ">= 3.0.0" 59 | }, 60 | "browserslist": [ 61 | "> 1%", 62 | "last 2 versions", 63 | "not ie <= 8" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/use-plugin-cli/src/assets/logo.png -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/components/Axios.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 39 | 40 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/components/Boot.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | 25 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/components/Echarts.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/components/Jquery.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | // Vue.js核心文件导入 4 | import Vue from 'vue' 5 | // App.vue组件导入 6 | import App from './App' 7 | // 路由配置文件导入 8 | import router from './router' 9 | import 'bootstrap-css' 10 | // DOM操作文件导入 11 | import domCtrl from './scripts/dom-ctrl' 12 | 13 | Vue.config.productionTip = false 14 | 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: '#app', 18 | router, 19 | template: '', 20 | components: { App } 21 | }) 22 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Boot from '@/components/Boot' 4 | import Jquery from '@/components/Jquery' 5 | import Echarts from '@/components/Echarts' 6 | import Axios from '@/components/Axios' 7 | 8 | Vue.use(Router) 9 | 10 | export default new Router({ 11 | mode: 'history', 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'boot', 16 | component: Boot 17 | }, 18 | { 19 | path: '/jquery', 20 | name: 'jquery', 21 | component: Jquery 22 | }, 23 | { 24 | path: '/echarts', 25 | name: 'echarts', 26 | component: Echarts 27 | }, 28 | { 29 | path: '/axios', 30 | name: 'axios', 31 | component: Axios 32 | } 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/scripts/dom-ctrl.js: -------------------------------------------------------------------------------- 1 | import { setTimeout } from "timers"; 2 | 3 | $(function() { 4 | var nav = new Nav(); 5 | nav.ctrl(); 6 | }); 7 | 8 | function Nav() { 9 | this.ctrl = function() { 10 | const $navBtn = $('.navbar li') 11 | $navBtn.on('click', function() { 12 | setTimeout(() => { 13 | $(this).addClass('active').siblings('.active').removeClass('active'); 14 | }); 15 | }); 16 | // 触发点击首个导航按钮 17 | $navBtn.first().trigger('click'); 18 | } 19 | } -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/src/scripts/set-charts.js: -------------------------------------------------------------------------------- 1 | // 引入 ECharts 主模块 2 | var echarts = require('echarts/lib/echarts'); 3 | // 引入柱状图 4 | require('echarts/lib/chart/bar'); 5 | // 引入提示框和标题组件 6 | require('echarts/lib/component/tooltip'); 7 | require('echarts/lib/component/title'); 8 | // 请求echarts的古典主题 9 | require('echarts/theme/vintage') 10 | 11 | export default { 12 | name: 'Echarts', 13 | data() { 14 | return { 15 | myChart: null 16 | } 17 | }, 18 | created() { 19 | 20 | }, 21 | methods: { 22 | drawBarCharts() { 23 | // 基于准备好的dom，初始化echarts实例 24 | var myChart = echarts.init(this.$refs.barCharts, 'vintage'); 25 | 26 | // 使用刚指定的配置项和数据显示图表。 27 | myChart.setOption({ 28 | title: { 29 | text: 'ECharts在Vue中的使用--柱状图', 30 | left: 10, 31 | top: 10 32 | }, 33 | tooltip: {}, 34 | legend: { 35 | data: ['产量','销量'], 36 | right: 10, 37 | top: 'center', 38 | textStyle: { 39 | fontSize: 16 40 | }, 41 | orient: 'vertical' 42 | }, 43 | xAxis: { 44 | data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], 45 | axisLabel: { 46 | fontSize: 20, 47 | rotate: 45, 48 | margin: 20, 49 | color: '#fdbc6b' 50 | } 51 | }, 52 | yAxis: { 53 | axisLabel: { 54 | fontSize: 30, 55 | rotate: 45, 56 | margin: 20, 57 | color: '#fdbc6b' 58 | } 59 | }, 60 | grid: { 61 | right: 100, 62 | bottom: 80 63 | }, 64 | series: [ 65 | { 66 | name: '产量', 67 | type: 'bar', 68 | data: [5, 20, 36, 10, 10, 20] 69 | }, 70 | { 71 | name: '销量', 72 | type: 'bar', 73 | data: [5, 20, 36, 10, 10, 20] 74 | } 75 | ] 76 | }); 77 | window.onresize = function() { 78 | myChart.resize(); 79 | } 80 | this.myChart = myChart; 81 | } 82 | }, 83 | mounted() { 84 | this.drawBarCharts(); 85 | } 86 | } -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aulence/vue/cd71efa41ee5a4bb3c8eaa941bead9bc1fc8c02d/高级使用示例/use-plugin-cli/static/.gitkeep -------------------------------------------------------------------------------- /高级使用示例/use-plugin-cli/static/role-info.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "霸王震", 4 | "level": 100 5 | }, 6 | { 7 | "name": "狂傲震", 8 | "level": 99 9 | }, 10 | { 11 | "name": "牛逼震", 12 | "level": 97 13 | } 14 | ] --------------------------------------------------------------------------------