网站设计流程是什么_天津优化代理_百度发广告怎么发_网站建网站建设网站

1.常见的UI库

• ‌Ant Design
  基于React的UI组件库
• Ant Design Vue
  基于Vue的UI组件库
• ‌‌Material UI‌
  基于React的UI组件库
• ‌‌‌Element UI/‌Element Plus
  基于Vue的UI组件库,一般情况下Element UI是基于Vue2的,Element Plus是基于Vue3的
• NextUI‌
  基于React的UI组件库
• ‌Naive UI
  适合Vue3.0/TypeScript的组件库
• ‌‌PrimeVue
  基于Vue3的UI组件库
• ‌‌‌Vant‌
  多平台框架
• Ant Design Mobile
  基于H5
• ‌‌‌WeUI
  基于小程序

2.安装Element Plus

element plus官网:https://element-plus-docs.bklab.cn/
命令行安装:

npm install element-plus --save

3.完整引入Element Plus

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

 // main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'//一定要引入css
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

完整引入是支持Volar的,如果使用了Volar,请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

这样子当鼠标悬浮在文件中的组件上，就会有组件相关的类型提示。

4.手动按需引入Element Plus

App.vue:

<template><el-button>我是 ElButton</el-button>
</template>
<script>import { ElButton } from 'element-plus'export default {components: { ElButton },}
</script>

vite.config.ts:

import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({// ...plugins: [ElementPlus()],
})

5.自动按需引入Element Plus

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

 npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到Vite或Webpack 的配置文件中:
Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

Webpack:

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

配置好之后就不用按需手动按需引入直接可以在vue文件中使用组件。然后npm run dev运行项目。项目没啥问题。仔细观察会在项目中生成两个文件(这两个文件不要去手动修改):

auto-imports.d.ts:

// Generated by 'unplugin-auto-import'
export {}
declare global {}

components.d.ts:

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {export interface GlobalComponents {ElButton: typeof import('element-plus/es')['ElButton']ElLink: typeof import('element-plus/es')['ElLink']ElRow: typeof import('element-plus/es')['ElRow']RouterLink: typeof import('vue-router')['RouterLink']RouterView: typeof import('vue-router')['RouterView']}
}

如果后续在项目中用到了其它组件,重新运行项目之后components.d.ts中会自动追加这些组件类型。
为了让这两个d.ts声明文件生效,需要在tsconfig.json中的include属性中追加这两个文件的配置。

 {"extends": "@vue/tsconfig/tsconfig.web.json","include": ["src/**/*","src/**/*.vue","env.d.ts","auto-imports.d.ts","components.d.ts"],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]},},"references": [{"path": "./tsconfig.config.json"}]
}

这样子在vue文件中鼠标悬浮在组件附近，就会出现组件的类型提示及相关属性提示。