unicloud15-小案例1项目初始化

109 阅读1分钟

新建项目articleDemo,勾选uniCloud,启用阿里云

进入项目关联云服务空间,云服务空间还是选择之前创建的cloud-demo1

并在app.vue中写一个公共样式 怪异盒模型 怪异盒模型的用作是如果给盒子设置边距、边框等尺寸时,是向内压缩的,父盒子尺寸不会被撑大,标准盒模型是会撑大父盒子

<script>
   export default {
   	onLaunch: function() {
   		console.log('App Launch')
   	},
   	onShow: function() {
   		console.log('App Show')
   	},
   	onHide: function() {
   		console.log('App Hide')
   	}
   }
</script>

<style>
   /*每个页面公共css */
 /* :root是一个伪类,表示文档根元素,所有主流浏览器均支持*/
 :root {
   /* 怪异盒子模型 使边距向内增加,父盒子尺寸不会改变*/
   box-sizing: border-box;
 }
</style>

新建一个新增页面add,以后会在add页面新增数据,在首页显示 再新增一个修改页面edit,删除数据和获取数据都在index.vue页面操作

在pages.json中进行全局配置

{
   "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
   	{
   		"path": "pages/index/index",
   		"style": {
   			"navigationBarTitleText": "新闻"
   		}
   	}
       ,{
           "path" : "pages/add/add",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "新增文章",
               "enablePullDownRefresh": false
           }
           
       }
       ,{
           "path" : "pages/edit/edit",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "修改文章",
               "enablePullDownRefresh": false
           }
           
       }
   ],
   "globalStyle": {
   	"navigationBarTextStyle": "white",
   	"navigationBarTitleText": "文章管理系统",
   	"navigationBarBackgroundColor": "#2b9939",
   	"backgroundColor": "#F8F8F8"
   },
   "uniIdRouter": {}
}

image.png