做铝材的网站,030159网站建设与维护,深圳雨棚制作,vultr建wordpress打造自己的前端组件库 demo是开源的#xff0c;自己上npm 或者 github 上都能搜到 新建vue项目(sass js vue2)
vue create yt-ui 修改文件目录(如下) 修改#xff1a; 1.src 更名 examples; 2. src/components移动到项目最外层#xff1b;3.vue.config.js更改入口文件
/…打造自己的前端组件库 demo是开源的自己上npm 或者 github 上都能搜到 新建vue项目(sass js vue2)
vue create yt-ui 修改文件目录(如下) 修改 1.src 更名 examples; 2. src/components移动到项目最外层3.vue.config.js更改入口文件
// vue.config.jsconst {defineConfig} require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,pages: {index: {entry: examples/main.js,template: public/index.html,filename: index.html}}
})编写ytDemo组件并在app.vue中使用 新建文件目录结构如上图 // components/demo/index.jsimport ytDemo from ./src/main.vue;ytDemo.install (Vue) {Vue.component(ytDemo.name, ytDemo);};export default ytDemo;// components/src/main.vue!--* Description: main 页面* Author: mhf* Date: 2023/10/21--templatedivdiv classaadiv classbb/div/div/div/templatescriptexport default {name: ytDemo,components: {},props: {},computed: {},watch: {},filters: {},data() {return {};},methods: {},created() {},mounted() {},destroyed() {},};/scriptstyle langscss scoped.a {width: 200px;height: 200px;border: 1px solid red;.b {width: 100px;height: 100px;border: 1px solid green;}}/style// example/main.jsimport Vue from vueimport App from ./App.vueimport ytDemo from ../components/ytDemo;Vue.use(ytDemo)Vue.config.productionTip falsenew Vue({render: h h(App),}).$mount(#app)根据如上步骤则出现如下效果 打包
// components/index.js// 整个包的入口
// 统一导出
import ytComp from ./ytComp;
import ytDemo from ./ytDemo;
const components [ytComp,ytDemo,
]
// 定义install方法
const install function (Vue) {// 注册所有的组件components.forEach(component {Vue.component(component.name, component)})
}
// 判断是否直接引入文件如果是就不用调用Vue.use()
if (typeof window ! undefined window.Vue) {install(window.Vue)
}
// 导出install方法
export default {install,ytDemo,ytComp
}// package.json
{name: mhfwork/yt-ui, // 必须保持唯一请自行上npm官网查询自己的项目名称version: 0.0.1,private: false,author: {name: 毛三仙,email: mhf.mailqq.com},scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint,format: prettier --write \components/**/*.js\ \components/**/*.vue\ \examples/**/*.vue\ \examples/**/*.vue\,lib: vue-cli-service build --target lib components/index.js},dependencies: {core-js: ^3.8.3,vue: ^2.6.14},devDependencies: {babel/core: ^7.12.16,babel/eslint-parser: ^7.12.16,vue/cli-plugin-babel: ~5.0.0,vue/cli-plugin-eslint: ~5.0.0,vue/cli-service: ~5.0.0,eslint: ^7.32.0,eslint-plugin-vue: ^8.0.3,sass: ^1.32.7,sass-loader: ^12.0.0,vue-template-compiler: ^2.6.14},eslintConfig: {root: true,env: {node: true},extends: [plugin:vue/essential,eslint:recommended],parserOptions: {parser: babel/eslint-parser},rules: {}},browserslist: [ 1%,last 2 versions,not dead]
}发布流程
todo: 更新 readeMe.md、package.json版本号 1. npm run lib 2. npm get registry 3. npm login // 登陆自己的npm账号没有请自行注册4. npm publish --access public // 正常的话 npm publish 即可因本项目中使用mhfwork/xxx 需注明是public库使用发布成功的组件库
新项目中
npm i mhfwork/yt-uimain.js中注册 import ytComp from mhfwork/yt-ui/components/ytComp;import ytDemo from mhfwork/yt-ui/components/ytDemo;Vue.use(ytComp)Vue.use(ytDemo) Vue文件中使用
templatediv classhomeyt-comp page-nameaaahahah/yt-demo //div
/templatescript
// is an alias to /srcexport default {name: HomeView,components: {}
}
/script
