Vue-cli3.0布局实战篇---准备工作(引入icon图标，引入自定义样式，使用ui组件)

前言：

工欲善其事必先利其器
本文所采用技术栈：vue3+vue-router4+vuex4+vant3，在实际项目开发中，我们需要做准备工作，比如引入外部icon图标，引入自定义css等等，今天就给客官对这些准备工作如何去做，展开讨论。

1. 引入icon图标，这里以iconfont为例

1.1首先登录iconfont，新建一个项目，比如A，将所需要的图标先添加入库，然后把图标添加到项目A里，把鼠标放到顶部导航栏资源管理上，找到我的项目，在项目中找到在线链接，然后把在线链接打开，复制里边的内容到iconfont.css里，这样我们就拿到了图标的样式文件，将这个文件放到src\assets\css下

1.2在main.js里加入一行代码，

import './assets/css/iconfont.css';

1.3 使用方式为：

<i class="iconfont icon-sousuo"></i>

2. 引入自定义样式文件

2.1 在src\assets\css下新建文件global.css，在里边编写一行样式代码

.fs-24{
    font-size: 24px!important;
}

2.2 使用方式：

<i class="iconfont icon-sousuo fs-24"></i>

3. 引入UI组件，这里以vant为例

3.1 安装vant：

npm i vant@next -S

3.2 main.js加入代码：

import 'vant/lib/index.css'
import { Toast } from "vant"
const app = createApp(App)
app.use(Toast)
app.use(store);
app.use(router);
app.mount('#app');

以上代码是全局引入的方式，局部引入可以参考vant文档。

3.3 使用方式：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {onMounted} from "vue"
import {Toast} from 'vant'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(){
    onMounted(()=>{
      Toast('test')
    })
  }
}
</script>

 
结语

最后，以上所有代码在我的开源仓库：https://github.com/maxzyt/vue3-mall-page，都可以找到，喜欢的点个star。