谁帮58同城做的网站,百度云域名注册,苏州网站建设自助建站收费,深圳定制网站建设博主个人微信小程序已经上线#xff1a;【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 下载iview2.更新资源3.引入插件4.运行项目 专栏简介
本系列文章由浅入深#xff0c;从基础知识到实战开发#xff0c;非常适合入门同学。
零基础读者也能成功由本系列文章入门…博主个人微信小程序已经上线【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 下载iview2.更新资源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.cssconst app createApp(App)app.use(store).use(router).use(ViewUIPlus).mount(#app)因为vue的模板项目可能会有所变化所以上面的代码也不能无脑复制。我们只需要把iview相关的代码写入我们的vue项目中即可。
找到main.js文件写入iview引入代码最终我的代码如下
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./routerimport ViewUIPlus from view-ui-plus
import view-ui-plus/dist/styles/viewuiplus.cssconst app createApp(App)app.use(createPinia())
app.use(router)
app.use(ViewUIPlus)app.mount(#app)
4.运行项目
在终端输入dev命令运行项目
yarn dev上图说明运行成功打开网址http://localhost:5173效果如下 这说明我们项目运行成功。
