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 的组件. 因 ...
随机推荐
- hdu 1241Oil Deposits(BFS)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...
- 新建一个express工程,node app无反应
1.问题描述 新建一个express工程,node app以后无反应,浏览器输入localhost:3000,显示如下 2.解决方法 在app.js文件中加入如下代码 app.listen(3000, ...
- python中正则用法举例
一.根据正则表达式替换字符串 import re text='abc123' text=re.sub(r'\d','-',text) print(text) 输出:abc---将每个数字替换为-,如果 ...
- linux下暴力破解工具hydra【转】
一.简介 Number one of the biggest security holes are passwords, as every password security study shows. ...
- monkey测试===Android测试工具Monkey用法简介(转载)
Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试.Monkey ...
- 【jzoj2017.8.21提高组A】
太菜了,刷刷NOIP题玩玩. 今天的题好像以前有做过(雾) A. #include<bits/stdc++.h> typedef long long ll; ],cnt; ll x; in ...
- C#ActiveX安装项目
C#开发的ActiveX控件发布方式有三种: 制作客户端安装包,分发给客户机安装: 制作在线安装包,客户机联机安装: 使用html中object的codebase指向安装包地址. 以下为制作安装包: ...
- NOIP 2012 Day1
tags: NOIP 模拟 倍增 高精 Python categories: 信息学竞赛 总结 Luogu P1079 Vigenère 密码 Solution 表示并不是很懂其他人发的题解. 我是这 ...
- 外部div不能包裹内部div的问题
转自http://www.du52.com/text.php?id=362 当设计网页时,如果内部div全部设置css属性float为左右浮动,那么外部div将不能包裹内部div 解决方法 1.在内部 ...
- MySQL的七种join
转载 原文地址 建表 在这里我们先建立两张有外键关联的两张表: CREATE DATABASE db0206; USE db0206; CREATE TABLE `db0206`.`tbl_dept` ...