基本uniapp入门使用,用vue开发小程序

1、uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

1.1、开发方式

  • HbuilderX快速开发
  • 脚手架快速搭建和开发

1.2、脚手架搭建项目

脚手架搭建项目
1.全局安装  
    npm install -g @vue/cli  
2.创建项目      
    vue create -p dcloudio/uni-preset-vue my-project     
3.启动项目(微信小程序)   
    npm run dev:mp-weixin    
4.微信小程序开发者工具导入项目 

2、项目结构

基本uniapp入门使用,用vue开发小程序
基本uniapp入门使用,用vue开发小程序

  • babel.confing.js es5转es6
  • package 包描述文件
  • postcss 如何编译css
  • README 文档说明

3、样式和sass

  • 支持小程序的rpx 和 h5的vw,vh
  • rpx是小程序中的单位 750rpx = 屏幕宽度
  • vw是h5单位 100vw =屏幕的宽度100vh = 屏幕的高度
  • 内置sass的配置, 只需要安装对应的依赖即可 npm install sass-loader
  • node-sass vue组件中,在style标签上加入属性

4、基本语法

4.1、数据展示

  • 在js的data中定义数据
  • 在template中通过{{数据}}来显示
  • 在标签的属性上通过:data-index=“数据”来显示
<template>
    <view>
        <view>Message: {{ msg }}</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'Hello Vue!'
            }
        }
    }
</script>

基本uniapp入门使用,用vue开发小程序

上一篇:做个笔记,关于指针


下一篇:Leetcode 931. 下降路径最小和(中等) 动态规划