vue2
通信：
子传父注意3个地方：子有props用来定义变量名和限制，在使用时把父的变量赋值给props里面的变量，注意这2个变量名cmovies和cmessage必须是小写，不能采用驼峰命名法，因为当前的vue不支持:
具体的：现在Vue实例作为父组件拥有一个movies和messege数据，想传递个子组件，此时要给子组件cpn多添加一个props属性，里面定义了2个变量，接着在cpn标签里面添加v-bind来通过这2个变量把父组件的movies数据和message数据接收过来，此时在模板中就能用这2个变量了
技巧：使用Vue实例的变量时直接看data｛｝里面的变量名，使用组件当中的变量直接看data函数的return｛｝里面的变量名
props中的变量添加限制，假定没有给变量传过值来，则模板那里就使用默认值：
子传父数据：在子组件的btnClick(item)里面通过emit给父组件发射一个自定义事件，第一个是自定义的事件名称，第二个是参数，而父组件要对子组件自定义的事件item-click进行监听，然后用自定义的cpnClick函数进行处理：
简而言之：当子组件触发事件时，emit一个事件，然后在子组件标签中写上@事件=父组件的函数，此时就会调父组件的函数了
父组件访问子组件：
可以通过$children，也可以给cpn添加ref属性（最常用），这样this.$refs就能拿到拥有ref属性的子组件：
在子组件中的methods里面使用this.$parent可以访问到父组件，this.$root可以访问到根组件
插槽：
在template中定义一个<slot></slot>，相当于占了一个坑，之后在使用组件的时候在标签里面所填的东西会自动放到slot的位置上：
在slot标签里也能放东西，则在使用组件时，不在组件中填写东西则默认用slot里面的，如果填了则覆盖默认值：
具名插槽：根据slot的名字选择对应的slot进行替换：
编译作用域：
cpn是属于Vue实例的，所以它里面的isShow看的是Vue实例的isShow:true，而template里面的isShow是属于template的，所以它看的是组件里面的isShow:
在script标签里面写入type="module"就能使得它成为一个独立的单元，里面定义的变量不会被外面的文件访问到
对于单独的aaa.js文件而言，通过export可以将自己的文件变量导出，如果mmm.js里面想用aaa.js的变量则需要import进来：
第二种导出方式：
第三种导出：
默认导出和导入，此时只能把一个变量导出，不过在另一个文件导入时，就不用导出的那个变量名了，可以自己取给变量名字：
若想全部导入，并用一个自定义变量aaa来接收：
webpack：
把js,css等文件翻译成浏览器能读懂的js,css文件，比如某些浏览器看不懂es6语法
它可以自己把相关联的js文件转换成1个js文件
新建src和dist文件夹，src里面有html，js，几个js文件相互引用，现在只要执行下面命令，就能让webpack根据main.js所关联的js文件，生成一个新的js文件到dist，然后在html里面直接<scrip src="">即可
如果不想输入这么麻烦的命令，则需要再另建一个webpack配置文件，里面写上：源入口地址和出口地址，注意path里面的东西是生成目标文件的绝对路径，此时直接输入webpack就好了：
如果也不想写webpack，那么在package.json（npm init 可以生成）里面的script定义一个别名，然后直接输入命令npm run build就能进行模块打包了
总结此时的过程：npm run build去package.json里面找到build对应的webpack
然后执行它，接着去webpack.config.js里面找到相关的配置，然后找到源js文件，接着看看都有哪些文件被关联了，然后整理转换成1个js文件并放到webpack.config.js所指明的文件中：
本地安装webpack，如果一直用全局的webpack，那么对于有些项目，它们可能不支持全局的webpack的版本
则需要单独给自己的项目进行本地安装。如果直接输入webpack，则它会先找全局的webpack
但是如果使用定义别名然后npm run的方式，则优先使用本地的webpack：
由于单独的webpack无法处理css文件，所以还需要安装loader，参考网站后:
安装2个loader：
在上面的配置文件中加入module：
在main.js中引用css:
接着输入：npm run build，这样css也写到了dist的那个js文件中
新建less文件：
在main.js中依赖它：
查看文档，安装less相关：
修改配置文件：
测试：在main.js中加入一行：
再输入npm run build 命令，然后打开浏览器
放几张图片然后设置背景：
安装：
修改配置文件：
输入npm run build
注意：
所以：
由于大的图片被当做文件模块在dist文件夹里面新建了出来，而翻译后的图片的url没有定位到dist，所以需要修改配置文件使得所有url前面都会加上dist/，这样就能找到图片了
此时输入npm run build。
为了把src/img/a.png在经过webpack处理后能放到dist/img/a.8位哈希值.保留原来后缀，此时需要修改问配置文件加上name属性，然后再build：
结果：
ES6转为ES5：
安装:
修改配置文件再build：
安装vue：
由于vue有2种版本，我们要用第二种版本来编译template，所以要配置一下resolve，否则会默认用第一个版本：
配置：
再安装2个组件，一个用于加载vue，一个用于编译：
配置：
因为一些高版本可能会要求安装其他插件，改动一下package.json里面的vue版本到低版本，然后npm install
主要代码：
在main.js里面new一个根组件，以后都把其他要用的组件注册过来即可，根组件联系html里面的#app的div，也是众多组件的容器。
注意vue不用写路径，因为会自动去node_modules下找vue。
假定一会儿要创造一个App组件放过来，此时在main.js里，假定通过App.vue里面的name变量知道它叫App，此时然后import进来，再注册这个App组件。
注意到：所有组件都采用了template来定义自己组件的内容。
App.vue里面的name是什么，此处就用什么，name就代表了这个App.vue了：
创建App组件文件：
build运行。
再创建一个Cpn.vue:
在app.vue里面引用它：
如果不想在引用时写.vue的话，那么需要配置extension：
html：
loader用于加载和转换文件，Plugin插件用于扩展功能，下面是配置添加版权信息的代码，然后再build，再打开dist/bunndle.js查看：
打包html到dist：
配置，还要指定到index.html里面根据<div>在最终的生成结果里面也生成div：
这里的index.html是源html：
由于最终生成的index.html里面会有script标签，则源html里面就不需要script：
build之后查看dist里面的html，发现此时并不需要路径拼接了 ，则注释掉，再清空掉dist然后build：
压缩js
安装：
配置再build，然后查看bunndle：
利用插件搭建本地服务器，之后就能自动编译，每次改动文件都不必build：
安装，注意这个插件配3.6.0的webpack：
配置devServer：
为了方便，配置package.json里面的script，然后npm run dev，此时根据提示信息到服务器网站去访问:
测试：此时不用再手动编译了，只要更改了文件，就能自动编译，加入一行document....接着查看，一会儿再删掉这行继续查看按钮有没有消失：
如果在npm run dev之后，不用手动赋值服务器地址，则可以在package.son里面加入--open，之后npm run dev就能自动打开浏览器显示了:
配置文件的分离：
新建文件夹，里面放3个配置文件，分离webpack.conf.js配置文件，base存储既有开发也有运营的配置，dev存储开发的，prod存储运营的配置
然后下载一个东西，这个东西用于合并配置文件，然后把它写在prod和dev里面，让它合并base：
然后删掉webpack配置文件，修改package.json的scripts：
此时输入npm run build，再试一下npm run dev
main.js中document测试一下，直接保存查看浏览器即可：
CLI:
安装cli3:
为了使用cli2，还得安装：
使用cli2初始化新项目，最后的那个参数是自定义新项目的名字
下面的这个是说要不要对自己写的代码进行规范，如果代码写的不规范，那么在编译的时候会报错：
假定yes的话就会有三个规则可以供选择：
再开个终端建立另一个项目，前面是compiler这次是only：
若想改掉ESlink，则修改布尔值：
说明：only的这个项目运行更快。
cli3创建项目：
按空格可以选择使用那些模块，选好后按住enter：
是否要把一些配置放到单独的配置文件中还是package.json里面：
是否把本次的选择保存起来，方便下次进入please pick a preset时，能够多出一个选项，这个选项就是本次的选择：
下次创建项目时，下次会显示：
对应的文件地址：
根据package.json跑起来项目：
启动一个本地服务器，图形化地管理项目：
前端路由：
思想：在前端，如果想通过点击哪个链接哪个就显示哪个，而不需要通过后台，此时需要创造一个组件，并把组件的router-link写入（一般是App,vue），而这个link通过path进而到index.js里面指向组件
cli2 初始化新项目：
上面创建项目时已经安装了路由
为了练习，删掉路router文件夹，然后重建文件夹和js文件：
配置index.js：
注意里面的上面有个：
main.js上挂载起来，此时把原来的根组件App.vue拆分成2个文件，一个放main.js里面，另一个放到App.vue里面，当放组件时，往App.vue里面放：
在components文件夹下创建2个vue文件，随便写点东西：
配置index.js添加路由映射信息：
配置Vue.js显示出2个路由源头，其中router-view表示会在哪里显示组件：
原理说明：main.js中的render会把App.vue拿过来替换el在App.vue中所选的div的内容，然后显示到页面
此时打开浏览器，点击哪个那么对应的url就会显示出来，相应的组件也出来了
原理：router-link中的to表明即将要访问的地址，点击后去index.js里面找到对应的path，然后找到path下面的组件，把该组件渲染到App.vue里面的router-view那里：
为了使得用户在一打开浏览器localhost就显示到home，则需要添加重定向，然后就能找到下面属性值为/home的path：
由于此时的url是hash模式，url中有#号，为了去掉#号，则改为history模式：
此时再用history测试一下看看url：
如果想让显示出来的不是链接，而是按钮，则需要添加tag属性：
由于在点击按钮时，可以点击浏览器左上方的前进和后退箭头，因为默认使用的是history的push，此时改成replace就不会有前进后退了：
由于点击不同的按钮后，对应的button会自动加上一个类名，如果设置一下style就能实现router-link的样式，点击哪个按钮，哪个按钮字体为红色：
如果不想用自动填充的那个长长的类名，向自定义类名为active，则需要配置：
如果不想用router-link，则自己写代码来进行路由跳转。此时唯一不同就是点击之后没法设置类名。如果出错，可能是vue-router的版本过高，此时npm i vue-router@3.0 -S：
如果不想有前进后退，则用replace :
总结：
<router-link to="/nav" replace>导航</router-link>：把/nav拿走给index.js的值为/nav的path匹配
此时想实现动态路由，路由连接上具有参数（它可以来自App.vue），点击之后该参数传到将要显示的路由组件中：
则需要：
为了能够在点击用户时，把App.vue的userId属性显示出来，则需要获取当前活跃路由的参数，再通过computed返回：
要是不想用computed:
