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. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  2. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  3. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  4. webpack4.x + vue2.x 构建前端工程化(1)

    本篇文篇纯属个人笔记,实现工程化打包(用打包后的文件可以正常渲染页面),后续继续更新配置开发环境与生产环境,如果有不合理的地方还望各位指点! 不用脚手架,直接用vue和webpack搭建前端工程化项目 ...

  5. 前端工程化(三)---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  6. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  7. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  8. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  9. 阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)

    1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...

随机推荐

  1. kndo grid:通过checkbox 实现多选和全选

    在kendo grid 里要想通过checkbox 实现多选和权限,我们就要通过templeate 和input 标签对kendo grid 进行自定义 1. 在column 里面加入一列checkb ...

  2. Linux目录结构与文件权限——(五)

    1.目录结构

  3. CMD命令行下载文件

    远程执行sct的另一种姿势 cscript /b C:\Windows\System32\Printing_Admin_Scripts\zh-CN\pubprn.vbs 127.0.0.1 scrip ...

  4. 给windows设置隐藏文件夹的方法

    cls @ECHO OFF title Folder Private if EXIST "HTG Locker" goto UNLOCK if NOT EXIST Private ...

  5. 如何使用vux创建vue项目

    1.安装vue-cli,通过vue-v可以查明 安装vue-cli步骤 vue init airyland/vux2 projectPath(项目名字) 2.安装依赖模块 方法1:npm instal ...

  6. FineReport——自定义控件实现填报提交事件和校验

    在报表内部或者在引用报表的HTML页面,定义一个按钮标签,通过FR提供的方法实现提交功能. <button onclick="_g('${sessionID}').writeRepor ...

  7. [ 总结 ] Linux系统启动流程

    Linux系统启动过程分析: 按下电源 --> BIOS自检 --> 系统引导(lilo/grub) --> 启动内核 --> 初始化系统 --> 用户登录 1. BIO ...

  8. Fel表达式实践

    项目背景 订单完成后,会由交易系统推送实时MQ消息给订单清算系统,告诉清算系统此订单交易完成,可以进行给商家结算等后续操作. 财务要求在交易推送订单到清算系统时和订单清算系统接收到订单消息后,需要按照 ...

  9. JAX-RS Resteasy

    JAX-RS (JSR-311) 是为 Java EE 环境下的 RESTful 服务能力提供的一种规范.它能提供对传统的基于 SOAP 的 Web 服务的一种可行替代. https://www.ib ...

  10. redis之(一)redis的简单介绍

    [一]:概念 --->Redis是一个开源的,高性能的,基于键值对的缓存与存储系统 --->Redis数据库中的多有数据都存储在内存中,由于内存的读写速度远快于硬盘,一秒读写超过10万键值 ...