Uni-app actual combat live app full stack development

1 uni-app learning
1.1 What is uni-app
uni-app is a framework (also called full-end development framework) that uses Vue.js syntax to develop all front-end applications.
Technology stack: JavaScript, vue, WeChat applet, uni -app

1.2 What are the works of uni-app
Online project.png
1.3. Uni-app community scale
Community scale.png
2 uni-app basics
2.1 How to create a project
Scaffolding to build a project
1. Global installation
npm install -g @vue/cli
2
.Create a project vue create -p dcloudio/uni-preset-vue my-project
3. Start the project (WeChat applet)
npm run dev:mp-weixin
4. WeChat applet developer tool to import the project
(may encounter during the build process Questions)

The scaffolding version is inconsistent. png
2.2 How to write code
2.3 Uni-app initial experience
Initial interface. png
2.4 Project structure introduction
Project directory. png
2.5 style and sass
support small program rpx and h5 vw, vh.
The unit in the rpx applet is 750rpx = screen width vw h5 unit 100vw = the width of the screen, 100vh = the height of the screen
Built-in sass configuration, you only need to install the corresponding dependency npm install sass-loader node-sass
vue component, in Add attributes to the style tag

{ {dataObj.name}} { {dataObj.age}} { {dataObj.boolean}} { {item.text}} Basic syntax display.png 2.7 Add click event to event, customize parameters and pass parameters

View the printed results:

Click event.png
2.8 Component
1 Component definition/introduction/registration/use
key chapters, componentization is one of the necessary front-end ideas, flexible use of components can improve web development efficiency, increase code reuse rate, and reduce blocks and blocks The coupling between.

1.1 Definition of
components Create a new folder components in the src directory to store components
. Create a new vue file directly in the components directory.
1.2
Import components. Introduce components "import component name from'component path'" on the page.
1.3 Register components
on the page In the example, the new property components
property components is an object, add the components to be registered in it.
1.4 Use of components
+ add the component tag "<component><component/>" in the template of the page

1.5 Global data transfer
Add properties to the prototype of vue through prototype