uniapp学习-新建项目

1、下载全uniapp hubilderX;

2、文件-新建-项目-uniapp-取个名字如demo-新建

3、目录结构

pages 放页面目录

static 放静态文件资源

app.vue 放公共css等应用入口文件

main.js 应用入口文件 注册vue等

manifest.json 项目配置

pages.json 页面配置

如果新建目录, common存放公用的文件;components 存放自定义组件,store 是vuex目录.

unpackage 编译后的文件存放目录

4、模板语法

模板块:<template> <!-- v-bind 可以简写成 : , 组件属性要使用data中定义的数据变量,或者组件属性要使用表达式,要使用v-bind指定? v-bind:class="msg" = :class="msg" v-on 可以简写成@ , 绑定事件v-on:click="show" = @click --> <view class="content" v-bind:class="msg" v-bind:data="true ? '对的' : '错的'"> hello {{msg}} <button v-on:click="show">点我</button> <input type="text" value="哈哈哈哈过" /> <a href="//www.greatytc.com/">//www.greatytc.com/</a> <block></block> <uni-tag text="123" type="" type="error" :circle="true"></uni-tag> </view> </template> <script> export default { data() { return { title: 'Hello', msg: 'hellos' } }, onLoad() { }, methods: { // 自定义方法写到methods里 show() { console.log('点了按钮'); } } } </script> <style> </style>

5、引入扩展组件:如分段器,选择非uni-modules版本,使用HBUILDERX下载,选择当前项目即可导入。刷新页面。





学了一个中午,发现只要用 uView就好了。 uView的目标是成为uni-app生态最优秀的UI框架, 下载一个空白包就能快速用。。。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    __Mr_Xie__阅读 1,480评论 0 1
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    flyjar阅读 771评论 0 2
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,639评论 0 6
  • 最近在学习Vue,下面是学习过程中总结了一些基本的知识点 Vue 一. 基本知识 1. 实例化 2. 过滤器 {{...
    冬天吃橘子_Autumn阅读 572评论 0 2
  • Vue官方文档以下内容作为本人日常学习使用,不作为参考 一、Vue环境搭建以及vue-cli的使用 Vue多页面应...
    好一只帅卤蛋阅读 771评论 0 1