web Getting Started

Web Getting Started

---

1.init project

with lite-app-init , you can init your project according to following command

npm install --save -g liteapp-init #install liteapp-init global
mkdir my-project   #create your project dir
cd my-project
lite-app-init && npm install -d

---

you may get a problem with installing node-sass , refer to the issue

https://github.com/lmk123/blog/issues/28

---

3.set your custom app.json

lite-app-cli create a default app.json for you , but you may set it yourself liteapp-cli will make the bundle with your settings in app.json, so it's important

param	must	default	meaning
name	yes	--	the name of your project
version.base	yes	--	base version , set in liteapp-base/base/version.json , 1.2 is now enabled
version.business	yes	--	business version , version control of lite-app
src	yes	"./"	path of code source
res	yes	"./"	path of static resource
target	yes	"./"	dist path
pages	yes	--	page array
page.name	yes	--	your page name
page.path	yes	--	your page path in src
index	no	--	page name that u want to set index
tabbar.items	no	--	tabbar setting

eg :

{
    "name" : "hello-world",
    "version" : {
        "business" : "1.0",
        "base" : "1.2"
    },
    "src" : "./src",
    "res" : "./res",
    "target" : "./dist",
    "pages": [
        {
            "name": "index",
            "path": "/entry/index" 
        }
    ],
    "index": "index",
	"tabbar": {
		"items": 
		[
			{
				"path" : "index",
				"unselectedIcon": "/images/tab-home.png",
				"selectedIcon": "/images/tab-home-selected.png",
				"title": "首页"
			}
		]
	}

}

---

4.get started

# development
lite-app --config ./app.json --env dev --target web

# production
lite-app --config ./app.json --env prod --target app

view in web (development type) ：

https://locahost:8080/pages/${bundleName}/web.html

---

scripts in package.json will be better

tips : user lite-app cli without install package globally will cause the error [command not found in path] refer to package.json docs in npm https://docs.npmjs.com/files/package.json#bin

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-app --config ./app.json --env dev --target web",
    "build": "lite-app --config ./app.json --env prod --target app"
  },

lite-app cli : params

• config : path to your app.json
• env 1.dev : development mode，with file watching and wont create any file in your project 2.prod : create the package for liteapp native to use
• target

1. app : will run in app（use native api & component）
2. web : will run in web（native api & component will be polyfilled ）