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. 生成应用的快捷方式action,权限

    action:"com.android.launcher.action.INSTALL_SHORTCUT" 权限:com.android.launcher.permission.I ...

  2. 新建一个express工程,node app无反应

    1.问题描述 新建一个express工程,node app以后无反应,浏览器输入localhost:3000,显示如下 2.解决方法 在app.js文件中加入如下代码 app.listen(3000, ...

  3. Linux汇编教程01: 基本知识

    在我们开始学习Linux汇编之前,需要简单的了解一下计算机的体系结构.我们不需要特别深入的了解,理解了一些基本概念对与我们理解程序会很有帮助.现在计算机的结构体系都是采用冯诺依曼体系结构的基础上发展过 ...

  4. HDU 5136 Yue Fei's Battle

    题目链接:HDU-5136 网上的一篇题解非常好,所以就直接转载了.转自oilover的博客 代码: #include<cstring> #include<cstdio> #i ...

  5. 2017中国大学生程序设计竞赛 - 网络选拔赛 HDU 6153 A Secret KMP,思维

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6153 题意:给了串s和t,要求每个t的后缀在在s中的出现次数,然后每个次数乘上对应长度求和. 解法:关 ...

  6. MyEclipse/Eclipse安装插件的几种方式

    众所周知MyEclipse是一个很强大的Java IDE,而且它有许多开源免费又好用的插件,这些插件给我们开发过程中带来了许多方便.插件具有针对性,例如,你如果做安卓开发,可能需要一个ADT(Andr ...

  7. ubuntu在vim编辑时,方向键无法正常使用

    /* 如果在普通用户下. */ [frankie@localhost ~]$ sudo apt-get install vim [frankie@localhost ~]$ cd /etc/vim [ ...

  8. Vim配置Node.js开发工具

    ubuntu安装vim编辑器.默认情况下,vim在运行的时候会加载-/.vimrc文件里的配置文件,如果在-目录下不存在这个配置文件可以手动创建. 在-/.vim目录下是vim的插件加载的位置,可以在 ...

  9. php设计模式三-----建造者模式

    1.简介 意图:将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 主要解决:主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子 ...

  10. POJ-1830

    开关问题 Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6294   Accepted: 2393 Description ...