vue组件续和前端工程化

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   状态管理 
|- package.json

6 Vue全家桶

vue 本身
vue-router  路由
vuex        状态管理
vue-ssr     服务端渲染

element-ui   vue样式组件库