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

巴特西

vue组件续和前端工程化

1.3 插槽 slot

1.4 动态组件

1.5 组件注意事项

2 前端工程化

2.1 支持环境 Node

2.2 NPM 包管理工具

2.3 模块化工具

2.4 自动化工具

3 Vue生成器

3.1 安装

3.2 使用

3.3 包含的东西

2.4 命令

4. 前端的集成环境 WebStorm

5 项目目录结构

6 Vue全家桶

最新文章

热门文章