2019年最全最新Vue、Vuejs教程，从入门到精通

一、父子组件的访问方式 1.父组件访问子组件：使用dolor符号children或dolor符号refs -使用children的时候，获取的是一个子组件数组，可以通过循环的访问遍历每一个子组件，也可以通过下标的访问单独访问某一个子组件。但是一但子组件的顺序和数量发生变化，就不是那么好用了。refs可以直接访问到某一个子组件，此时使用refs，更方便一些。 -区别：children可以访问到所有的子组件，而，是一个数组类型。refs是一个对象类型，默认是一个空的对象，当给子组件设置了标识ref，那么它就可以访问到设置了标识的子组件。 2.子组件访问父组件$parent和dolor符root -通过parent可以访问到父组件的值，但是一般情况下开发中不这么使用。在开发中，我们会把许多小功能抽成组件，一方面可以方便复用这些功能，另一方面可以降低子组件和父组件的耦合度。如果说我们通过parent去访问父组件的值，可能会出现某些父组件有，但某些父组件没有这个值的情况，这样会增加父子组件间的耦合度，造成一定的混乱。

二、插槽 1.为什么使用slot -组件的插槽是为了让我们封装的组件更加具有拓展性 -使用者可以决定组件内部的一些内容到底展示什么 -有些组件在很多页面中都会使用到，但是每个页面中却有一部分不一样的地方，这个时候我们就要保留共性，并且将不同之处加以修改，插槽就是用来修改不同之处的。 2.插槽的基本使用 -在template标签中使用slot标签 -插槽中可以使用默认值 -如果有多个值，同时放入到组件进行替换时，一起作为替换元素 3.编译作用域 -父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译，所以变量是否显示的关键在于它本身的作用域中是否有这个变量。 4.具名插槽和作用域插槽 -可以在slot标签中设置name=“abc”,然后使用v-slot:abc对有name的slot进行匹配，再一一对应的进行组件设置。 -可以在slot标签中设置 ：aaa:“需要获取的变量名” ,再使用v-slot=“用来接收数据的变量名(bbb)”，使用bbb.aaa就可以在父组件中使用子组件作用域内的变量 -v-slot要在template标签中使用

三、模块化开发 1.前端代码复杂可能带来的问题 -如果在多人开发的时候，其他人也跟我们一样，赋值了一个相同名字的变量，并且设置的是全局变量，那么就会引起一些BUG. 2.模块化核心（导出和导入） -CommonJS 3.ES6的模块化（export和import） -ES6当中给引入的的外部script添加type=“module” -每个js都是一个模块 导出的方式一：export{flag,sum}； 导出的方式二: export let num1=100; 导出的方式三：export function sum(a,b){return a+b} 导出的方式四 export Class Person{ } 导出default ： const foods=“烧麦” export default foods； 导入的方式一：import{flag,sum}from ‘./aaa,js’ 导入全部属性：import * as aaa ‘./aaa.js’，aaa是一个对象，相当于所有导出的变量都在aaa这个对象的属性里 导入default ： import 自命名 from ‘./aaa.js’

四、webpack简介 1.webpack的概念 -如果工程模块依赖非常简单，甚至没有用到模块化的概念，只需要进行简单的合并、压缩，就是用grunt/gulp即可。但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack。 2.webpack与grunt/gulp的区别 -grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心 -webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能 3.webpack和node和npm的关系 4.webpack的一些命令 -一开始在node环境下安装的webpack是一个全局webpack，为了更好的去开发项目，我们还需要创建一个本地webpack，可以使用 npm install webpack@版本 --save-dev （开发依赖）或 --save（运行依赖） -我们需要在项目中配置一个webpack.config.js文件作为配置文件，在node环境中使用npm init进行初始化，在生成的package.json文件中的“scripts”对象里去添加一些东西，方便我们直接使用npm run XXX 运行项目

五.loader 1.loader -之前我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是在开发中，我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css。对于webpack本身的能力来说，这些转换是不支持的。 -此时我们就需要给webpack扩展对应的loader 2.loader使用过程 -步骤一：通过npm安装需要使用的loader -步骤二：在webpack.config.js中的modules关键字下进行配置 3.加载css、less等loader webpack中文网站 4.配置图片

5.babel的使用 -在webpack中，我们希望将ES6语法转换成ES5，那么就需要使用babel -而在webpack中，我们直接使用babel对应的loader就可以了 安装语法：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

六、使用webpack配置Vue 1.vue的npm安装和引入 -语法 : npm install vue -save （这里是因为vue既要在开发时依赖，又要在运行时依赖） -使用import Vue from ‘vue’ 这里是因为node_modules中导出了一个default的vue。

2.vue在构建最终发布版本时，构建了两类版本 -runtime-only-> 代码中，不可以有任何的template -runtime-compiler->代码中，可以有template，因为有compiler可以用于编译template

-解决办法： 3.创建vue文件夹 -可以把vue相关的代码抽离出来，每一个vue文件都是一个组件，最后会形成一个树结构。

4.省略后缀的方法（extensions） -resolve:{ // alias：别名 extensions:[’.js’,’.css’,’.vue’], alias:{ ‘vue$’:‘vue/dist/vue.esm.js’, } } 七、plugin 1.plugin是什么？ -plugin是插件的意思，通常是用于对某个现有的架构进行扩展。 -webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。 2.loader和plugin的区别 -loader通常是用于转换某些类型的模块，它是一个转换器 -plugin是插件，它是对webpack本身的扩展，是一个扩展器 3.plugin的使用过程： -步骤一：通过npm安装需要使用的plugins -步骤二：在webpack.config.js中的plugins中配置插件 4.添加版权的plugin（webpack自带的BannerPlugin插件） -在webpack.config.js中先导入一下webpack const webpack =require(‘webpack’）; 5.HtmlWebpackPlugin插件 -我们知道，在真实发布项目时，发布的是dist文件夹的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以用HtmlWebpackPlugin插件 -HtmlWebpackPlugi插件可以自动生成一个index.html模板（可以通过template：来指定一个模板），还可以将打包的js文件，自动通过script标签插入到body中

6.uglifyjs-webpack-plugin插件 -在项目发布之间，我们必然需要对js等文件进行压缩处理，这里，我们就要对打包的js文件进行压缩 -可以使用第三方插件uglifyjs-webpack-plugin，并指定版本号1.1.1和CLI2保持一致

7.搭建本地服务器 -可以使用npm install --save-dev [email protected]版本（这里是因为webpakc使用的是3.6.0版本，需要与webpack版本保持一致即可） -devserver也是作为webpack中的一个选项，选项本身可以设置一些属性：contentBase：为哪一个文件夹提供本地服务，默认是根文件夹， port：端口号 ，inline：页面实时刷新 ， historyApiFallback：在SPA页面中，依赖HTML5的history模式 -可以使用node_modules.bin\webpack-dev-server(注意终端要用反斜杠进入绝对路径)或在package.json文件里面配置一下"dev":“webpack-dev-server” ,这两种方式可以进入搭建的本地服务器

8.对webpack可以进行配置分离