如何新建一个uniapp项目||如何新建一个uniapp页面

如何新建一个uniapp项目

1、在我们的HBuilder编辑器中，工具栏-文件-新建-项目

2、点击项目会弹出一个创建窗口，选择uni-app，选择uni-app会生成所需的一些文件和配置

给项目命名和选择你想要存放的路径，最后点击创建

3、创建成功如何运行项目、访问页面：

成功创建的uniapp项目前面是一个u图标，点开其中一个文件，点击运行选择运行到浏览器

uniapp的首页：

这个页面的内容在pages.json文件里的第一个路由index里，可以试着改一下index页面的内容

4、文件：

1）luanch.json：配置了启动调试时相关设置；

2）pages：存放页面，一般新建页面在这个目录下；

3）static：存放一些静态元素，例如图片；

4）App.vue：页面入口文件、全局配置。调用应用生命周期函数、配置全局样式、配置全局的存储globalData等，是uni-app的主组件，所有页面都是在App.vue下进行切换的，应用生命周期仅可在App.vue中监听，在页面监听无效；

5）main.js：uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex、uview等在该页面配置；

6）manifesr.json：项目打包基本配置；

7）pages.json：路由配置，新建页面在改文件配置路由；

8）uni.scss：全局样式配置，控制整体应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

5、如何新建页面：

1）在项目名鼠标右键，选择新建-vue文件，会帮你新建一个.vue

在这里新建的页面要到pages.json文件里配路由

2）在项目名鼠标右键，选择新建页面

同时也帮你在pages.json里配好了路由，不需要自己再去配。

但是不管是哪种方式新建页面，删除页面时都要手动删除路由，否则会报错！

 

😜喜欢文章或文章内容对您有帮助点个赞鼓励一下吧~