页面新建

---

这里的『页面』包含新建页面文件、配置路由、样式文件等。通常情况下，你仅需简单的配置就可以添加一个新的页面。 在pages下创建新的 .vue 文件。如果页面相关文件过多，您可以创建一个文件夹来放置这些文件。

第一种方式

在Hbuilder X工具中左侧项目管理器中找到需要新建文件的目录例如：index，右击，选择新建 -> 新建vue页面，输入文件名例如：test，选择简单模板，点击创建即可创建一个新的页面。为新页面注入根节点及其它数据，写入后，页面代码如下：

<template>
        <view>新页面 newPage</view>
</template>

<script>
    export default {
        name : 'newPage',
        data(){
            return {    
            }
        },
        methods:{}
    }
</script>

<style lang="scss" scoped>
</style>

在pages.json中注册test.vue页面的路由信息

"pages": [
    ...
    {
        "path": "pages/index/test", 
        "style": { 
            "navigationBarTitleText": "新页面",
        }
    }
]

然后我们在项目启动后，直接将页面路由指向pages/index/test 就可以看到实时页面效果

第二种方式（推荐使用）

在Hbuilder X工具中左侧项目管理器中找到需要新建文件的目录例如：index，右击，选择新建页面，出现下列弹框：

输入文件名，根据项目所使用的预处理命令选择对应的模板，根据下列图示进行勾选操作，在navigationBarTitleText里填入新建页面的页面标题，点击创建，即可创建一个含有同名目录的、已在pages注册的新页面，页面初始代码如下：

<template>
    <view>  
    </view>
</template>
<script>
    export default {
        data() {
            return {    
            };
        }
    }
</script>
<style lang="scss">

</style>

然后我们在项目启动后，直接将页面路由指向pages/index/newPages就可以看到实时页面效果