Vue脚手架和组件开发

cli脚手架：基于webpack的vue官网脚手架，内置许多模板和工具，可以快速创建项目，以选项的方式选择版本，扩展插件（eslint，babel）。

纯webpack需要自己配置每个插件：webpack.config.js里的module: {        loaders: [        {        test: /\.js$/, loader: "        "        }        ]},和plugins: {        }

npm：node包管理器（类似应用商店安装应用，通过npm安装各自包） npm install 包名(@vue/cli) -g(全局)

创建项目：vue create 项目名

一些命令：npm run serve（本地服务器运行）

静态资源服务器：npm i serve -g 用法：serve 文件夹

npm镜像：npm install -g cnpm --registry=https://registry.npmmirror.com

组件的定义和使用：

组件(.vue):定义后导入到根组件，仅有根组件有el。

拥有template、script、style（scoped仅在此.vue使用样式）导出为script：export default{}

在根组件导入为script：import 组件名 from 路径；export default{        components:{ 组件名 }        }

使用为：template：<组件名/>

原理：检测到<组件名/>后，new一个vue实例

组件的交互（数据）：

父传子：利用bind和props

父：<组件名 父组件传值：        或者v-bind：父组件传值名 = "    绑定的响应式数据    " />

子：export default{        props：{子组件接值：        （对象形式）{ type：[ String，Number ]，        defaukt：100 }        }        }其中，父传值名 = 子接值名

若必选则required设置为true

子传父：使用自定义事件

this.$emit(        '自定义事件名称'        )用于触发自定义事件

在父组件中设置@自定义事件名称，绑定为父组件某一方法，即可将数据传到父组件

子：设置一个触发事件，触发事件绑定一个方法v-on：n方法

n方法为（）{            this.$emit(        '自定义事件名称' ，子传值       )}

父：<组件名 v-on：绑定自定义事件 = 父方法>

父方法（父接值名）{        this.父接值 = 操作逻辑        }

同级传：子传父，父传子/EventBus方法（额外Vue实例专门存储数据）/Vuex

组件插槽：父组件可在子组件的slot区域修改内容

子：template:<slot></solt>

具名插槽：设置slot的name属性

在父中使用：<组件名> <template v-slot:设置的名字 或者 #设置的名字        /> <组件名/> 

使用子组件插槽的值时：

子：绑定值<slot  v-bind:绑定值名 ></solt>

父：<组件名> <template  #设置的名字 = "绑定值对象" />{{    绑定值对象.绑定值名    }} <组件名/>