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下载 包括 各类前端工具(webpack\grunt...) 各类前端资源(jquery\bootstrap...) 

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样式组件库