PrimeVueUI 框架vue使用详细说明

简述：

PrimeVue 是一组丰富的 Vue 开源原生组件。

PrimeVUE

 

1.安装

1.导入PrimeVue依赖

cnpm install primevue@^3.12.5 --save

cnpm install primeicons --save

2.导入sass
cnpm install node-sass sass-loader style-loader -S

3.查看配置：导入建议使用cnpm

 

修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  
  lintOnSave:false,//
 
  pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
    }
}
})

2.main.js导入

注意，在main.js中需要导入

导入依赖文件：

 

导入css文件

 使用:

app. use (Primevue);

组件注册：

app.component("Button",Button)

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';
import Ripple from 'primevue/ripple';
 
// css
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
 
 
const app = createApp(App);
app.use(PrimeVue, {ripple: true});
 
app.directive('ripple', Ripple);
app.mount('#app')

3.使用

在App.vue测试

<template>
<div>
  <Button label="主要按钮" />
<Button label="次要按钮" class="p-button-secondary" />
<Button label="成功按钮" class="p-button-success" />
<Button label="信息按钮" class="p-button-info" />
<Button label="警告按钮" class="p-button-warning" />
<Button label="帮助按钮" class="p-button-help" />
<Button label="危险按钮" class="p-button-danger" />
</div>
</template>
 
<script>
 
 
 
export default {
  name: 'App',
  components: {
 
  }
}
</script>
 
<style lang = "scss" >
</style >

效果