1 Vue 组件
1.1 组件基础
一个组件就是一个Vue实例
根实例就是根组件
//全局组件
Vue.component('组件名', {
})
//局部组件
{
components: {
'组件名': {
}，
'组件名': {
}
}
}
/*
页面组件 一般是局部组件
页面的组成部分 一般就是全局组件
*/
//使用组件 写在模板中
<组件名></组件名>
1.2 组件通信
父组件向子组件通信
通过 props
{
props: [属性,属性2]
props: {
属性: 类型,
属性: 类型
}
props: {
属性: {
type:类型,
default:默认值,
required: 是否必须
....
}
}
}
props里定义的属性 与 data中定义的属性 具有相同地位
<my-component 属性名="值">
子组件向父组件通信
//子组件中
this.$emit('事件名', 传值)
//父组件 的模板中
<my-components @事件名="方法">
day22
1.3 插槽 slot
template: `
<button> <slot></slot> </button>
`
<my-button>内容</my-button》
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
//调用组件
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>
1.4 动态组件
<component is="组件"></component>
<keep-alive>
<component is="组件"></component>
</keep-alive>
1.5 组件注意事项
<table>
<tr is="组件名"></tr>
</table>
给组件标签 设置的class和style 会自动添加到 组件模板的根元素上
在组件标签上添加原生事件 <my-component @click.native="">
实现prop的双向数据绑定 :属性名.sync
子组件要配合, $this.$emit('update:属性名', 新值)
2 前端工程化
2.1 支持环境 Node
node.js JavaScript的解释器
用于后端开发
作为前端工具的支持环境
2.2 NPM 包管理工具
包管理工具
集成在node.js中，不需要单独下载
前端的一切资源都可以都过npm下载 包括 各种前端工具(webpackgrunt...) 各种前端资源(jqueryootstrap...)
npm install 包名 本地安装（本项目目录） （资源类）
npm install -g 包名 全局安装（命令行工具）
npm uninstall 包名 删掉本地的包
npm uninstall 包名 -g 删除全局安装的包
#项目初始化
npm init
创建一个package.json 里面是对项目的描述，指定依赖
项目中的node_moudules 目录 不需要上传
运行 npm install 自动安装项目所有的依赖（存在package.json）
npm install 包 --save 下载包的同时，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下载包的同时，加入到package.json中的 `devDependencies` 开发阶段的依赖
2.3 模块化工具
-
webpack
-
Browserify
把前端所有的资源当做模块，向引入模块一样去使用
2.4 自动化工具
集成各种应用：代码压缩、图片压缩、编译sass....
-
grunt
-
gulp
-
webpack
3 Vue生成器
集成了webpack、以及其他各种需要的工具
3.1 安装
npm install -g @vue/cli 安装3.x
npm install -g vue/cli 安装的2.x
3.2 使用
vue create 项目名称 自动生成项目的目录
3.3 包含的东西
webpack
babel 把ES6编译成ES5
eslint 代码语法规范
TypeScript 负责把TypeScript编译成JavaScript
Router(vue-router Vue全家桶成员) 路由
Vuex(Vue全家桶成员) vue状态管理
CSS Pre-processors CSS预处理 会让你再次选择器(SASS、LESS、Stylus...)
Linter / Formatter 语法检查
Unit Testing 单元测试
E2E Testing 端到端测试
2.4 命令
npm run serve 临时编译，创建临时服务器 loacalhost:8080
npm run build 编译，生成dist目录
4. 前端的集成环境 WebStorm
5 项目目录结构
|- node_modules
|- public
|- index.html
|- assets 静态文件 图片、字体
|- src
|- components 普通组件(局部)
|- HelloWorld.vue
|- views 页面组件
|- Home.vue
|- About.vue
|- main.js 入口
|- App.vue 总体结构组件
|- router.js 路由设置
|- store.js 状态管理
|- pageage.json
6 Vue全家桶
vue 本身
vue-router 路由
vuex 状态管理
vue-ssr 服务端渲染
element-ui vue样式组件库