vue3基础教程（3）——引入ui框架iview（viewui）

博主个人微信小程序已经上线：【中二少年工具箱】。欢迎搜索试用

正文开始

专栏简介
1. 下载iview
2.更新资源
3.引入插件
4.运行项目

专栏简介

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。

零基础读者也能成功由本系列文章入门，但如果您具备以下基础，将会事半功倍：

HTML基础
css基础
js基础

当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。

由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。

可以直接搜索【中二少年工具箱】，也可通过
二维码知乎地址：https://www.zhihu.com/question/53230344/answer/3180004527
二维码csdn地址：https://bbs.csdn.net/topics/618134623
二维码头条地址：https://www.toutiao.com/w/1790412984859652/
等入口进入，扫码关注。

1. 下载iview

iview官网：https://www.iviewui.com/view-ui-plus/guide/install

iview是一个ui框架，能够帮助我们更简单地构建web网站。

按照官网介绍下载iview：

npm install view-ui-plus --save

使用webstorm打开上一章创建的vue项目lize-tools-web，因为我们没有使用vscode，所以可以删除默认的.vscode目录

在这里插入图片描述

在项目目录下打开终端，运行上面的命令。2023版的webstorm终端在左下角，老版本的应该是在最下面一行。找到terminal打开即可，然后输入下载iview的命令。

在这里插入图片描述
官网下载iview的命令是用的npm工具，我们上一章教大家的是修改yarn的源，如果要修改npm的源，需要自行查找方案，否则npm下载插件很容易失败。

建议使用yarn，我们把npm命令转化成对应的yarn工具，命令为：

yarn add view-ui-plus --save

在这里插入图片描述

要注意命令是在lize-tools-web文件夹下。

下载成功后，我们可以检查package.json，发现已经有view-ui-plus版本信息。

在这里插入图片描述

2.更新资源

package.json文件里记录着项目的一些基本信息，dependencies和devDependencies记载着项目里所有的插件，我们使用上面下载命令时，就会在下载资源的同时，在package.json中记录相应的信息。

现在项目里只下载了view-ui-plus插件，可能还有一些其它插件未下载，所以第一次运行新的项目前，我们一般会运行命令下载所有所需插件。

yarn install

在这里插入图片描述
我这次其实没有下载什么新的插件。

3.引入插件

下面是iview官网引入插件的方式：

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'const app = createApp(App)app.use(store).use(router).use(ViewUIPlus).mount('#app')

因为vue的模板项目可能会有所变化，所以上面的代码也不能无脑复制。我们只需要把iview相关的代码写入我们的vue项目中即可。

找到main.js文件，写入iview引入代码，最终我的代码如下：

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ViewUIPlus)app.mount('#app')