Kylin

Vuex是做什么的？官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 状态管理到底是什么？ 状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。 其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用 那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？ 等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？ 当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。 如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。 不用怀疑，Vuex就是为了提供这样一个在多 ...

什么是Promise呢？ES6中一个非常重要和好用的特性就是Promise Promise是异步编程的一种解决方案。 那什么时候我们会来处理异步事件呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。 但是，当网络请求非常复杂时，就会出现回调地狱。 OK，我以一个非常夸张的案例来说明。 我们来考虑下面的场景(有夸张的成分)： 我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2 我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3 我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4 发送网络请求url4，获取最终的数据data4 上面的代码有什么问题吗？ 正常情况下，不会有什么问题，可以正常运行 ...

路由什么是路由？提到路由，可能第一反应是无线路由器，但这里的路由指的是页面跳转的规则，我们常见的网站，从A页面跳转到B页面是如何定义的，页面内容如何回显，这些都可以算作是web路由的一部分。路由分为前端路由和后端路由 后端路由早期的网站开发整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。 但是, 一个网站, 这么多页面服务器如何处理呢? 一个页面有自己对应的网址, 也就是URL. URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理. Controller进行各种处理, 最终生成HTML或者数据, 返回给前端. 这就完成了一个IO操作. 上面的这种操作, 就是后端路由. 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化. 后端路由的缺点 一种情况是整个页面的模块由后端人员来编写和维护的. 另一种 ...

基础语法通常函数的定义方法 用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。 参数问题当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。 函数中多行代码问题箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return 当省略掉了{ … }和return，则会默认将代码给return。如果没有返回值则为undefined 箭头函数的this 箭头函数中的this是如何查找的了? 向外层作用域中, 一层层查找this, 直到有this的定义.

Runtime-compiler和Runtime-only的区别当我们使用Vue CLI2创建项目的时候，会提示让我们选择使用什么版本的Vue Runtime + Compiler: recommended for most users（推荐给大多数用户） Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere（min+gzip大约轻6KB，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数） 为什么Runtime-only要比Runtime-compiler轻6KB呢？我们分别创建这两个版本的Vue项目，查看有什么不同。 经过对比，分析没有什么不同。唯一不同的就是在于main.js文件中 经过对比可以发现。Runtime-compiler版本是使用Vue实例的template属性将页面渲染 ...

什么是Vue CLI如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLIn 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。 CLI是什么意思? CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置. Vue CLI使用前提Node安装NodeJS可以直接在官方网站中下载安装.网址: http://nodejs.cn/download/ 检测安装的版本默认情况下安装Node和自动安装NPM Node环境要求8.9以上或者更高版本。node -v和npm -v查看版本 什么是NPM呢？NPM的全称是Node Package Manager 是一个Node ...

plugin是什么？pplugin是插件的意思，通常是用于对某个现有的架构进行扩展。 webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。 loader和plugin区别loader主要用于转换某些类型的模块，它是一个转换器。 lugin是插件，它是对webpack本身的扩展，是一个扩展器。 plugin的使用过程步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装) 步骤二：在webpack.config.js中的plugins中配置插件。 添加版权的Plugin该插件名字叫BannerPlugin，属于webpack自带的插件。 修改webpac-config.js配置文件 然后重新打包npm run build。查看打包的文件bundle.js。成功在头部加上版权信息 打包html的plugin目前，我们的index.html文件是存放在项目的根目录下的。 我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意 ...

Webpack配置使用Vue首先把上篇所写的代码复制一份。接着引入vue。通过npm install vue --save下载 接着在main.js中导入vue并编写 接着编写index.html。添加id，使用差值表达式 使用npm run build重新打包项目。查看页面 发现报错You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>) 这是因为使用import导入的vue是runtime-only版本的代码中，不可有任何的template。<div id="#app"></div>中的内容就是vue实例的template。所以我们要导入使用runtime-compiler版本的v ...

什么是loader？loader是webpack中一个非常核心的概念。 webpack用来做什么呢？ 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢？给webpack扩展对应的loader就可以啦。 loader使用过程： 步骤一：通过npm安装需要使用的loader 步骤二：在webpack.config.js中的module关键字下进行配置 大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。 css文件处理将上一篇的文章的代码复制一份。在src目录中创建一个css文件夹。编写一个normal.css文件。给页面设置背景颜色为红色 我们在main.js中使用CommonJS的requi ...

什么是Webpack？我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具 但是它是什么呢？用概念解释概念，还是不清晰。 我们从两个点来解释上面这句话：模块 和 打包 前端模块化在前面学习中，我已经用了大量的篇幅解释了为什么前端需要模块化。 而且我也提到了目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。 这就是webpack中模块化的 ...