vue3基础教程(3)——引入ui框架iview(viewui)

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


@TOC


专栏简介

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

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

  1. HTML基础
  2. css基础
  3. js基础

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

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

可以直接搜索【中二少年工具箱】,也可通过 二维码知乎地址www.zhihu.com/question/53... 二维码csdn地址bbs.csdn.net/topics/6181... 二维码头条地址www.toutiao.com/w/179041298... 等入口进入,扫码关注。


1. 下载iview

iview官网www.iviewui.com/view-ui-plu...

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

按照官网介绍下载iview:

c 复制代码
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工具,命令为:

c 复制代码
yarn add view-ui-plus --save

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

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

2.更新资源

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

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

c 复制代码
yarn install

我这次其实没有下载什么新的插件。

3.引入插件

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

c 复制代码
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引入代码,最终我的代码如下:

c 复制代码
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')

4.运行项目

在终端输入dev命令运行项目

c 复制代码
yarn dev

上图说明运行成功,打开网址:http://localhost:5173,效果如下:

这说明我们项目运行成功。

相关推荐
夏梦春蝉15 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室1 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github