第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

//在npm上發(fā)布第三方組件庫

//配置package.json

"description":"組件庫描述"，
"main":"dist/index.umd.js",?//組件庫入口文件
"keywords":{??//關鍵詞，方便用戶搜索
????"mooc-ui",
????"vue",
????"ui"
},
"author":"Inthur",?//作者
"files":?[?//需要發(fā)布的文件
????"dist",
????"components"
],

//README.md對組件庫描述

//終端登錄npm 發(fā)布

npm?login

npm?publish

//安裝gulp

npm?i?gulp?gulp-sass?gulp-minify-css?-D

//新建gulpfile.js

const?gulp?=?require('gulp');
const?sass?=?require('gulp-sass');
const?minifyCSS?=?require('gulp-minify-css');

gulp.task('sass',?async?funtion(){
????return?gulp,src('components/css/**/*.scss')
????.pipe(sass());?//將sass轉(zhuǎn)成css
????.pipe(minifyCSS());?//壓縮
????.pipe(gulp.dest('dist/css'));?//輸出到打包目錄
})

//新建index.scss樣式匯總

@import?"./demo.scss";
@import?"./card.scss";

//在package.json中配置

"scripts":{
????"build:css":"npx?gulp?sass"
????"build":?"npm?run?build:js?&&?npm?run?build:css"
}

//安裝 vue-loader

//webpack配置文件，新建webpack.component.js（自定義命名）

const?{?VueLoaderPlugin?}?=?require('vue-loader');
const?path?=?require('path');//絕對路徑
const?glob?=?require('glob');//遍歷
const?list?=?{};

async?function?makeList(dirPath,list){
????const?files?=?glob.sync('${dirPath}/**/index.js');?//dirPath下所有index.js路徑的數(shù)組
????for(let?file?of?files){
????????const?component?=?file.split(/[/.]/)[2];?//獲取組件name
????????list[component]?=?'./${file}';?//填充list
????}
}
makeList('components/lib',list);

//files?=?['components/lib/card/index.js','components/lib/demo/index.js']
//list?=?{
//????card:'components/lib/card/index.js',
//????demo:'components/lib/demo/index.js',
//?}


module.exports?=?{
????entry:?list,?//入口
????mode:?'development',
????output:?{
????????filename:?'[name].umd.js',?//輸出文件名
????????path:?path.resolve(__dirname,?'dist'),??//輸出目錄
????????library：'mui',?//配置到該字段下
????????libraryTarget:?'umd'?//打包成umd模塊
????},
????plugins:?[?//處理Vue文件
????????new?VueLoaderPlugin(),?
????],
????module:?{
????????rules:?[
????????????test:/\.vue$/,?//對vue文件使用vue-loader
????????????use:?[
????????????????{
????????????????????loader:?'vue-loader',
????????????????}
????????????]
????????]
????}
}

//package.json配置打包命令

"scripts":?{
????"build:js":?"webpack?--config?./webpack.component.js"
}

//配置組件庫入口index.js

//引入組件庫中定義的所有組件
import?Demo?from?'./demo';
import?Card?from?'./card';

const?components?=?{
????Demo,
????Card,
};

const?install?=?function?(Vue)?{
????if(install.installed)?return;?//避免重復安裝
????Object.keys(components).forEach(key?=>?{
????????Vue.component(components[key].name,?components[key]);?//對所有key值用component注冊
????});
}

const?API?=?{
????install,
}

export?default?API;?//導出

//打包

npm?run?build:js

//模塊化演進過程

一

二

三

四、文件模塊化

//CommonJS適用于服務端

//AMD適用于瀏覽器

//組件調(diào)用

<m-card?
????imgSrc="img.png"
????summary="卡片概要"
/>

<m-card?????
????imgSrc="img.png"????
????summary="卡片概要">????
????<template?v-slot:footer>????????
????????<div??class="footer">????????????
????????????<div?class="level">528人報名</div>????????????
????????????<div?class="price">￥299.00</div>????????
????????</div>????
????</template>
</m-card>

<m-card?????
????imgSrc="img.png"?
????:width="370"
????:imgHeight="90"???
?>????
?????插槽類型卡片概要
????<template?v-slot:footer>????????
????????<div??class="footer-spring">????????????
????????????<div?class="level">528人報名</div>????????????
????????????<div?class="level">1096收藏</div>??????????
????????</div>????
????</template>
</m-card>

<style>
.footer{
????padding:?0?8px;
????font-size:?12px;
????text-align:?left;
}
.level{
????color:#9199a1;
????margin-bottom:?8px;
}
.price{
????color:#f01414;
}
.footer-spring{
????display:?flex;
????justify-content:?space-between;
????padding:?0?8px;
????font-size:?12px;
}
</style>

<template>
????<div?class="m-card"?:>
????????<div?class="m-card-img"?:>
????????????<img?:src="imgSrc"?alt="img"?/>
????????</div>
????????<div?v-if="summary"?class="m-card-summary">
????????????{{summary}}
????????</div>
????????<div?v-else?class="m-card-summary">
????????????<slot></slot>
????????</div>
????????//用戶自定義卡片footer
????????<slot?name="footer"></slot>
????</div>
</template>

<script>
export?default?{
????name:?'m-card',
????props:?{
????????width:?{?//卡片寬度
????????????type:?Number,
????????????default:?0,
????????}，
????????imgSrc:?{?//卡片圖片資源地址
????????????type:?String,
????????????default:?'',
????????}，
????????imgHeight:?{?//卡片圖片高度
????????????type:?Number,
????????????default:?0,
????????}，
????????summary:?{?//卡片概要
????????????type:?String,
????????????default:?'',
????????}，
????}
}
</script>

.m-card{
????width:270px;
????border-radius:8px;
????background:#fff;
????overflow:hidden;
????box-shadow:0?6px?10px?0?rgba(95,101,105,0.15);
????padding-bottom:8px;
????&-img{
????????height:152px;
????????img{
????????????width:100%;
????????????height:100%;
????????}
????}
????&-summary{
????????padding:8px;
????????text-align:left;
????????font-size:14px;
????}
}

//組件通用

//main.js項目入口

//文件結(jié)構(gòu)

//vue配置 新建 vue.config.js

module.exports?=?{
????pages:?{?//配置
????????index:?{?//主頁入口
????????????entry:?'examples/main.js',?//入口文件
????????????template:?'public/index.html',?//模板
????????????filename:?'index.html'?//?文件名
????????}
????}
}

//組件導出

//安裝sass

npm i sass-loader@5 -D

npm i node-sass -D

//main.js 引入樣式和組件

// 安裝腳手架

npm install -g @vue/cli

vue --version

//創(chuàng)建項目

vue create project-name

//啟動項目

npm run serve

修改vue.config.js

此文件的詳細介紹：https://www.jianshu.com/p/b358a91bdf2d

使用vue-cli生成的項目是面向業(yè)務的，需要修改結(jié)構(gòu)以適應組件庫的要求。

?

安裝vue-cli

創(chuàng)建一個項目

發(fā)布

REDAME文件的編寫

description:描述

main：入口文件

keywords:npm搜索這個包的關鍵字

files：所要發(fā)布的文件，由于后期會查看源碼因此將component文件也發(fā)布上去

1. 在css文件夾下設置一個inde文件，將各個sass文件引入，這樣打包出一個css文件

2. 在package命令中重新設置命令，使js打包和css打包一起執(zhí)行

3.