├── Vue课堂笔记 ├── 01Vue课堂笔记.md ├── 02第一个vue程序.md ├── 03基础语法指令.md ├── 04表单双绑、组件.assets │ ├── 1595250631979.png │ ├── 1595250659145.png │ └── 1595251605760.png ├── 04表单双绑、组件.md ├── 05Axios异步通信.assets │ └── 1595253373596.png ├── 05Axios异步通信.md ├── 06计算属性、内容分发、自定义事件.assets │ ├── 1595295779847.png │ └── 自定义事件.png ├── 06计算属性、内容分发、自定义事件.md ├── 07第一个vue-cli项目.md ├── 08webpack使用.assets │ └── 1595309916482.png ├── 08webpack使用.md ├── 09vue-router路由.md ├── 10实战快速上手.assets │ ├── 1595331174087.png │ ├── 1595331325382.png │ ├── 1595332641414.png │ ├── 1595333969422.png │ ├── 1595337979139.png │ ├── 1595338033562.png │ └── 1595383163158.png ├── 10实战快速上手.md ├── Vue课堂笔记.assets │ ├── 1595237093142.png │ ├── 1595237159379.png │ ├── 1595237421062.png │ ├── 1595237457081.png │ ├── 1595237632332.png │ └── 1595237863311.png ├── 第一个vue-cli项目.assets │ ├── 1595303253098.png │ ├── 1595303458111.png │ ├── 1595303623009.png │ ├── 1595303835677.png │ ├── 1595303888573.png │ ├── 1595304238421.png │ ├── 1595304400777.png │ └── 1595305147701.png └── 第一个vue程序.assets │ └── 1595238643753.png └── vue ├── hello-vue ├── .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-lock.json ├── package.json ├── src │ ├── App.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── Login.vue │ │ ├── Main.vue │ │ ├── NotFound.vue │ │ └── user │ │ ├── List.vue │ │ └── proFile.vue └── static │ ├── .gitkeep │ └── mock │ └── data.json ├── myvue ├── .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-lock.json ├── package.json ├── src │ ├── App.vue │ ├── components │ │ ├── Content.vue │ │ └── Main.vue │ ├── main.js │ └── router │ │ └── index.js └── static │ └── .gitkeep ├── vue-first ├── .idea │ ├── inspectionProfiles │ │ └── Project_Default.xml │ ├── misc.xml │ ├── modules.xml │ ├── vue-first.iml │ └── workspace.xml ├── chapter-01 │ ├── demo1.html │ ├── demo2.html │ ├── demo3.html │ ├── demo4.html │ ├── demo5.html │ ├── demo6.html │ ├── demo7.html │ ├── demo8.html │ └── demo9.html └── data.json └── webpack-study ├── .idea ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml ├── modules.xml ├── webpack-study.iml └── workspace.xml ├── index.html ├── js └── bundle.js ├── modules ├── hello.js └── main.js └── webpack.config.js /Vue课堂笔记/01Vue课堂笔记.md: -------------------------------------------------------------------------------- 1 | # 1、概述 2 | 3 | - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的**渐进式JavaScript框架**，发布于2014年2月。 4 | - 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 5 | - **Vue 的核心库只关注视图层**，方便与第三方库（如：`vue-router:跳转`，`vue-resource:通信`，`vuex:管理`)或既有项目整合。 6 | - 官网：[https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/) 7 | 8 | # 2、前端知识体系 9 | 10 | 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 11 | 12 | ## 2.1、前端三要素 13 | 14 | - HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 15 | - CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 16 | - JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为 17 | 18 | ## 2.2、结构层（HTML） 19 | 20 | ## 2.3、表现层（CSS） 21 | 22 | CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下： 23 | 24 | - 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 25 | - 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护； 26 | - 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为**【CSS预处理器】**的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。 27 | 28 | **什么是CSS预处理器** 29 | 30 | CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“**用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”**。 31 | 32 | 常用的CSS预处理器有哪些 33 | 34 | - SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。 35 | - LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。 36 | 37 | ## 2.4、行为层（JavaScript） 38 | 39 | - JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。 40 | **Native 原生JS开发** 41 | 原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。截至到当前，ES标准以发布如下版本： 42 | 43 | - ES3 44 | - ES4（内部，未正式发布） 45 | - ES5（全浏览器支持） 46 | - ES6（常用，当前主流版本：webpack打包成为ES5支持） 47 | - ES7 48 | - ES8 49 | - ES9（草案阶段） 50 | 51 | 区别就是逐步增加新特性。 52 | 53 | 54 | 55 | **TypeScript 微软的标准** 56 | 57 | - TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集， 而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父； .NET创立者) 主导。 58 | 59 | - 该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法， 需要编译后(编译成JS) 才能被浏览器正确执行。 60 | 61 | ### JavaScript框架 62 | 63 | - JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8； 64 | - Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了**模块化开发**的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6） 65 | - React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言； 66 | - Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点； 67 | - Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能； 68 | 69 | ### UI框架 70 | 71 | - Ant-Design：阿里巴巴出品，基于React的UI框架 72 | - ElementUI、iview、ice：饿了么出品，基于Vue的UI框架 73 | - BootStrap：Teitter推出的一个用于前端开发的开源工具包 74 | - AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架 75 | 76 | ### JavaScript构建工具 77 | 78 | - Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript 79 | - WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载 80 | 81 | ## 2.5、三端同一 82 | 83 | ### 混合开发（Hybrid App） 84 | 85 | 主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种： 86 | 87 | - 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud 88 | - 本地打包： Cordova（前身是 PhoneGap） 89 | 90 | ### 微信小程序 91 | 92 | 详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI 93 | 94 | ## 2.6、后端技术 95 | 96 | 前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node JS这样的技术。 97 | 98 | Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)开始开发全新架构的De no 99 | 100 | 既然是后台技术，那肯定也需要框架和项目管理工具， Node JS框架及项目管理工具如下： 101 | 102 | - Express：Node JS框架 103 | - Koa：Express简化版 104 | - NPM：项目综合管理工具，类似于Maven 105 | - YARN：NPM的替代方案，类似于Maven和Gradle的关系 106 | 107 | ## 2.7、主流前端框架 108 | 109 | ### Vue.js 110 | 111 | ### **iView** 112 | 113 | iview是一个强大的基于Vue的UI库， 有很多实用的基础组件比element ui的组件更丰富， 主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm+webpack+babel开发， 支持ES 2015高质量、功能丰富友好的API， 自由灵活地使用空间。 114 | 115 | - [官网地址](https://iviewui.com/) 116 | - [Github](https://github.com/iview/iview) 117 | - [iview-admin](https://www.worldlink.com.cn/en/osdir/iview-admin.html) 118 | 119 | **备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多** 120 | 121 | ### Element UI 122 | 123 | Element是饿了么前端开源维护的Vue UI组件库， 组件齐全， 基本涵盖后台所需的所有组件，文档讲解详细， 例子也很丰富。主要用于开发PC端的页面， 是一个质量比较高的Vue UI组件库。 124 | 125 | - [官网地址](https://element.eleme.io/) 126 | - [Github](https://github.com/ElemeFE/element) 127 | - [vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/) 128 | 129 | **备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多** 130 | 131 | ### ICE 132 | 133 | 飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案， 在阿里巴巴内部， 已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。 134 | 135 | - [官网地址](https://ice.work/) 136 | 137 | - [Github](https://github.com/alibaba/ice) 138 | 139 | **备注：主要组件还是以React为主， 截止2019年02月17日更新博客前对Vue的支持还不太完善，目前尚处于观望阶段** 140 | 141 | ### VantUI 142 | 143 | Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库， 提供了-整套UI基础组件和业务组件。通过Vant， 可以快速搭建出风格统一的页面，提升开发效率。 144 | 145 | - [官网地址](https://youzan.github.io/vant-weapp/#/intro) 146 | - [Github](https://github.com/youzan/vant) 147 | 148 | ### AtUI 149 | 150 | at-ui是一款基于Vue 2.x的前端UI组件库， 主要用于快速开发PC网站产品。它提供了一套n pm+web pack+babel前端开发工作流程， CSS样式独立， 即使采用不同的框架实现都能保持统一的UI风格。 151 | 152 | - [官网地址]([https://at.aotu.io](https://at.aotu.io/)) 153 | - [Github](https://github.com/aliqin/atui) 154 | 155 | ### Cube Ul 156 | 157 | cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库。支持按需引入和后编译， 轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。 158 | 159 | - [官网地址](http://www.cubeent.co.kr/) 160 | - [Github](https://github.com/square/cube) 161 | 162 | ### 混合开发 163 | 164 | #### Flutter 165 | 166 | Flutter是谷歌的移动端UI框架， 可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作， 它被世界各地的开发者和组织使用， 并且Flutter是免费和开源的。 167 | 168 | - [官网地址](https://flutterchina.club/) 169 | - [Github](https://github.com/flutter/flutter) 170 | 171 | **备注：Google出品， 主要特点是快速构建原生APP应用程序， 如做混合应用该框架为必选框架** 172 | 173 | #### lonic 174 | 175 | lonic既是一个CSS框架也是一个Javascript UI库， lonic是目前最有潜力的一款HTML 5手机应用开发框架。通过SASS构建应用程序， 它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MV VM框架和Angular JS/Vue来增强应用。提供数据的双向绑定， 使用它成为Web和移动开发者的共同选择。 176 | 177 | - [官网地址](https://ionicframework.com/) 178 | - [官网文档](http://www.ionic.wang/js_doc-index.html) 179 | - [Github](https://github.com/tonib/kaichronicles) 180 | 181 | ### 微信小程序 182 | 183 | #### mpvue 184 | 185 | mpvue是美团开发的一个使用`Vue.js`开发小程序的前端框架， 目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于`Vue.js`， 修改了的运行时框架`runtime`和代码编译器`compiler`实现， 使其可运行在小程序环境中， 从而为小程序开发引入了`Vue.js`开发体验。 186 | 187 | - [官网地址](http://mpvue.com/) 188 | - [Git hub](https://github.com/Meituan-Dianping/mpvue) 189 | 190 | **备注：完备的Vue开发体验， 井且支持多平台的小程序开发， 推荐使用** 191 | 192 | #### WeUI 193 | 194 | WeUI是一套同微信原生视觉体验一致的基础样式库， 由微信官方设计团队为微信内网页和微信小程序量身设计， 令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 195 | 196 | - [官网地址](https://weui.io/) 197 | - [Github](https://github.com/Tencent/weui) 198 | 199 | # 3、了解前后分离的演变史 200 | 201 | 为什么需要前后分离 202 | 203 | ## 3.1、后端为主的MVC时代 204 | 205 | 为了降低开发的复杂度， 以后端为出发点， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC时代； 206 | 以`SpringMVC`流程为例： 207 | 208 | ![1595237159379](Vue课堂笔记.assets/1595237159379.png) 209 | 210 | - 发起请求到前端控制器(`Dispatcher Servlet`) 211 | - 前端控制器请求`HandlerMapping`查找`Handler`，可以根据`xml`配置、注解进行查找 212 | - 处理器映射器`HandlerMapping`向前端控制器返回`Handler` 213 | - 前端控制器调用处理器适配器去执行`Handler` 214 | - 处理器适配器去执行`Handler` 215 | - `Handler`执行完成给适配器返回`ModelAndView` 216 | - 处理器适配器向前端控制器返回`ModelAndView`，`ModelAndView`是`SpringMvc`框架的一个底层对象，包括`Model`和`View` 217 | - 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(`JSP`) 218 | - 视图解析器向前端控制器返回`View` 219 | - 前端控制器进行视图渲染，视图渲染将模型数据(在`ModelAndView`对象中)填充到`request`域 220 | - 前端控制器向用户响应结果 221 | 222 | **优点** 223 | 224 | - MVC是一个非常好的协作模式， 能够有效降低代码的耦合度从架构上能够让开发者明白代码应该写在哪里。为了让View更纯粹， 还可以使用Thyme leaf、Frree marker等模板引擎， 使模板里无法写入Java代码， 让前后端分工更加清晰。 225 | 226 | **缺点** 227 | 228 | - 前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式： 229 | - 第一种是前端写DEMO， 写好后， 让后端去套模板。好处是DEMO可以本地开发， 很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大； 230 | - 另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。好处是UI相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。 231 | - 前后端职责纠缠不清：模板引擎功能强大，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码，还有一个很大的灰色地带是`Controller`， 页面路由等功能本应该是前端最关注的， 但却是由后端来实现。`Controller`本身与`Model`往往也会纠缠不清，看了让人咬牙的业务代码经常会出现在`Controller`层。这些问题不能全归结于程序员的素养， 否则JSP就够了。 232 | - 对前端发挥的局限性：性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作，但由于后端框架限制，我们很难使用**【Comet】**、**【Big Pipe】**等技术方案来优化性能。 233 | 234 | 235 | 236 | **注：在这期间(2005年以前) ， 包括早期的JSP、PHP可以称之为Web 1.0时代。在这里想说一句， 如果你是一名Java初学者， 请你不要再把一些陈旧的技术当回事了， 比如JSP， 因为时代在变、技术在变、什么都在变(引用扎克伯格的一句话：唯一不变的是变化本身)；当我们去给大学做实训时，有些同学会认为我们没有讲什么干货，其实不然，只能说是你认知里的干货对于市场来说早就过时了而已** 237 | 238 | ## 3.2、基于AJAX带来的SPA时代 239 | 240 | 时间回到2005年`AJAX`(Asynchronous JavaScript And XML， 异步JavaScript和XML，老技术新用法)被正式提出并开始使用`CDN`作为静态资源存储， 于是出现了JavaScript王者归来(在这之前JS都是用来在网页上贴狗皮膏药广告的) 的SPA(Single Page Application) 单页面应用时代。 241 | 242 | ![1595237421062](Vue课堂笔记.assets/1595237421062.png) 243 | 244 | **优点** 245 | 这种模式下， **前后端的分工非常清晰， 前后端的关键协作点是AJAX接口。**看起来是如此美妙， 但回过头来看看的话， 这与JSP时代区别不大。复杂度从服务端的JSP里移到了浏览器的JavaScript，浏览器端变得很复杂。类似Spring MVC， **这个时代开始出现浏览器端的分层架构**： 246 | 247 | ![1595237457081](Vue课堂笔记.assets/1595237457081.png) 248 | 249 | 缺点 250 | 251 | - **前后端接口的约定**：如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。**有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。** 252 | - 前端开发的复杂度控制：SPA应用大多以功能交互型为主，JavaScript代码过十万行很正常。大量JS代码的组织，与View层的绑定等，都不是容易的事情。 253 | 254 | ## 3.3、前端为主的MVC时代 255 | 256 | 此处的MVC模式如下： 257 | 258 | - MVC(同步通信为主) ：Model、View、Controller 259 | - MVP(异步通信为主) ：Model、View、Presenter 260 | - MVVM(异步通信为主)：Model、View、View Model为了降低前端开发复杂度，涌现了大量的前端框架，比如：`Angular JS`、`React`、`Vue.js`、`Ember JS`等， 这些框架总的原则是先按类型分层， 比如Templates、Controllers、Models， 然后再在层内做切分，如下图： 261 | 262 | ![1595237632332](Vue课堂笔记.assets/1595237632332.png) 263 | 264 | **优点** 265 | 266 | - **前后端职责很清晰**：前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难， 前端可以本地开发。后端则可以专注于业务逻辑的处理， 输出RESTful等接口。 267 | - **前端开发的复杂度可控**：前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本书的厚度去说明。 268 | - **部署相对独立**：可以快速改进产品体验 269 | 270 | **缺点** 271 | 272 | - 代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。 273 | - 全异步， 对SEO不利。往往还需要服务端做同步渲染的降级方案。 274 | - 性能并非最佳，特别是移动互联网环境下。 275 | - SPA不能满足所有需求， 依旧存在大量多页面应用。URL Design需要后端配合， 前端无法完全掌控。 276 | 277 | ## 3.4、Node JS带来的全栈时代 278 | 279 | 前端为主的MVC模式解决了很多很多问题， 但如上所述， 依旧存在不少不足之处。随着Node JS的兴起， JavaScript开始有能力运行在服务端。这意味着可以有一种新的研发模式： 280 | 281 | ![1595237863311](Vue课堂笔记.assets/1595237863311.png) 282 | 283 | 在这种研发模式下，前后端的职责很清晰。对前端来说，两个UI层各司其职： 284 | 285 | - Front-end Ul layer处理浏览器层的展现逻辑。通过CSS渲染样式， 通过JavaScript添加交互功能， HTML的生成也可以放在这层， 具体看应用场景。 286 | - Back-end Ul layer处理路由、模板、数据获取、Cookie等。通过路由， 前端终于可以自主把控URL Design， 这样无论是单页面应用还是多页面应用， 前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。 287 | 288 | 289 | 290 | 通过Node， WebServer层也是JavaScript代码， 这意味着部分代码可前后复用， 需要SEO的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。 291 | 292 | 与JSP模式相比， 全栈模式看起来是一种回归， 也的确是一种向原始开发模式的回归， 不过是一种螺旋上升式的回归。 293 | 294 | 295 | 296 | 基于Node JS的全栈模式， 依旧面临很多挑战： 297 | 298 | - 需要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。 299 | - Node JS层与Java层的高效通信。Node JS模式下， 都在服务器端， RESTful HTTP通信未必高效， 通过SOAP等方式通信更高效。一切需要在验证中前行。 300 | - 对部著、运维层面的熟练了解，需要更多知识点和实操经验。 301 | - 大量历史遗留问题如何过渡。这可能是最大最大的阻力。 302 | **注：看到这里，相信很多同学就可以理解，为什么我总在课堂上说：“前端想学后台很难，而我们后端程序员学任何东西都很简单”；就是因为我们后端程序员具备相对完善的知识体系。** 303 | - **全栈！So Easy！** 304 | 305 | ## 3.5、总结 306 | 307 | 综上所述，模式也好，技术也罢，没有好坏优劣之分，只有适合不适合；前后分离的开发思想主要是基于`Soc`(关注度分离原则)，上面种种模式，都是让前后端的职责更清晰，分工更合理高效。 -------------------------------------------------------------------------------- /Vue课堂笔记/02第一个vue程序.md: -------------------------------------------------------------------------------- 1 | # 1、MVVM 2 | 3 | ## 1.1、什么是MVVM 4 | 5 |   MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的**事件驱动编程方式**。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。 6 | 7 |   MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下： 8 | 9 | - 该层向上与视图层进行双向数据绑定 10 | - 向下与Model层通过接口请求进行数据交互 11 | 12 | ​ MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有`Vue.js`，`Anfular JS` 13 | 14 | ## 1.2、为什么要使用MVVM 15 | 16 |   MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处 17 | 18 | - **低耦合**：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 19 | - **可复用**：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。 20 | - **独立开发**：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。 21 | - **可测试**：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。 22 | 23 | ![1595238643753](第一个vue程序.assets/1595238643753.png) 24 | 25 | **View** 26 | 27 |   View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。 28 | 29 | **Model** 30 | 31 |   Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则 32 | 33 | **ViewModel** 34 | 35 |   ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。 36 |   需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的 37 | 38 | - 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示) 39 | - 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互) 40 | 41 |   视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 42 |   MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现`事件驱动编程`。 43 |   View层展现的不是`Model`层的数据， 而是`ViewModel`的数据， 由`ViewModel`负责与`Model`层交互， 这就**完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。** 44 | 45 | # 2、Vue 46 | 47 | Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。 48 | 49 | ## 2.1、MVVM模式的实现者 50 | 51 | - Model：模型层， 在这里表示JavaScript对象 52 | - View：视图层， 在这里表示DOM(HTML操作的元素) 53 | - ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 54 | 55 |   在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者 56 | 57 | - ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新 58 | - ViewModel能够监听到视图的变化， 并能够通知数据发生改变 59 | 60 |   至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定 61 | 62 | ## 2.2、MVVM模式的实现者 63 | 64 | - Model：模型层， 在这里表示JavaScript对象 65 | - View：视图层， 在这里表示DOM(HTML操作的元素) 66 | - ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 67 | 68 |   在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者 69 | 70 | - ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新 71 | - ViewModel能够监听到视图的变化， 并能够通知数据发生改变 72 | 73 |   至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定 74 | 75 | ## 2.3、为什么要使用Vue.js 76 | 77 | - 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+) 78 | - 移动优先。更适合移动端， 比如移动端的Touch事件 79 | - 易上手，学习曲线平稳，文档齐全 80 | - 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性 81 | - 开源，社区活跃度高 82 | - …… 83 | 84 | # 3、第一个Vue程序 85 | 86 |   【说明】IDEA可以安装Vue的插件! 87 |   注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。 88 | 89 | ## 3.1、下载地址 90 | 91 | - 开发版本 92 | - 包含完整的警告和调试模式：https：//yuejs.org/js/vue.js 93 | - 删除了警告， 30.96KBmin+gzip：https：//vuejs.org/js/vue.min.js 94 | - CDN 95 | - `` 96 | - `` 97 | 98 | ## 3.2、代码编写 99 | 100 |   Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下： 101 | 102 | 1. **创建一个HTML文件** 103 | 104 | ```html 105 | 106 | 107 | 108 | 109 | Title 110 | 111 | 112 | 113 | 114 | 115 | 116 | ``` 117 | 118 |   2. **引入Vue.js** 119 | 120 | ```js 121 | 122 | 123 | 124 | ``` 125 | 126 |   3. **创建一个Vue实例** 127 | 128 | ```vue 129 | 138 | 139 | ``` 140 | 141 | 说明： 142 | 143 | - `el: '#vue'`：绑定元素的ID 144 | - `data:{message:'Hello Vue!'}`：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！ 145 | 146 |   4. 将数据绑定到页面元素 147 | 148 | ```vue 149 | 150 |
151 | {{message}} 152 |
153 | ``` 154 | 155 | 说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果， 是不是和EL表达式非常像? 156 | 157 | ## 3.3、完整的HTML 158 | 159 | ```html 160 | 161 | 162 | 163 | 164 | Title 165 | 166 | 167 | 168 | 169 | 170 |
171 | {{message}} 172 |
173 | 174 | 175 | 176 | 185 | 186 | 187 | 188 | ``` 189 | 190 | ## 3.4、测试 191 | 192 |   为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下： 193 | 194 | 1. 在浏览器上运行第一个Vue应用程序， 进入开发者工具 195 | 196 | 2. 在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld 197 | 3. 此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。 -------------------------------------------------------------------------------- /Vue课堂笔记/03基础语法指令.md: -------------------------------------------------------------------------------- 1 | # 1、v-bind 2 | 3 | - 我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新! 4 | - 我们还可以使用v-bind来绑定元素特性! 5 | - **上代码** 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | Title 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 21 | 22 |
23 | 24 | 25 | 26 | 35 | 36 | 37 | 38 | ``` 39 | 40 | - 你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。 41 | - 如果你再次打开浏览器的JavaScript控制台， 输入app.message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。 42 | 43 | # 2、v-if， v-else 44 | 45 | 什么是条件判断语句，就不需要我说明了吧，以下两个属性! 46 | 47 | - `v-if` 48 | - `v-else` 49 | - **上代码** 50 | 51 | ```html 52 | 53 | 54 | 55 | 56 | Title 57 | 58 | 59 | 60 |
61 |

