uni-app的使用以及HBuilder的Vue创建

首先在HBuilder的创建项目点击新建打开会出现功能列表

点击项目创建输入项目名称

如图

pages：存放你写的各种数据代码

static：存放各种视图

uni_modules:可以把他看做一个各种方法的存放地

pages.json：这个为启动页你所有的页面的地址都需要放在这里

 以    "path":"pages/login/login"   这种方式存放页面

加入这段代码如图 会让代码看起来很整洁

"navigationStyle":"custom"

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/login/login"
		},{
			"path": "pages/main/main"
		},{
			"path":"pages/template/menu_draw"
		},{
			"path":"pages/user/user_list"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"navigationStyle":"custom"
	}
}

 继续在pages上右键点击新建同样会出现功能列表点击目录创建

 同样在你创建的包上右键可以点击新建 再点击创建vue文件

 

这里我创建了new_file.vue文件可以出现如图的样式

这里：

template标签存放UI界面

script标签存在业务流程代码(JS)

style标签存放CSS样式

需要注意的点就是在写 view 标签的时候  注意一个template标签只能有一个 view 标签（是包含在其中的）

  script标签 下面是需要加入的代码 这可以看成一个固定的无论怎么弄都是需要加入图片在下面

 项目就创建完成了基本。

在这里放上uni-app的网址链接

uni-app官网 ,可以保存下来，以后在做项目的时候会经常用到。

使用方法：

1.无论做什么项目我们都需要一个界面在项目启动后需要看到的效果

如图：

 

 相信如果看到这里的话也看到了多出了东西

    import menuDraw from '../template/menu_draw.vue';
        export default{
            components:{
                menuDraw
            },

 import是引入 在这里也是一样的后面的'../template/menu_draw.vue'

这是你引入的

下面的uni-app的使用举几个例子

如我们想去做做一个页面的表头就可以去找如图

  可以看到所有的代码以及使用方法都已经有了  我们要做的基本就是去熟练使用与理解uni-APP的使用方式。