自学uni-app （1）uni-app的搭建和基本目录结构

了解uni-app框架

开发 uni-app 所需要了解的知识

html
css
javascript
node.js
webpack

框架搭建方法

有两种办法来搭建基于uni-app框架的项目

1. 通过搭建脚手架来创建uni-app项目
2. 利用HBuild X 的插件可以直接创建uni-app项目

这个可以在官网上查到----uni-app的官网

在用脚手架搭建的时候经常用到npm，那么npm到底是什么呢？
npm（node pack manager） 是node的包管理器
用于node的插件安装（包括安装、卸载、管理依赖）

基本项目文件结构

uni-app 基本项目目录文件的结构

pages（文件夹）

所有页面存放的目录

index.vue

index.vue的基本结构

<template>
	<view class="content">
        <view>
        </view>
   </view>
</template>     

static（文件夹）

静态资源存放目录

logo.png

App.vue

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 */
	
</style>

main.js

vue初始化入口文件

mainfest.js

配置应用名称、appid、logo、版本等打包信息

pages.json

配置页面路由、导航条、选项卡等页面信息

uni.scss

uni-app的内置的scss变量，可以直接使用

官网完整uni-app工程目录文件结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息