代码拉取完成,页面将自动刷新
Hi! 首先感谢你使用 Yunxiu-next。
Yunxiu-next 是一套基于 Vue 3.x 开发的开源组件库,旨在快速搭建页面。
您可以在上找到更多详细信息、API 和其他文档https://yichuspace.github.io/yunxiu-next
推荐使用 npm
或 yarn
进行安装,它能更好地和 webpack
打包工具配合使用。而且可以更好的和 es6
typescript
配合使用。并且支持按需引入
npm i yunxiu-next -S
# or
yarn add yunxiu-next
你可以引入整个 yunxiu-next,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 yunxiu-next。
在 main.js 中写入以下内容:
import { createApp } from 'vue'
import YunxiuNext from 'yunxiu-next'
import App from './App.vue'
import 'yunxiu-next/lib/styles/index.css'
const app = createApp(App)
app.use(YunxiuNext)
// app.use(YunxiuNext,{disabledDoc:true}) // 可以设置禁用doc地址log
app.mount('#app')
以上代码便完成了 yunxiu-next 的引入。需要注意的是,样式文件需要单独引入。
借助插件 babel-plugin-import我们可以只引入需要的组件,以达到减小项目体积的目的
npm install babel-plugin-import --save-dev
然后,将 .babelrc 或 babel.config.js 修改为:
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
},
],
],
plugins: [
[
'import',
{
libraryName: 'yunxiu-next',
libraryDirectory: 'src/components',
},
],
],
}
如果你只希望引入部分组件,比如 Button 和 Icon,那么需要在 main.js 中写入以下内容
import { createApp } from 'vue'
import { YunButton } from 'yunxiu-next'
import App from './App.vue'
import 'yunxiu-next/lib/styles/components/button.css'
const app = createApp(App)
app.use(YunButton)
app.mount('#app')
特别提醒:按需引用仍然需要导入样式,即在 main.js 或根组件 import 'yunxiu-next/lib/styles/index.css';
完整组件列表参考源代码
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。