-
//安装 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路径的数组 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
查看全部 -
//组件调用
<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>
查看全部 -
11111222
查看全部 -
视频教程是2021年开始的,现在是2023年vue脚手架提供的安装的就只有Vue3,没有Vue2选。
查看全部 -
vue - 构建用户界面的渐进式框架
vue组件 - 组件 可复用的 vue实例
vue组件库 - element Ant D
查看全部 -
配置文件webpack.config.js是webpack模块化打包时候使用的。
查看全部 -
mkdir docs && echo '# Hello VuePress' > docs/README.md
控制台输入命令时,显示错误 标记“&&”不是此版本中的有效语句分隔符。
cmd 运行命令可解决
查看全部 -
什么鬼,山寨版的呀
官方正版
http://sass-lang.com/
查看全部 -
过时了 `gulp`
查看全部 -
查看全部
-
登录github
将本地文件推送到github
git init git remote add origin //绑定仓库地址 git add . git commit -m "feat: save" git push -u origin master
vuepress/config.js中设置base
在项目根目录中新建deploy.sh
package.json
"scripts": { "deploy": "bash deploy.sh" }
vuepress设置标题和导航栏
查看全部 -
//编写文档
//首页文档
//组件文档
查看全部 -
查看全部
-
将 VuePress 安装为本地依赖
npm install -D vuepress
//创建文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
//在 package.json 中添加一些 scripts
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }}
//启动
npm run docs:dev
查看全部 -
//在npm上发布第三方组件库
//配置package.json
"description":"组件库描述", "main":"dist/index.umd.js", //组件库入口文件 "keywords":{ //关键词,方便用户搜索 "mooc-ui", "vue", "ui" }, "author":"Inthur", //作者 "files": [ //需要发布的文件 "dist", "components" ],
//README.md对组件库描述
//终端登录npm 发布
npm login npm publish
查看全部
举报