网站建设需要/关键词优化课程

创建一个vue2项目

npm install -g @vue/cli
vue create xiaoququ-ui

根目录下新建一个plugins文件夹，用来放组件

vue.config.js配置打包规则

const path = require('path')
module.exports = {// 修改 pages 入口pages: {index: {entry: 'src/main.js', // 入口template: 'public/index.html', // 模板filename: 'index.html' // 输出文件}},// 扩展 webpack 配置chainWebpack: config => {// @ 默认指向 src 目录// 新增一个 ~ 指向 pluginsconfig.resolve.alias.set('~', path.resolve('plugins'))// 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的config.module.rule('js').include.add(/plugins/).end().use('babel').loader('babel-loader').tap(options => {// 修改它的选项...return options})}
}

编写组件

• qbutton/qbutton.vue 自定义颜色按钮

<template><div><h1 class="blue">你是二憨憨</h1><button class="btn" :style="{ '--color': color, '--mixColor': mixColor }">按鈕</button></div>
</template><script>export default {name: 'qqButton',props: {color: {type: String,default: '#e83e8c'},},computed: {mixColor() {return this.getRgbNum(this.color, 0.1) // 透明色}},methods: {// 将#ccc#e83e8c转换成 rgb 颜色值[232,62,140]getRgbNum(sColor, percent) {if (sColor.length === 4) {let sColorNew = '#'for (let i = 1; i < 4; i += 1) {// 补全颜色值 例如：#eee,#fff等sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))}sColor = sColorNew}// 处理六位颜色值let sColorChange = []for (let i = 1; i < 7; i += 2) {// 核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))}// return sColorChange.join(',')return 'rgba(' + sColorChange.join(',') + ',' + percent + ')'},},
}
</script>
<style lang='scss' scoped>
$color: var(--color);.btn {padding: 20px 40px;font-size: 30px;color: $color;// background: mix($color, #fff, 10%); // 报错background: var(--mixColor);border: 1px solid $color;border-radius: 10px;
}
</style>

• qbutton/index.js

import qbutton from "./qbutton.vue";
qbutton.install = Vue => Vue.component(qbutton.name, qbutton); //注册组件
export default qbutton;

• plugins/index.js

//引入所有组件
import qinput from "./components/qinput/qinput.vue";
import qbutton from "./components/qbutton/qbutton.vue";//所有组件列表
const components = [qinput, qbutton];//定义install方法，Vue作为参数
const install = Vue => {//判断是否安装，安装过就不用继续执行if (install.installed) return;install.installed = true;//遍历注册所有组件components.map(component => Vue.component(component.name, component));
};//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}export default {install,//所有组件，必须具有install方法才能使用Vue.use()...components
};

测试组件

• main.js

import ComponentBox from "../plugins/index";
Vue.use(ComponentBox)

• 首页 home.vue中直接使用组件

<template><div><qq-input></qq-input><qq-button color="#2e93ff"></qq-button><qq-button color="#ff976a"></qq-button><qq-button color="#ee0a24"></qq-button><qq-button color="#07c160"></qq-button><qq-button color="#ccc"></qq-button></div>
</template>

打包配置

• package.json

{"name": "xiaoququ-ui", //组件库名字"version": "1.0.1","private": false,"description": "第一个组件库","author": "小曲曲","license": "MIT","keywords": ["小曲"],"main": "dist/xiaoququ-ui.umd.min.js", //打包后dist文件夹的js文件"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lib": "vue-cli-service build --target lib --name xiaoququ-ui plugins/index.js", // 打包命令"lint": "vue-cli-service lint"},
}

发布到npm

• npm run lib 打包生成dist文件夹
  
• npm login 输入npm账号、密码（输不进去无所谓）、邮箱、验证码（发送邮箱）
• npm publish （发布失败检查是否包名重复）

使用组件库

• npm i xiaoququ-ui
• main.js

import ququ from "xiaoququ-ui";
import "xiaoququ-ui/dist/xiaoququ-ui.css";
Vue.use(ququ)

• 组件内使用

<qq-button color="#ccc"></qq-button>

遗留问题

• 公共样式没有打包到css文件中