Yes

62 |

No

63 | 64 |
65 | 66 | 67 | 68 | 77 | 78 | 79 | ``` 80 | 81 | 测试： 82 | 1.在浏览器上运行，打开控制台! 83 | 2.在控制台输入`vm.ok=false`然后回车，你会发现浏览器中显示的内容会直接变成NO 84 |   注：使用`v-*`属性绑定数据是不需要`双花括号`包裹的 85 | 86 | # v-else-if 87 | 88 | - v-if 89 | - v-else-if 90 | - v-else 91 | - 注：`===`三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码： 92 | 93 | ```xml 94 | 95 | 96 | 97 | 98 | Title 99 | 100 | 101 | 102 |
103 |

A

104 |

B

105 |

D

106 |

C

107 | 108 |
109 | 110 | 111 | 112 | 121 | 122 | 123 | 124 | ``` 125 | 126 | # 3、v-for 127 | 128 | - v-for 129 | 130 | ```html 131 |
132 |
  • 133 | {{item.message}}---{{index}} 134 |
    • 135 | 136 |
    137 | 138 | ``` 139 | 140 | - 注：`items`是数组，`item`是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！ 141 | - 上代码： 142 | 143 | ```html 144 | 145 | 146 | 147 | 148 | Title 149 | 150 | 151 | 152 |
    153 |
  • 154 | {{item.message}}---{{index}} 155 |
    • 156 | 157 |
    158 | 159 | 160 | 161 | 174 | 175 | 176 | 177 | ``` 178 | 179 | - 测试：在控制台输入`vm.items.push({message：'狂神说运维'})`，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条`狂神说运维`. 180 | - v-on监听事件 181 | - emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的`click`是vue的事件， 可以绑定到Vue中的`methods`中的方法事件! 182 | - **上代码**： 183 | 184 | ```html 185 | 186 | 187 | 188 | 189 | Title 190 | 191 | 192 | 193 |
    194 | 195 |
    196 | 197 | 198 | 212 | 213 | 214 | ``` 215 | 216 | - **点击测试** 217 |   Vue还有一些基本的使用方式， 大家有需要的可以再跟着官方文档看看， 因为这些基本的指令几乎我们都见过了，一通百通!掌握学习的方式! -------------------------------------------------------------------------------- /Vue课堂笔记/04表单双绑、组件.assets/1595250631979.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/04表单双绑、组件.assets/1595250631979.png -------------------------------------------------------------------------------- /Vue课堂笔记/04表单双绑、组件.assets/1595250659145.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/04表单双绑、组件.assets/1595250659145.png -------------------------------------------------------------------------------- /Vue课堂笔记/04表单双绑、组件.assets/1595251605760.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/04表单双绑、组件.assets/1595251605760.png -------------------------------------------------------------------------------- /Vue课堂笔记/04表单双绑、组件.md: -------------------------------------------------------------------------------- 1 | # 1、什么是双向数据绑定 2 | 3 |   Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 4 |   值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。 5 | 6 | ## 1.1、为什么要实现数据的双向绑定 7 | 8 |   在`Vue.js`中，如果使用`vuex`， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， `Vue.js`的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。 9 | 10 | # 2、在表单中使用双向数据绑定 11 | 12 |   你可以用`v-model`指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但`v-model`本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 13 |   注意：`v-model`会忽略所有表单元素的`value`、`checked`、`selected`特性的初始值而总是将`Vue`实例的数据作为数据来源。你应该通过`JavaScript`在组件的`data`选项中声明初始值! 14 | 15 | ## 2.1、单行文本 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | Title 23 | 24 | 25 |
    26 | 输入的文本：{{message}} 27 |
    28 | 29 | 30 | 38 | 39 | 40 | 41 | ``` 42 | 43 | ## 2.2、多行文本 44 | 45 | ```xml 46 | 47 | 48 | 49 | 50 | Title 51 | 52 | 53 |
    54 | 多行文本：  多行文本是：{{pan}} 55 |
    56 | 57 | 58 | 66 | 67 | 68 | 69 | 70 | ``` 71 | 72 | ## 2.3、单复选框 73 | 74 | ```xml 75 | 76 | 77 | 78 | 79 | Title 80 | 81 | 82 | 83 |
    84 | 单复选框： 85 | 86 |    87 | 88 |
    89 | 90 | 91 | 99 | 100 | 101 | 102 | ``` 103 | 104 | ## 2.4、多复选框 105 | 106 | ```html 107 | 108 | 109 | 110 | 111 | Title 112 | 113 | 114 | 115 |
    116 | 多复选框： 117 | 118 |    119 | 120 | 121 |    122 | 123 | 124 |    125 | 126 | 选中的值：{{checkedNames}} 127 |
    128 | 129 | 130 | 138 | 139 | 140 | ``` 141 | 142 | ## 2.5、单选按钮 143 | 144 | ```html 145 | 146 | 147 | 148 | 149 | Title 150 | 151 | 152 | 153 |
    154 | 单选框按钮 155 | 156 | 157 | 158 | 159 | 选中的值：{{picked}} 160 |
    161 | 162 | 163 | 171 | 172 | 173 | ``` 174 | 175 | ## 2.6、下拉框 176 | 177 | ```html 178 | 179 | 180 | 181 | 182 | Title 183 | 184 | 185 |
    186 | 190 | 191 | 下拉框: 192 | 199 | value:{{pan}} 200 | 201 | 202 | 203 |
    204 | 205 | 206 | 214 | 215 | 216 | ``` 217 | 218 |   注意：`v-model`表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发`change`事件。因此，更推荐像上面这样提供一个值为空的禁用选项。 219 | 220 | # 3、什么是组件 221 | 222 | - 组件是可复用的`Vue`实例， 说白了就是一组可以重复使用的模板， 跟`JSTL`的自定义标签、`Thymeleal`的`th:fragment`等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织： 223 | 224 | ![1595251605760](04表单双绑、组件.assets/1595251605760.png) 225 | 226 | - 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 227 | 228 | ## 3.1、第一个Vue组件 229 | 230 |   注意：在实际开发中，我们并不会用以下方式开发组件，而是采用`vue-cli`创建，`vue`模板文件的方式开发，以下方法只是为了让大家理解什么是组件。 231 |   **使用Vue.component()方法注册组件，格式如下：** 232 | 233 | ```html 234 |
    235 | 236 |
    237 | 238 | 239 | 251 | ``` 252 | 253 |   说明： 254 | 255 | - `Vue.component()`：注册组件 256 | - `pan`：自定义组件的名字 257 | - `template`：组件的模板 258 | 259 | ## 3.2、使用`props`属性传递参数 260 | 261 |   像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用`props`属性了！ 262 |   **注意：默认规则下props属性里的值不能为大写；** 263 | 264 | ```html 265 | 266 | 267 | 268 | 269 | Title 270 | 271 | 272 | 273 | 274 |
    275 | 276 | 277 |
    278 | 279 | 280 | 281 | 282 | 295 | 296 | 297 | ``` 298 | 299 |   **说明**： 300 | 301 | - `v-for="item in items"`：遍历`Vue`实例中定义的名为`items`的数组，并创建同等数量的组件 302 | - `v-bind:itemChild="item"`：将遍历的`item`项绑定到组件中`props`定义名为`item`属性上；= 号左边的`itemChild`为`props`定义的属性名，右边的为`item in items` 中遍历的item项的值 -------------------------------------------------------------------------------- /Vue课堂笔记/05Axios异步通信.assets/1595253373596.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/05Axios异步通信.assets/1595253373596.png -------------------------------------------------------------------------------- /Vue课堂笔记/05Axios异步通信.md: -------------------------------------------------------------------------------- 1 | # 1、什么是Axios 2 | 3 |   Axios是一个开源的可以用在浏览器端和`Node JS`的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下： 4 | 5 | - 从浏览器中创建`XMLHttpRequests` 6 | - 从node.js创建http请求 7 | - 支持Promise API[JS中链式编程] 8 | - 拦截请求和响应 9 | - 转换请求数据和响应数据 10 | - 取消请求 11 | - 自动转换JSON数据 12 | - 客户端支持防御XSRF(跨站请求伪造) 13 | 14 |   GitHub：[https://github.com/axios/axios](https://github.com/axios/axios) 15 |   中文文档：[http://www.axios-js.com/](http://www.axios-js.com/) 16 | 17 | ## 1.1、为什么要使用Axios 18 | 19 | ​ 由于`Vue.js`是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以`Vue.js`并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为`vue-resource`的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了`Axios`框架。少用jQuery， 因为它操作Dom太频繁! 20 | 21 | # 2、第一个Axios应用程序 22 | 23 |   咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下 24 | 25 | ```json 26 | { 27 | "name": "狂神说Java", 28 | "url": "https://blog.kuangstudy.com", 29 | "page": 1, 30 | "isNonProfit": true, 31 | "address": { 32 | "street": "含光门", 33 | "city": "陕西西安", 34 | "country": "中国" 35 | }, 36 | "links": [ 37 | { 38 | "name": "bilibili", 39 | "url": "https://space.bilibili.com/95256449" 40 | }, 41 | { 42 | "name": "狂神说Java", 43 | "url": "https://blog.kuangstudy.com" 44 | }, 45 | { 46 | "name": "百度", 47 | "url": "https://www.baidu.com/" 48 | } 49 | ] 50 | } 51 | ``` 52 | 53 | **测试代码** 54 | 55 | ```html 56 | 57 | 58 | 59 | 60 | Title 61 | 62 | 67 | 68 | 69 |
    70 |
    地名：{{info.name}}
    71 |
    地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}
    72 |
    链接：{{info.url}}
    73 |
    74 | 75 | 76 | 77 | 78 | 79 | 103 | 104 | 105 | 106 | 107 | ``` 108 | 109 | 说明： 110 | 111 | 1. v-cloak解决页面闪烁问题（不会出现{{message}}这样的信息） 112 | 2. 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定 113 | 3. 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中 114 | 4. 我们在data中的数据结构必须和`Ajax`响应回来的数据格式匹配！ 115 | 116 | # 3、Vue的生命周期 117 | 118 |   官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示 119 |   Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 120 |   在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。 121 | 122 | ![1595253373596](05Axios异步通信.assets/1595253373596.png) 123 | 124 | -------------------------------------------------------------------------------- /Vue课堂笔记/06计算属性、内容分发、自定义事件.assets/1595295779847.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/06计算属性、内容分发、自定义事件.assets/1595295779847.png -------------------------------------------------------------------------------- /Vue课堂笔记/06计算属性、内容分发、自定义事件.assets/自定义事件.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/06计算属性、内容分发、自定义事件.assets/自定义事件.png -------------------------------------------------------------------------------- /Vue课堂笔记/06计算属性、内容分发、自定义事件.md: -------------------------------------------------------------------------------- 1 | # 1、什么是计算属性 2 | 3 |   计算属性的重点突出在`属性`两个字上(属性是名词)，首先它是个`属性`其次这个属性有`计算`的能力(计算是动词)，这里的`计算`就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存! 4 | 5 | **上代码** 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | Title 13 | 14 | 15 | 16 |
    17 |

    currentTime1:{{currentTime1()}}

    18 |

    currentTime2:{{currentTime2}}

    19 |
    20 | 21 | 22 | 23 | 42 | 43 | 44 | ``` 45 | 46 |   注意：methods和computed里的东西不能重名 47 | 说明： 48 | 49 | - methods：定义方法， 调用方法使用currentTime1()， 需要带括号 50 | - computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化 51 | - 如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用`vm.message=”qinjiang"`， 改变下数据的值，再次测试观察效果 52 | 53 | **结论：** 54 |   调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，**计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；** 55 | 56 | # 2、内容分发 57 | 58 |   在`Vue.js`中我们使用``元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中； 59 | 60 | ## 测试 61 | 62 |   比如准备制作一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成，但这三个组件又是相互独立的，该如何操作呢? 63 | 64 | - **定义一个待办事项的组件** 65 | 66 | ```html 67 |
    68 | 69 |
    70 | 71 | 72 | 82 | ``` 83 | 84 | - **我们需要让，代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！** 85 | 1. 将上面的代码留出一个插槽，即slot 86 | 87 | ```html 88 | Vue.component('todo',{ 89 | template:'
    \ 90 | \ 91 | \ 94 |
    ' 95 | }); 96 | 97 | ``` 98 | 2. 定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件 99 | 100 | ```javascript 101 | Vue.component('todo-title',{ 102 | props:['title'], 103 | template:'
    {{title}}
    ' 104 | }); 105 | 106 | //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！ 107 | Vue.component("todo-items",{ 108 | props:["item","index"], 109 | template:"
  • {{index+1}},{{item}}
    • " 110 | }); 111 | ``` 112 | 113 | 3. 实例化Vue并初始化数据 114 | 115 | ```javascript 116 | var vm = new Vue({ 117 | el:"#vue", 118 | data:{ 119 | todoItems:['狂神说java','狂神说前端','狂神说运维'] 120 | } 121 | }); 122 | ``` 123 | 4. 将这些值，通过插槽插入 124 | 125 | ```html 126 |
    127 | 128 | 129 | 130 | 131 | 132 | 133 |
    134 | ``` 135 | 136 |   说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中 137 |    138 | 完整代码如下： 139 | 140 | ```html 141 | 142 | 143 | 144 | 145 | Title 146 | 147 | 148 | 149 |
    150 | 151 | 152 | 153 | 154 | 156 |
    157 | 158 | 159 | 186 | 187 | 188 | ``` 189 | 190 | # 3、自定义事件 191 | 192 |   通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下： 193 |   1. 在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法 194 | 195 | ```js 196 | var vm = new Vue({ 197 | el: '#app', 198 | data: { 199 | title:"秦老师系列课程", 200 | todoItems:['狂神说java','狂神说前端','狂神说运维'] 201 | }, 202 | methods: { 203 | removeItems(index) { 204 | console.log("删除了" + this.todoItems[index] + "OK") 205 | this.todoItems.splice(index,1)//一次删除一个元素 206 | } 207 | } 208 | }); 209 | ``` 210 | 211 |   2. 修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！ 212 | 213 | ```js 214 | //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！ 215 | Vue.component("todo-items",{ 216 | props:["item",'index'], 217 | template:`
  • {{index}}——{{item}}
    • `, 218 | methods: { 219 | remove(index) { 220 | this.$emit('remove',index) 221 | } 222 | } 223 | }); 224 | ``` 225 | 226 |   3. 修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！ 227 | 228 | ```html 229 | 230 | 232 | ``` 233 | 234 | **对上一个代码进行修改，实现删除功能** 235 | 236 | ```html 237 | 238 | 239 | 240 | 241 | Title 242 | 243 | 244 | 245 |
    246 | 247 | {{title}} 248 | 249 | 251 | 252 | 254 |
    你好啊
    255 |
    你好啊
    256 |
    你好啊
    257 |
    你好你好
    258 |     259 |
    260 | 261 | 262 | 263 | 306 | 307 | 308 | ``` 309 | 310 | ## 逻辑理解 311 | 312 | ![1595295779847](06计算属性、内容分发、自定义事件.assets/自定义事件.png) 313 | 314 | # 4、Vue入门小结 315 | 316 | 核心：数据驱动，组件化 317 | 318 | 优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行； 319 | 320 | 常用的属性： 321 | 322 | - v-if 323 | - v-else-if 324 | - v-else 325 | - v-for 326 | - v-on绑定事件，简写@ 327 | - v-model数据双向绑定 328 | - v-bind给巨剑绑定参数，简写： 329 | 330 | 组件化： 331 | 332 | - 组合组件slot插槽 333 | - 组件内部绑定事件需要使用到`this.$emit("事件名",参数);` 334 | - 计算属性的特色，缓存计算数据 335 | 336 |   遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信； 337 | 338 | ## 说明 339 | 340 | Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~ 341 | 342 | 官网： 343 | 344 | - https://element.eleme.cn/#/zh-CN 345 | - https://ice.work/ -------------------------------------------------------------------------------- /Vue课堂笔记/07第一个vue-cli项目.md: -------------------------------------------------------------------------------- 1 | # 1、什么是vue-cli 2 | 3 | - vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板 4 | - 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速； 5 | 6 | **主要的功能** 7 | 8 | - 统一的目录结构 9 | - 本地调试 10 | - 热部署 11 | - 单元测试 12 | - 集成打包上线 13 | 14 | # 2、需要的环境 15 | 16 | **安装nodejs：** 17 | 18 | - Node.js：http://nodejs.cn/download/ 19 |   安装就是无脑的下一步就好，安装在自己的环境目录下 20 | - Git：https://git-scm.com/doenloads 21 | - 镜像：https://npm.taobao.org/mirrors/git-for-windows/ 22 | 23 | - cmd下输入`node -v`，查看是否能够正确打印出版本号即可！ 24 | - cmd下输入`npm -v`，查看是否能够正确打印出版本号即可！ 25 | - 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！ 26 | 27 | **安装Node.js淘宝镜像加速器（cnpm）** 28 | 29 | ``` 30 | # -g 就是全局安装 31 | npm install cnpm -g 32 | 33 | # 或使用如下语句解决npm速度慢的问题 34 | npm install --registry=https://registry.npm.taobao.org 35 | ``` 36 | 37 |   安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！ 38 |   安装的位置 39 | 40 | - 默认:`C:\Users\administrator\AppData\Roaming\npm` 41 | 42 | - 我改路径之后：`D:\Program Files\nodejs\node_global\node_modules` 43 | 44 | ![1595303253098](第一个vue-cli项目.assets/1595303253098.png) 45 | 46 | 47 | 48 | **安装vue-cli** 49 | 50 | ```sql 51 | cnpm instal1 vue-cli-g 52 | #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack 53 | vue list 54 | ``` 55 | 56 | # 3、第一个vue-cli应用程序 57 | 58 | 1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录 59 | 60 | ``` 61 | D:\Project\vue-study; 62 | ``` 63 | 64 | 2.创建一个基于webpack模板的vue应用程序 65 | 66 | ```sql 67 | #1、首先需要进入到对应的目录 cd D:\Project\vue-study 68 | #2、这里的myvue是顶日名称，可以根据自己的需求起名 69 | vue init webpack myvue 70 | ``` 71 | 72 | 一路都选择no即可； 73 | **说明：** 74 | 75 | - Project name：项目名称，默认回车即可 76 | - Project description：项目描述，默认回车即可 77 | - Author：项目作者，默认回车即可 78 | - Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加） 79 | - Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加) 80 | - Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加） 81 | - Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加） 82 | - Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！ 83 | 84 | ![1595303458111](第一个vue-cli项目.assets/1595303458111.png) 85 | 86 | ## 初始化 87 | 88 | ``` 89 | cd myvue 90 | npm install 91 | ``` 92 | 93 | ![1595303888573](第一个vue-cli项目.assets/1595303888573.png) 94 | 95 | ## 运行 96 | 97 | ``` 98 | npm run dev 99 | ``` 100 | 101 | ![1595304238421](第一个vue-cli项目.assets/1595304238421.png) 102 | 103 | ![1595304400777](第一个vue-cli项目.assets/1595304400777.png) 104 | 105 | 执行完成后，目录多了很多依赖 106 | 107 | ![1595305147701](第一个vue-cli项目.assets/1595305147701.png) 108 | 109 | 当出现问题时，可以查看提示进行处理如下 110 | ![1595303623009](第一个vue-cli项目.assets/1595303623009.png) -------------------------------------------------------------------------------- /Vue课堂笔记/08webpack使用.assets/1595309916482.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/08webpack使用.assets/1595309916482.png -------------------------------------------------------------------------------- /Vue课堂笔记/08webpack使用.md: -------------------------------------------------------------------------------- 1 | # 什么是Webpack 2 | 3 | - 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle. 4 | - Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等； 5 | - 伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。 6 | - 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。 7 | 8 | ## 模块化的演进 9 | 10 | ### Script标签 11 | 12 | ```html 13 | 14 | 15 | 16 | ``` 17 | 18 |   这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。 19 |   这种原始的加载方式暴露了一些显而易见的弊端： 20 | 21 | - 全局作用域下容易造成变量冲突 22 | - 文件只能按照` 232 | 233 | 234 | ``` 235 | 236 | 1. 在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可！ 237 | 2. 运行HTML看效果 238 | 239 |   **说明** 240 | 241 | ```shell 242 | # 参数--watch 用于监听变化 243 | webpack --watch 244 | ``` -------------------------------------------------------------------------------- /Vue课堂笔记/09vue-router路由.md: -------------------------------------------------------------------------------- 1 | # 说明 2 | 3 | ------ 4 | 5 | 学习的时候，尽量的打开官方的文档 6 | 7 | Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有： 8 | 9 | - 嵌套的路由/视图表 10 | - 模块化的、基于组件的路由配置 11 | - 路由参数、查询、通配符 12 | - 基于Vue js过渡系统的视图过渡效果 13 | - 细粒度的导航控制 14 | - 带有自动激活的CSS class的链接 15 | - HTML5 历史模式或hash模式， 在IE 9中自动降级 16 | - 自定义的滚动行为 17 | 18 | # 安装 19 | 20 | **基于第一个vue-cli进行测试学习； 先查看node modules中是否存在vue-router** 21 | vue-router是一个插件包， 所以我们还是需要用n pm/cn pm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。 22 | 23 | ```shell 24 | npm install vue-router --save-dev 25 | ``` 26 | 27 | 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能： 28 | 29 | ```shell 30 | import Vue from 'vue' 31 | import VueRouter from 'vue-router' 32 | 33 | Vue.use(VueRouter); 34 | ``` 35 | 36 | # 测试 37 | 38 | 1、先删除没有用的东西 39 | 2、`components` 目录下存放我们自己编写的组件 40 | 3、定义一个`Content.vue` 的组件 41 | 42 | ```html 43 | 48 | 49 | 54 | ``` 55 | 56 | `Main.vue`组件 57 | 58 | ```html 59 | 64 | 65 | 70 | ``` 71 | 72 | 4、安装路由，在src目录下，新建一个文件夹：`router`，专门存放路由，配置路由index.js，如下 73 | 74 | ```js 75 | import Vue from'vue' 76 | //导入路由插件 77 | import Router from 'vue-router' 78 | //导入上面定义的组件 79 | import Content from '../components/Content' 80 | import Main from '../components/Main' 81 | //安装路由 82 | Vue.use(Router) ; 83 | //配置路由 84 | export default new Router({ 85 | routes:[ 86 | { 87 | //路由路径 88 | path:'/content', 89 | //路由名称 90 | name:'content', 91 | //跳转到组件 92 | component:Content 93 | }, 94 | { 95 | //路由路径 96 | path:'/main', 97 | //路由名称 98 | name:'main', 99 | //跳转到组件 100 | component:Mian 101 | } 102 | ] 103 | }); 104 | ``` 105 | 106 | 5、在`main.js`中配置路由 107 | 108 | ```js 109 | import Vue from 'vue' 110 | import App from './App' 111 | 112 | //导入上面创建的路由配置目录 113 | import router from './router'//自动扫描里面的路由配置 114 | 115 | //来关闭生产模式下给出的提示 116 | Vue.config.productionTip = false; 117 | 118 | new Vue({ 119 | el:"#app", 120 | //配置路由 121 | router, 122 | components:{App}, 123 | template:'' 124 | }); 125 | ``` 126 | 127 | 6、在`App.vue`中使用路由 128 | 129 | ```html 130 | 141 | 142 | 147 | 148 | 149 | ``` -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595331174087.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595331174087.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595331325382.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595331325382.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595332641414.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595332641414.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595333969422.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595333969422.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595337979139.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595337979139.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595338033562.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595338033562.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.assets/1595383163158.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/10实战快速上手.assets/1595383163158.png -------------------------------------------------------------------------------- /Vue课堂笔记/10实战快速上手.md: -------------------------------------------------------------------------------- 1 | # 创建工程 2 | 3 | 注意：命令行都要使用管理员模式运行 4 | 1、创建一个名为hello-vue的工程`vue init webpack hello-vue` 5 | 2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件 6 | 7 | ```shell 8 | #进入工程目录 9 | cd hello-vue 10 | #安装vue-routern 11 | npm install vue-router --save-dev 12 | #安装element-ui 13 | npm i element-ui -S 14 | #安装依赖 15 | npm install 16 | # 安装SASS加载器 17 | cnpm install sass-loader node-sass --save-dev 18 | #启功测试 19 | npm run dev 20 | ``` 21 | 22 | 3、Npm命令解释： 23 | 24 | - `npm install moduleName`：安装模块到项目目录下 25 | - `npm install -g moduleName`：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置 26 | - `npm install -save moduleName`：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写 27 | - `npm install -save-dev moduleName`:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写 28 | 29 | # 创建登录页面 30 | 31 |   把没有用的初始化东西删掉！ 32 |   在源码目录中创建如下结构： 33 | 34 | - assets：用于存放资源文件 35 | - components：用于存放Vue功能组件 36 | - views：用于存放Vue视图组件 37 | - router：用于存放vue-router配置 38 | 39 | ![1595337979139](10实战快速上手.assets/1595337979139.png) 40 | 41 |   **创建首页视图，在views目录下创建一个名为Main.vue的视图组件：** 42 | 43 | ```html 44 | 47 | 52 | 54 | ``` 55 | 56 |   创建登录页视图在views目录下创建名为Login.vue的视图组件，其中el-form的元素为ElementUI组件； 57 | 58 | ```html 59 | 85 | 86 | 126 | 127 | 145 | 146 | ``` 147 | 148 | 创建路由，在router目录下创建一个名为`index.js`的vue-router路由配置文件 149 | 150 | ```js 151 | import Vue from 'vue' 152 | import VueRouter from 'vue-router' 153 | import Main from '../views/Main' 154 | import Login from '../views/Login' 155 | 156 | Vue.use(VueRouter); 157 | 158 | export default new VueRouter({ 159 | routes:[ 160 | { 161 | path:'/login', 162 | name:'login', 163 | component:Main 164 | },{ 165 | path: '/main', 166 | name:'main', 167 | component: Login 168 | } 169 | ] 170 | }); 171 | 172 | ``` 173 | 174 | APP.vue 175 | 176 | ```html 177 | 182 | 183 | 191 | 192 | 202 | ``` 203 | 204 | main.js 205 | 206 | ```js 207 | // The Vue build version to load with the `import` command 208 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 209 | import Vue from 'vue' 210 | import App from './App' 211 | import router from "./router" 212 | 213 | import ElementUI from 'element-ui' 214 | import 'element-ui/lib/theme-chalk/index.css' 215 | 216 | Vue.use(router) 217 | Vue.use(ElementUI) 218 | 219 | /* eslint-disable no-new */ 220 | new Vue({ 221 | el: '#app', 222 | router, 223 | render:h=>h(App) 224 | }) 225 | ``` 226 | 227 | # 运行项目 228 | 229 | 1. 输入命令 230 | 231 | ```shell 232 | npm run dev 233 | ``` 234 | 235 | 2. 如果报错如下图：Module build failed: TypeError: loaderContext.getResolve is not a function（sass-loader版本太高） 236 | 237 | ![1595331174087](10实战快速上手.assets/1595331174087.png) 238 | 239 | 解决: 240 | 241 | 1. 修改配置文件，重新安装 242 | 243 | ``` 244 | //1.修改sass-loader的版本为^7.3.1 245 | //2.重新安装配置环境 246 | npm install 247 | //或者 248 | cnpm install 249 | ``` 250 | 251 | ![1595331325382](10实战快速上手.assets/1595331325382.png) 252 | 253 | 2. 卸载当前，重新下载 254 | 255 | ```shell 256 | // 卸载当前版本 257 | npm uninstall sass-loader 258 | // 安装7.3.1版本 259 | npm install sass-loader@7.3.1 --save-dev 260 | ``` 261 | 262 | 3. 如果报错为：Module build failed: Error: Cannot find module 'node-sass' 263 | 264 | ![1595332641414](10实战快速上手.assets/1595332641414.png) 265 | 266 | - npm执行 267 | 268 | ```shell 269 | npm install node-sass --save-dev 270 | ``` 271 | 272 | - npm执行报错，则cnpm执行 273 | 274 | ```shell 275 | cnpm install node-sass --save 276 | ``` 277 | 278 | - 如果cnpm没有安装 279 | 280 | ```shell 281 | npm install -g cnpm --registry=https://registry.npm.taobao.org 282 | 283 | //或者 284 | npm install -g cnpm 285 | ``` 286 | 287 | 3. 再次执行终于成功 288 | 289 | ```shell 290 | npm run dev 291 | ``` 292 | 293 | 294 | 295 | ![1595333969422](10实战快速上手.assets/1595333969422.png) 296 | 297 | ![1595338033562](10实战快速上手.assets/1595338033562.png) 298 | 299 | # 路由嵌套 300 | 301 | 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： 302 | 303 | ```shell 304 | /user/foo/profile /user/foo/posts 305 | +------------------+ +-----------------+ 306 | | User | | User | 307 | | +--------------+ | | +-------------+ | 308 | | | Profile | | +------------> | | Posts | | 309 | | | | | | | | | 310 | | +--------------+ | | +-------------+ | 311 | +------------------+ +-----------------+ 312 | ``` 313 | 314 | 1. 用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件； 315 | 316 | ```vue 317 | 322 | 323 | 328 | 329 | 332 | ``` 333 | 334 | 2. 用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件； 335 | 336 | ```vue 337 | 342 | 343 | 348 | 349 | 352 | ``` 353 | 354 | 3. 配置嵌套路由修改 router 目录下的 index.js 路由配置文件，代码如 355 | 356 | ```js 357 | import Vue from 'vue' 358 | import Router from 'vue-router' 359 | 360 | import Main from '../views/Main' 361 | import Login from '../views/Login' 362 | 363 | import UserList from '../views/user/List' 364 | import UserProfile from '../views/user/proFile' 365 | 366 | Vue.use(Router); 367 | 368 | export default new Router({ 369 | routes: [ 370 | { 371 | path: '/login', 372 | component: Login 373 | }, 374 | { 375 | path: '/main', 376 | component: Main, 377 | children: [ 378 | { 379 | path: '/user/profile', 380 | component: UserProfile 381 | }, 382 | { 383 | path: '/user/list', 384 | component: UserList 385 | } 386 | ] 387 | } 388 | ] 389 | }) 390 | 391 | ``` 392 | 393 | 4. 修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下： 394 | 395 | ```vue 396 | 440 | 441 | 446 | 447 | 458 | ``` 459 | 460 | 说明： 461 | 462 | 在元素中配置了用于展示嵌套路由,主要使用个人信息展示嵌套路由内容 463 | 464 | ## 参数传递 465 | 466 | 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了； 467 | 468 | ### 组件转发 469 | 470 | #### $route方式 471 | 472 | 1. 修改路由配置, 473 | 474 | - 主要是在 path 属性中增加了 :id，:name 这样的占位符 475 | 476 | ```js 477 | { 478 | path: '/main', 479 | component: Main, 480 | children: [ 481 | { 482 | path: '/user/profile/:id/:name', 483 | name: 'UserProfile', 484 | component: UserProfile 485 | }, 486 | { 487 | path: '/user/list', 488 | component: UserList 489 | } 490 | ] 491 | } 492 | ``` 493 | 494 | 2. 传递参数 495 | 496 | - 此时我们将 to 改为了 :to，是为了将这一属性当成对象使用， 497 | 498 | - 注意 router-link 中的 name 属性名称一定要和路由中的name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径； 499 | 500 | ```vue 501 | 502 | 个人信息 503 | ``` 504 | 505 | 3. 接收参数, 在目标组件中 506 | 507 | ```vue 508 |
    509 |

    个人信息

    510 | {{$route.params.id}} 511 | {{$route.params.name}} 512 |
    513 | ``` 514 | 515 | 516 | 517 | #### 使用 props 的方式 518 | 519 | 1. 修改路由配置 , 主要增加了 props: true 属性 520 | 521 | ```js 522 | routes: [ 523 | { 524 | path: '/login', 525 | component: Login 526 | }, 527 | { 528 | path: '/main', 529 | component: Main, 530 | children: [ 531 | { 532 | path: '/user/profile/:id/:name', 533 | name: 'UserProfile', 534 | component: UserProfile, 535 | props: true 536 | }, 537 | { 538 | path: '/user/list', 539 | component: UserList 540 | } 541 | ] 542 | } 543 | ] 544 | ``` 545 | 546 | 2. 传递参数和之前一样 547 | 548 | 3. 接收参数为目标组件增加 props 属性 549 | 550 | ```vue 551 |
    552 |

    个人信息

    553 | {{id}} 554 | {{name}} 555 |
    556 | ``` 557 | 558 | 559 | 560 | ### 组件重定向 561 | 562 | - 重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如： 563 | 564 | ```js 565 | { 566 | path: '/goHome', 567 | redirect: '/main' 568 | } 569 | ``` 570 | 571 | - 说明：这里定义了两个路径，一个是 /main ，一个是 /goHome 572 | 573 | - 其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件； 574 | 575 | - 使用的话，只需要设置对应路径即可； 576 | 577 | ```vue 578 | 579 | 回到首页 580 | 581 | ``` 582 | 583 | 584 | 585 | # 路由模式与 404 586 | 587 | ## 路由模式有两种 588 | 589 | - hash：路径带 # 符号，如 http://localhost/#/login 590 | 591 | - 默认为hash路由模式 592 | 593 | ```js 594 | export default new Router({ 595 | routes: [] 596 | }) 597 | ``` 598 | 599 | 600 | 601 | - history：路径不带 # 符号，如 http://localhost/login 602 | 603 | - history路由模式 604 | 605 | ```js 606 | export default new Router({ 607 | mode: 'history', 608 | routes: [] 609 | }) 610 | ``` 611 | 612 | ## 404 613 | 614 | 1. 创建一个名为 `NotFound.vue` 的视图组件，代码如下： 615 | 616 | ```vue 617 | 622 | 623 | 628 | 629 | 632 | 633 | ``` 634 | 635 | 2. 修改路由配置，代码如下： 636 | 637 | ```js 638 | import NotFound from '../views/NotFound' 639 | 640 | export default new Router({ 641 | mode: 'history', 642 | routes: [ 643 | { 644 | path: '*', 645 | component: NotFound 646 | } 647 | ] 648 | }) 649 | ``` 650 | 651 | 652 | 653 | # 路由钩子与异步请求 654 | 655 | ## 路由钩子 656 | 657 | - `beforeRouteEnter`：在进入路由前执 658 | 659 | - `beforeRouteLeave`：在离开路由前执行 660 | 661 | ```js 662 | export default { 663 | name: "UserProFile", 664 | props: ['id','name'], 665 | beforeRouteEnter: (to,from,next) => { 666 | console.log('进入路由之前') 667 | next() 668 | }, 669 | beforeRouteLeave: (to,from,next) => { 670 | console.log('进入路由之后') 671 | next() 672 | } 673 | } 674 | ``` 675 | 676 | 参数说明： 677 | 678 | - to：路由将要跳转的路径信息 679 | - from：路径跳转前的路径信息 680 | - next：路由的控制参数 681 | - next() 跳入下一个页面 682 | - next(’/path’) 改变路由的跳转方向，使其跳到另一个路由 683 | - next(false) 返回原来的页面 684 | - next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例 685 | 686 | ## 异步请求 687 | 688 | 1. 安装 Axios `cnpm install --save vue-axios` 689 | 690 | 2. `main.js`引用 Axios 691 | 692 | ```js 693 | import axios from 'axios' 694 | import VueAxios from 'vue-axios' 695 | 696 | Vue.use(VueAxios, axios) 697 | ``` 698 | 699 | 3. 准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下`static/mock/data.json`。 700 | 701 | ```json 702 | { 703 | "name": "狂神说Java", 704 | "url": "https://blog.kuangstudy.com", 705 | "page": 1, 706 | "isNonProfit": true, 707 | "address": { 708 | "street": "含光门", 709 | "city": "陕西西安", 710 | "country": "中国" 711 | }, 712 | "links": [ 713 | { 714 | "name": "bilibili", 715 | "url": "https://space.bilibili.com/95256449" 716 | }, 717 | { 718 | "name": "狂神说Java", 719 | "url": "https://blog.kuangstudy.com" 720 | }, 721 | { 722 | "name": "百度", 723 | "url": "https://www.baidu.com/" 724 | } 725 | ] 726 | } 727 | ``` 728 | 729 | 4. 运行项目`npm run dev`看是否正常 730 | 731 | - 因为cnpm可能安装失败，重新安装一下`cnpm install --save vue-axios` 732 | 733 | ![1595383163158](10实战快速上手.assets/1595383163158.png) 734 | 735 | 5. 在 beforeRouteEnter 中进行异步请求 736 | 737 | ```js 738 | export default { 739 | name: "UserProFile", 740 | props: ['id','name'], 741 | beforeRouteEnter: (to,from,next) => { 742 | console.log('进入路由之前');//加载数据 743 | next(vm => { 744 | vm.getData();//进入路由之前执行getData() 745 | }) 746 | }, 747 | beforeRouteLeave: (to,from,next) => { 748 | console.log('进入路由之后'); 749 | next() 750 | }, 751 | methods: { 752 | getData() { 753 | this.axios({ 754 | method: 'get', 755 | url: 'http://localhost:8080/static/mock/data.json' 756 | }).then((response) => { 757 | console.log(response) 758 | }) 759 | } 760 | } 761 | } 762 | ``` 763 | 764 | -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237093142.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237093142.png -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237159379.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237159379.png -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237421062.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237421062.png -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237457081.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237457081.png -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237632332.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237632332.png -------------------------------------------------------------------------------- /Vue课堂笔记/Vue课堂笔记.assets/1595237863311.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/Vue课堂笔记.assets/1595237863311.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595303253098.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595303253098.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595303458111.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595303458111.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595303623009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595303623009.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595303835677.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595303835677.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595303888573.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595303888573.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595304238421.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595304238421.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595304400777.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595304400777.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue-cli项目.assets/1595305147701.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue-cli项目.assets/1595305147701.png -------------------------------------------------------------------------------- /Vue课堂笔记/第一个vue程序.assets/1595238643753.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/Vue课堂笔记/第一个vue程序.assets/1595238643753.png -------------------------------------------------------------------------------- /vue/hello-vue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /vue/hello-vue/.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 | -------------------------------------------------------------------------------- /vue/hello-vue/.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 | -------------------------------------------------------------------------------- /vue/hello-vue/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /vue/hello-vue/README.md: -------------------------------------------------------------------------------- 1 | # hello-vue 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 | -------------------------------------------------------------------------------- /vue/hello-vue/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, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 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 | -------------------------------------------------------------------------------- /vue/hello-vue/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 | -------------------------------------------------------------------------------- /vue/hello-vue/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/vue/hello-vue/build/logo.png -------------------------------------------------------------------------------- /vue/hello-vue/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 | -------------------------------------------------------------------------------- /vue/hello-vue/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 | -------------------------------------------------------------------------------- /vue/hello-vue/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 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | }, 68 | { 69 | test:/\.sass$/, 70 | loaders: ['style','css','sass'] 71 | } 72 | ] 73 | }, 74 | node: { 75 | // prevent webpack from injecting useless setImmediate polyfill because Vue 76 | // source contains it (although only uses it if it's native). 77 | setImmediate: false, 78 | // prevent webpack from injecting mocks to Node native modules 79 | // that does not make sense for the client 80 | dgram: 'empty', 81 | fs: 'empty', 82 | net: 'empty', 83 | tls: 'empty', 84 | child_process: 'empty' 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /vue/hello-vue/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 path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /vue/hello-vue/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /vue/hello-vue/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 | -------------------------------------------------------------------------------- /vue/hello-vue/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 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 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /vue/hello-vue/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /vue/hello-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | hello-vue 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue/hello-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-vue", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "lzh ", 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.19.2", 14 | "element-ui": "^2.13.2", 15 | "node-sass": "^4.14.1", 16 | "vue": "^2.5.2", 17 | "vue-axios": "^2.1.5" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^7.1.2", 21 | "babel-core": "^6.22.1", 22 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 23 | "babel-loader": "^7.1.1", 24 | "babel-plugin-syntax-jsx": "^6.18.0", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-plugin-transform-vue-jsx": "^3.5.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "chalk": "^2.0.1", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.28.0", 32 | "extract-text-webpack-plugin": "^3.0.0", 33 | "file-loader": "^1.1.4", 34 | "friendly-errors-webpack-plugin": "^1.6.1", 35 | "html-webpack-plugin": "^2.30.1", 36 | "node-notifier": "^5.1.2", 37 | "node-sass": "^4.14.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 | "postcss-url": "^7.2.1", 44 | "rimraf": "^2.6.0", 45 | "sass-loader": "^7.3.1", 46 | "semver": "^5.3.0", 47 | "shelljs": "^0.7.6", 48 | "uglifyjs-webpack-plugin": "^1.1.1", 49 | "url-loader": "^0.5.8", 50 | "vue-loader": "^13.3.0", 51 | "vue-router": "^3.3.4", 52 | "vue-style-loader": "^3.0.1", 53 | "vue-template-compiler": "^2.5.2", 54 | "webpack": "^3.6.0", 55 | "webpack-bundle-analyzer": "^2.9.0", 56 | "webpack-dev-server": "^2.9.1", 57 | "webpack-merge": "^4.1.0" 58 | }, 59 | "engines": { 60 | "node": ">= 6.0.0", 61 | "npm": ">= 3.0.0" 62 | }, 63 | "browserslist": [ 64 | "> 1%", 65 | "last 2 versions", 66 | "not ie <= 8" 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /vue/hello-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /vue/hello-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | import router from './router'; 5 | 6 | import ElementUI from 'element-ui'; 7 | import 'element-ui/lib/theme-chalk/index.css'; 8 | 9 | import axios from 'axios'; 10 | import VueAxios from 'vue-axios' 11 | 12 | Vue.use(router); 13 | Vue.use(ElementUI); 14 | Vue.use(VueAxios,axios); 15 | 16 | 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | render: h => h(App) 21 | }); 22 | -------------------------------------------------------------------------------- /vue/hello-vue/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | import Main from '../views/Main' 5 | import Login from '../views/Login' 6 | 7 | import UserList from '../views/user/List' 8 | import UserProfile from '../views/user/proFile' 9 | import NotFound from '../views/NotFound' 10 | 11 | Vue.use(Router); 12 | 13 | export default new Router({ 14 | mode: 'history', 15 | routes: [ 16 | { 17 | path: '/login', 18 | component: Login 19 | }, 20 | { 21 | path: '/main/:name', 22 | component: Main, 23 | props: true, 24 | children: [ 25 | { 26 | path: '/user/profile/:id/:name', 27 | name: 'UserProfile', 28 | component: UserProfile, 29 | props: true 30 | }, 31 | { 32 | path: '/user/list', 33 | component: UserList 34 | } 35 | ] 36 | }, 37 | { 38 | path: '/goHome', 39 | redirect: '/main' 40 | }, 41 | { 42 | path: '*', 43 | component: NotFound 44 | } 45 | ] 46 | }) 47 | -------------------------------------------------------------------------------- /vue/hello-vue/src/views/Login.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 68 | 69 | 87 | -------------------------------------------------------------------------------- /vue/hello-vue/src/views/Main.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 65 | 66 | 77 | -------------------------------------------------------------------------------- /vue/hello-vue/src/views/NotFound.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue/hello-vue/src/views/user/List.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue/hello-vue/src/views/user/proFile.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /vue/hello-vue/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/vue/hello-vue/static/.gitkeep -------------------------------------------------------------------------------- /vue/hello-vue/static/mock/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "狂神说Java", 3 | "url": "https://blog.kuangstudy.com", 4 | "page": 1, 5 | "isNonProfit": true, 6 | "address": { 7 | "street": "含光门", 8 | "city": "陕西西安", 9 | "country": "中国" 10 | }, 11 | "links": [ 12 | { 13 | "name": "bilibili", 14 | "url": "https://space.bilibili.com/95256449" 15 | }, 16 | { 17 | "name": "狂神说Java", 18 | "url": "https://blog.kuangstudy.com" 19 | }, 20 | { 21 | "name": "百度", 22 | "url": "https://www.baidu.com/" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /vue/myvue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /vue/myvue/.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 | -------------------------------------------------------------------------------- /vue/myvue/.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 | -------------------------------------------------------------------------------- /vue/myvue/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /vue/myvue/README.md: -------------------------------------------------------------------------------- 1 | # myvue 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 | -------------------------------------------------------------------------------- /vue/myvue/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, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 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 | -------------------------------------------------------------------------------- /vue/myvue/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 | -------------------------------------------------------------------------------- /vue/myvue/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/vue/myvue/build/logo.png -------------------------------------------------------------------------------- /vue/myvue/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 | -------------------------------------------------------------------------------- /vue/myvue/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 | -------------------------------------------------------------------------------- /vue/myvue/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 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /vue/myvue/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 path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /vue/myvue/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /vue/myvue/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 | -------------------------------------------------------------------------------- /vue/myvue/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 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 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /vue/myvue/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /vue/myvue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | myvue 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue/myvue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myvue", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "lzh ", 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-helper-vue-jsx-merge-props": "^2.0.3", 19 | "babel-loader": "^7.1.1", 20 | "babel-plugin-syntax-jsx": "^6.18.0", 21 | "babel-plugin-transform-runtime": "^6.22.0", 22 | "babel-plugin-transform-vue-jsx": "^3.5.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 | "extract-text-webpack-plugin": "^3.0.0", 29 | "file-loader": "^1.1.4", 30 | "friendly-errors-webpack-plugin": "^1.6.1", 31 | "html-webpack-plugin": "^2.30.1", 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 | "postcss-url": "^7.2.1", 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-router": "^3.3.4", 46 | "vue-style-loader": "^3.0.1", 47 | "vue-template-compiler": "^2.5.2", 48 | "webpack": "^3.6.0", 49 | "webpack-bundle-analyzer": "^2.9.0", 50 | "webpack-dev-server": "^2.9.1", 51 | "webpack-merge": "^4.1.0" 52 | }, 53 | "engines": { 54 | "node": ">= 6.0.0", 55 | "npm": ">= 3.0.0" 56 | }, 57 | "browserslist": [ 58 | "> 1%", 59 | "last 2 versions", 60 | "not ie <= 8" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /vue/myvue/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /vue/myvue/src/components/Content.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue/myvue/src/components/Main.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue/myvue/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | import router from './router' //自动扫描里面的路由配置（index才可以） 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | el: '#app', 10 | // 配置路由 11 | router, 12 | components: { App }, 13 | template: '' 14 | }) 15 | -------------------------------------------------------------------------------- /vue/myvue/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import Content from '../components/Content' 5 | import Main from '../components/Main' 6 | 7 | 8 | //安装路由 9 | Vue.use(VueRouter); 10 | 11 | //配置导出路由 12 | export default new VueRouter({ 13 | routes: [ 14 | { 15 | // 路由的路径 16 | path: '/content', 17 | name: 'content', 18 | // 路由的跳转 19 | component: Content 20 | 21 | }, 22 | { 23 | path: '/main', 24 | name: 'main', 25 | component: Main 26 | } 27 | ] 28 | }) 29 | -------------------------------------------------------------------------------- /vue/myvue/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lzh66666/Vue/d1a897c28ae03181589531ad6a048ce307056061/vue/myvue/static/.gitkeep -------------------------------------------------------------------------------- /vue/vue-first/.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 36 | -------------------------------------------------------------------------------- /vue/vue-first/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /vue/vue-first/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /vue/vue-first/.idea/vue-first.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /vue/vue-first/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 12 | 22 | 23 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 1595239883252 157 | 164 | 165 | 166 | 167 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 294 | 295 | 296 | 297 | 298 | 299 | 1.8 300 | 301 | 306 | 307 | 308 | 309 | 310 | 311 | 1.8 312 | 313 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 329 | 330 | 331 | 332 | 333 | 334 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
    11 | {{message}}
    12 | 13 | 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 14 | 15 |
    16 | 17 | 18 | 19 | 20 | 28 | 29 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
    10 |

    Yes

    11 |

    No

    12 | 13 |

    A

    14 |

    B

    15 |

    D

    16 |

    C

    17 | 18 |
    19 | 20 | 21 | 22 | 32 | 33 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
    10 |
  • 11 | {{item.message}}---{{index}} 12 |
    • 13 |
    14 | 15 | 16 | 17 | 30 | 31 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
    11 | 12 |
    13 | 14 | 15 | 16 | 17 | 30 | 31 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
    11 | 输入的文本：
    12 | {{message}} 13 | 14 |    15 |
    16 | 性别： 17 | 男 18 | 女 19 |

    选中了：{{sex}}


    20 | 下拉框: 21 | 28 | value:{{pan}} 29 |
    30 | 31 | 32 | 33 | 34 | 45 | 46 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 |
    11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 31 | 32 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 12 | 13 | 14 |
    15 |
    地名：{{info.name}}
    16 |
    地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}
    17 |
    链接：{{info.url}}
    18 |
    19 | 20 | 21 | 22 | 23 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
    10 |

    currentTime1:{{currentTime1()}}

    11 |

    currentTime2:{{currentTime2}}

    12 |
    13 | 14 | 15 | 16 | 35 | 36 | -------------------------------------------------------------------------------- /vue/vue-first/chapter-01/demo9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
    10 | 11 | {{title}} 12 | 13 | 14 | 15 | 17 |
    你好啊
    18 |
    你好啊
    19 |
    你好啊
    20 |
    你好你好
    21 |     22 |
    23 | 24 | 25 | 26 | 69 | 70 | -------------------------------------------------------------------------------- /vue/vue-first/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "狂神说Java", 3 | "url": "https://blog.kuangstudy.com", 4 | "page": 1, 5 | "isNonProfit": true, 6 | "address": { 7 | "street": "含光门", 8 | "city": "陕西西安", 9 | "country": "中国" 10 | }, 11 | "links": [ 12 | { 13 | "name": "bilibili", 14 | "url": "https://space.bilibili.com/95256449" 15 | }, 16 | { 17 | "name": "狂神说Java", 18 | "url": "https://blog.kuangstudy.com" 19 | }, 20 | { 21 | "name": "百度", 22 | "url": "https://www.baidu.com/" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /vue/webpack-study/.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 36 | -------------------------------------------------------------------------------- /vue/webpack-study/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /vue/webpack-study/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /vue/webpack-study/.idea/webpack-study.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /vue/webpack-study/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 12 | 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 | 46 | 47 | 53 | 54 | 55 | 56 | require 57 | 58 | 59 | 60 | 68 | 69 | 70 | 76 | 77 | 78 | 81 | 82 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |