前后端入门项目实战-使用HBuilderX创建项目及目录介绍

创建项目

点击文件==》新建==》项目，出现如下界面：

这里选择uni-app ,输入项目名，文件存储地址，模板选择ColorUI。如下图：

这里选择uni-app，是后面将以uni-app的语法，组件来进行开发。这样开发出来的项目可以同时发布到各个平台，而不需要重新维护代码，省时省力。
模板选择ColorUI，是ColorUI已经造好了一些前端样式的轮子，对于初学者来说，可以专注于业务逻辑的设计，而不用花费时间精力再去写css调样式。

目录介绍

上面创建完成后，会生成如下图的目录：

按照顺序：
colorui：是colorui的相关文件。
node_modules：是安装第三方插件的目录，即npm install 下载的相关文件。
pages：是页面目录，以后开发的页面都放在这里。
static：是静态文件的目录，一般放一些用的图片，logo等等。
App.vue：页面入口文件。页面全局的js、css引用都写在这里。
main.js：程序入口文件。需要使用的插件，公共组件放在这里。
manifest.json：HBuilderX的配置文件。在程序发布的时候会用到。后面用到会详细讲解。
package-lock.json：第三方插件依赖包管理。一般不用管它。
pages.json：页面配置文件。配置页面的属性。

前端项目创建完成。做好准备，接下来就开始讲解前端开发。

项目预览，扫描二维码查看：