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组件续和前端工程化的更多相关文章
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
- Vue组件template模板字符串几种写法
在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- webpack4.x + vue2.x 构建前端工程化(1)
本篇文篇纯属个人笔记,实现工程化打包(用打包后的文件可以正常渲染页面),后续继续更新配置开发环境与生产环境,如果有不合理的地方还望各位指点! 不用脚手架,直接用vue和webpack搭建前端工程化项目 ...
- 前端工程化(三)---Vue的开发模式
从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
- python 全栈开发,Day90(Vue组件,前端开发工具包)
昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- 阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)
1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...
随机推荐
- 生成应用的快捷方式action,权限
action:"com.android.launcher.action.INSTALL_SHORTCUT" 权限:com.android.launcher.permission.I ...
- 新建一个express工程,node app无反应
1.问题描述 新建一个express工程,node app以后无反应,浏览器输入localhost:3000,显示如下 2.解决方法 在app.js文件中加入如下代码 app.listen(3000, ...
- Linux汇编教程01: 基本知识
在我们开始学习Linux汇编之前,需要简单的了解一下计算机的体系结构.我们不需要特别深入的了解,理解了一些基本概念对与我们理解程序会很有帮助.现在计算机的结构体系都是采用冯诺依曼体系结构的基础上发展过 ...
- HDU 5136 Yue Fei's Battle
题目链接:HDU-5136 网上的一篇题解非常好,所以就直接转载了.转自oilover的博客 代码: #include<cstring> #include<cstdio> #i ...
- 2017中国大学生程序设计竞赛 - 网络选拔赛 HDU 6153 A Secret KMP,思维
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6153 题意:给了串s和t,要求每个t的后缀在在s中的出现次数,然后每个次数乘上对应长度求和. 解法:关 ...
- MyEclipse/Eclipse安装插件的几种方式
众所周知MyEclipse是一个很强大的Java IDE,而且它有许多开源免费又好用的插件,这些插件给我们开发过程中带来了许多方便.插件具有针对性,例如,你如果做安卓开发,可能需要一个ADT(Andr ...
- ubuntu在vim编辑时,方向键无法正常使用
/* 如果在普通用户下. */ [frankie@localhost ~]$ sudo apt-get install vim [frankie@localhost ~]$ cd /etc/vim [ ...
- Vim配置Node.js开发工具
ubuntu安装vim编辑器.默认情况下,vim在运行的时候会加载-/.vimrc文件里的配置文件,如果在-目录下不存在这个配置文件可以手动创建. 在-/.vim目录下是vim的插件加载的位置,可以在 ...
- php设计模式三-----建造者模式
1.简介 意图:将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 主要解决:主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子 ...
- POJ-1830
开关问题 Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6294 Accepted: 2393 Description ...