vant,ele框架

vant是用于移动端的组件库

安装vant

1. 在项目文件中输入 cnpm i 安装依赖包

2. 使用npm安装vant
   	vue2语法安装 npm i vant -S
   	vue3语法安装 npm i vant@next -S
   

也可以在vue项目输入 vue ui打开图形化界面来创建

引入组件

自动引入组件(推荐)

1.# 安装插件
	npm i babel-plugin-import -D
2.在 babel.config.js 中配置
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };
3.在main.js全局中引入(需要什么样式,就引入什么)
	import {Button} from 'vant' (导入组件)
	Vue.use(Button)	(注册组件)
4.在vue组件中引入需要在components中引入 [Button.name]:Button
5.在模板标签中使用标签,style中调整样式
<van-button type="primary">主要按钮</van-button>

vite中按需引入

//vue3
npm i vant@3

//安装插件导入样式
cnpm i vite-plugin-style-import --save

//在vite.config.js中配置
import styleImport from 'vite-plugin-style-import'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/index`,
        },
      ],
    }),
  ]
})

//main.js中注册
import {Button,IndexBar,IndexAnchor,Cell} from 'vant';
const app = createApp(App)
app.use(Button)
app.mount('#app')

引入全部组件

全局中引入
    import Vant from 'vant'; (引入全部组件)
    import 'vant/lib/index.css'; (引入全部样式)
    Vue.use(Vant);(注册全部组件)

然后就可以在模板标签中直接使用了
给组件的style添加scoped="scoped",表示该样式只在当前组件有效,不会污染其他组件的样式

解决无法覆盖vant样式问题

​ 1.在下面加一个不带scoped的 <style> 标签处理例外情况

​ 2.建一个 css 文件,用来写一些覆盖样式

​ 3.在要覆盖的样式前加上 ::v-deep

//vue3使用下面这种方法
::v-deep(.van-icon){
	color: #000;
}

element主页用于pc端

1.cnpm i安装依赖包
2.cnpm i element-ui -S vue2安装
3.npm install babel-plugin-component -D 安装 babel-plugin-component按需求引入组件
4.编辑babel.config.js
	module.exports = {
      "presets": ["@vue/app"],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
5.main.js中引入需要的组件
    import {Button,Row} from 'element-ui';
    Vue.use(Button);
    Vue.use(Row);
6.在组件template中直接使用标签