一.创建angular项目 ng new myFirstDemo //angular-cli新建项目ng g m testm //新建模块ng g c testm/headertest //新建组件 提示:组件必须到处去 @NgModule({ imports: [ CommonModule ], declarations: [HeadertestComponent], exports: [HeadertestComponent] //新添加的部分 }) 二.安装ng-packagr npm i

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附上大佬的文献:https://blog.csdn.net/qq_40513881/article/details/82494958 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue ini

使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来会明白的. 我们能从中能得到什么收获? 自动生成项目结构 自动生成组件库的组件.模块和服务 自动生成组件库的测试用例 在打包组件库之前会自动生成对应的测试环境测试组件库中的组件 自动打包组件库为 Angular Package 的标准格式 准备工作 首先,安装 Angular CLI ,如下所示:

摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择! DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎Star) 引言 作为前端开发者,随着公司业务的不断发展

目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 npm : 6.14.6 IDE: Visual Studio Code 1. 概要 当我们完成angular的开发后,如何部署到服务器呢? 2. 编译打包 2.1. 基本打包命令 基于Angular

一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后项目目录结构如下: 二.在项目的根目录新建一个packages文件夹,用于存放需要发布的组件. 三.支持对package目录的处理,在vue.config.js文件中修改配置中的chainWebpack选项. const { defineConfig } = require('@vue/cli-se

Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来来.

基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]="msg" 事件绑定: vue: v-on:click="handleChange($event)" @click="handleChange" react //第一种方法 constructor(){ this.handleChange=this.

前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 angular改造 1.搭建angular项目步骤省略了,可以自行查询ng官方文档 2.创建一个chart-js的组件 ng g c chart-js chart-js.component.html <div style="display: block; height: 100%"&g

组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild) 2非父子组件(Service/localStorage) 3还可以利用Session等服务器端的解决方法 Angular组件间通讯方法: 1.父子组件之间的通讯 @Input:是属性绑定,父组件向子组件传递数据 @Output:是事件绑定,子组件向父组件传递数据的同时触

angular组件样式修改不成功! 自己定义的css可以成功 组件的不行 style在模板字符串里 直接没有 class 是显示的 但是样式不生效 加上面 即可,为什么?我也不太清楚.有知道答案的请回复,万分感激 - - - - -- - -- - - -- - -- -- -- - --- -- - - --- -- - -- -- - - -- - -- - -- - --------------------------------------------------------------

angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的组件里面,如果其他组件使用的话,直接调用即可. 创建服务组件:ng g service 路径(例如:services/storage) 2.配置服务组件: (1).在app.module.ts里面配置,引用service import {StorageService} from "./service

我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变量 模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component. 使用井号 (#) 来声明引用变量. #phone 的意思就是声明一个名叫 phone 的变量来引用 元素 这种方式适合组件间有依赖关系. app component <ap

在项目中有些组件在各个项目中都会调用,那么将组件发布到npm ,用到的项目去下载,这样会省去一些不必要的麻烦. 将组件发布到npm 中的步骤 做个记录 1.项目的创建,我这里使用 vue init webpack-simple 项目名 2修改文件目录 , 创建 components 文件夹 创建 main.vue  在根目录创建 index,js 3.修改文件内容 和配置 main.vue是一个组件  就按照组件的格式去写 index.js  的内容 注意引用的组件中一定要写name 属性 在组

承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板的弹窗组件 使用方法 基本项目结构 因为打算将我们的popup弹窗设计为在npm托管的包,以便其他项目可以下载并使用,所以我们的启动项目大概包含如下结构: package.json // 定义包的基本信息,包括名字.版本号.依赖等 tsconfig.json // angular项目基于typesc

一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-table为例): { "name": "scroll-antd-table",//包的名称用于别人 npm install xxxx的时候使用 "version": "1.0.0",//包的版本号 "description

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,

第一步,新建组件: ionic g component product-img-list 命令执行成功之后项目中生成的文件: 第二步:生成文件解析: ①product-img-list.ts import { Component, Input } from '@angular/core'; @Component({ selector: 'product-img-list', templateUrl: 'product-img-list.html' }) export class ProductI

设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式. 一.中间人模式 该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色.顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯.依次类推,组件2是组件4和组件5的中间人.组件3是组件7和组件8的中间人. 中间人负责从一个组件接收数据并将其传递给另一个组件. 二.例子 股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按

组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life.co