带你用uniapp从零开发一个仿小米商场_2.创建空白项目及公共样式引入

创建空白项目

  1. 打开uniapp 点击新建->项目

如下,

  1. 是编辑你项目的名字的地方
  2. 是你项目存放地址,可以点击浏览器去文件管理里面选地址
  3. 是模板选择,这里选择默认模板就好
  4. 是一些其他选择比如uvue能让你项目在编译成软件时运行更快,unicloud能让你用js写后端,且直接就是云开发,gitcode就是一个类似于github的代码托管平台

认识项目文件结构

创建完成后就是如下这个界面,

1.是你项目文件加名称,可以在此处右键到资源管理器打开

2.是pages页面,项目的各个页面一般放置在此处

3.是static文件夹,一些放前端服务器的静态资源将保存在此处,比如程序logo,字体样式,

4.是项目的各种配置文件或程序入口

公共样式引入

一共引入4个文件

  1. uni.css 官方ui库
  2. animate.css 一个经典的动画库,ps:可以去它的官网看看,这是一个很古老很经典的动画库
  3. icon.css 图标库
  4. common.css 自定义公共样式

ps: 我个人是更建议使用官方的库,因为第三方库的话更新会带来维护成本

1.引入uni.css

  1. 创建一个hello-app的项目
    3. 将hello-app中common目录拷贝到自己项目的根目录下,你可以不创建,这个文件稍后会打包上传,

    然后在自己的项目下创建common目录,并将uni.css放进去

在app.vue页面的style标签内引入uni.css

引入animate.css

可以直接去animate.css官网下载然后再引入,也可以直接用npm引入

animate.css官网http://www.animate.net.cn/

还可以直接用我提供的引入

唉,都在这里面了,就直接全部引入吧

运行uniapp项目

点击菜单栏的运行,然后选择运行到内置浏览器

tips;如果你是第一次运行,那么这里会让你安装插件,安装好后再次运行就好

注意,这里会有一个报错

这是uniapp的 uni.css 的报错,可以看报错的地方

在这个地方引入了一个字体图标库,但是我们static下面根本,没有这个字体,所以会报错

解决办法有两个,

1.去拿到uni.css库的项目里,把字体拿过来

  1. 直接把这行删了,用默认字体

本人一向秉承着头痛砍头的原则,所以直接把这行代码删了

tips: 这里直接删是因为,这只是一个当作教学的项目,正式项目中可别这样

再次运行后就能看到项目正式启动了

相关推荐
Json____9 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir17 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir17 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa19 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘21 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na012 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir2 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++