新建项目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": {}
}