Vue配置第三方组件库

我的第一篇博客，欢迎骚扰。

确保环境为vue3，我第一次配置是vue2配置了好久（可以在项目目录下通过npm list来查看）

若是vue2可以先将npm升级到最新npm install -g npm@latest（查看版本 npm -v）然后通过npm install vue就能安装最新版的vue就可以开始正文了

其实第一步应该是生成vue框架文件，我一开始也忘记了，直接补在最前面吧：

        npm下载脚手架：npm install -g @vue/cli 可能会报一堆warning但是无伤大雅

        生成vue框架相关文件：

                vue create fwwb-frontend（我这边fwwb-frontend是项目名大家可以自行替换）

这样一个vue项目文件就生成好了，接下来开始组件库引入

第一步：安装相应的组件库，我这边以阿里ant为例,由于ant4缺少了antd.css结果一直报错我就直接改用ant3了，下附代码

    npm install --save ant-design-vue@3

        通过 npm fund 查看当前目录安装情况。

        PS D:\vue\fwwb> npm fund
        fwwb
        ├─┬ https://opencollective.com/ant-design-vue
        │ │ └── ant-design-vue@3.2.20
        │ └── https://opencollective.com/core-js
        │     └── core-js@3.37.1
        ├── https://github.com/fb55/entities?sponsor=1
        │   └── entities@4.5.0
        └─┬ https://opencollective.com/postcss/
          │ └── postcss@8.4.39
          └── https://github.com/sponsors/ai
              └── nanoid@3.3.7

        可以看到当前npm目录下已经存在了ant-design-vue说明我们已经安装成功，接下来就是在项目中引入该框架即可

第二部：在main.js中引入相关组件

        由于我是第一次使用，直接选择了全局引入，即引入了所有组件，不管是否需要用到，虽然会造成一定的冗余，但是偷个懒图个方便，日后会补上部分引入的相关操作。

main.js:

import { createApp } from 'vue'

import App from './App.vue'

// 新增代码

//导入组件库

import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

//创建实例引用组件库并挂载

const app = createApp(App);

app.use(Antd);

app.mount('#app');

最后一步：npm run serve即可成功运行了，接下来就是复杂的前端页面编写

最后，小Y祝大家配环境顺利，代码狂写哈哈哈哈哈。