uniapp引入uview的ui库
- 一. 项目的创建
- 1.使用hbuilder创建项目
- 2.创建uniapp的项目
- 3.创建完成后的项目结构
- 二 . uview的代码导入到项目
- 1.找到uview的官网---找到安装[hbuild安装方式]
- 2.进入下载地址
- 3.导入uview的UI库
- 4.选择要导入的项目
- 5.导入后的项目结构变化
- 三 . 项目中注册uview的功能
- 四 .项目中使用
- 1.在uview 找到所需的组件代码
- 3.把组件代码添加到项目
- 4.运行项目
- 5.查看uview组件效果
- 五 .小功能介绍
- 1.按下键盘 F12--找到console
- 2.粘贴下面的代码到控制台
- 3.再按下键盘 F12 推出
- 4.滚动鼠标 --surprised
一. 项目的创建
1.使用hbuilder创建项目
在新建中选择项目的选项
2.创建uniapp的项目
建议 选择默认模板
3.创建完成后的项目结构
二 . uview的代码导入到项目
1.找到uview的官网—找到安装[hbuild安装方式]
可以使用下方的网址
html" title=javascript>javascript">https://www.uviewui.com/components/install.html
2.进入下载地址
3.导入uview的UI库
4.选择要导入的项目
5.导入后的项目结构变化
三 . 项目中注册uview的功能
1.点击安装配置
在uview 官网的安装中选择 hbuild方式
点击在注意中的 安装配置
html" title=css>css_41">2.shtml" title=css>css的配置
2.在main.js中引入 js库
html" title=javascript>javascript">//项目中的 main.js 文件
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
html" title=css>css_61">3.引入shtml" title=css>css的变量
html" title=javascript>javascript">//项目中的 uni.shtml" title=css>css文件 添加 [在最后的文件]
@import '@/uni_modules/uview-ui/theme.shtml" title=css>css';
4.引入uview的样式库
html" title=javascript>javascript">//在 项目的app.vue 文件 添加
<style lang="shtml" title=css>css">
/*每个页面公共html" title=css>css */
@import "@/uni_modules/uview-ui/index.shtml" title=css>css";
</style>
5.可忽略的配置
html" title=javascript>javascript">可以不做这一步
四 .项目中使用
1.在uview 找到所需的组件代码
3.把组件代码添加到项目
4.运行项目
html" title=javascript>javascript">可以选择 运行--->运行浏览器---->选择过个浏览器[如果没有需要配置]
5.查看uview组件效果
html" title=javascript>javascript">此时 你就可以使用uview的库进行开发了
希望你看到这篇文章
不要觉得很长 --大都是图片_
看完 你就会加深了解了
五 .小功能介绍
1.按下键盘 F12–找到console
2.粘贴下面的代码到控制台
html" title=javascript>javascript">var a=document.createElement("p")
a.style.position="fixed"
a.style.top="0"
a.style.left="0"
a.style.zIndex="99999999999"
a.style.width="100%"
a.style.height="14px"
a.style.backgroundColor= '#4158D0';
a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
var sp=document.createElement("span")
a.appendChild(sp)
sp.style.float="right"
sp.style.width="50px"
sp.style.height="14px"
sp.style.color="#fff"
sp.style.fontSize="10px"
sp.style.lineHeight="14px"
sp.style.borderRadius="2px"
sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
document.body.appendChild(a)
window.onscroll=function(en){
var cur=document.documentElement.scrollTop/(document.documentElement.scrollHeight-document.documentElement.clientHeight)
a.style.width=(cur*100).toFixed(2)+"%"
sp.innerText=(cur*100).toFixed(2)+"%"
}