如果你从未用过uni-app，可以进来看看

前言

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

对比其他小程序开发框架，uni-app的跨端效果更好。

uni-app官方发布了uni-ui库

 https://github.com/dcloudio/uni-ui

uni-app官方发布了uni-ui库，还有个插件市场，里面轮子很多，做业务应该可以很快拼轮子做出来。

www.uviewui.com/

上手体验

开发环境

uni-app官网安利HBuilderX这个开发工具。

但是，我不吃这一波安利，一直用的还是vscode，相关配置可以参考uni-app官方指南

uni-app官方指南：

当 uni-app 遇见 vscode

CLI 工程

全局安装 vue-cli 3.x（如已安装请跳过此步骤）

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

在vscode中打开项目，安装vue语法提示插件vetur

安装组件语法提示

组件语法提示是uni-app的亮点，其他框架很少能提供。

npm i @dcloudio/uni-helper-json

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	qq 小程序

vscode 自定义全局代码片段 （uni-app，vue）

1.vscode设置--用户代码片段，新建全局代码片段文件

2.输入名字后，粘贴对应的代码。

{    
    "Print to console": {    
        //这里自定义快捷名称        
        "prefix": "vue-uniApp",        
        "body": [            
            "<template>",            
            "<view class='$2'>$5</view>",            
            "</template>",            
            "",            
            "<script>",            
            "",            
            "export default {",            
            "// import引入的组件需要注入到对象中才能使用",            
            "components: {},",            
            "data() {",            
            "// 这里存放数据",            
            "return {",            
            "",            
            "};",            
            "},",            
            "// 监听属性 类似于data概念",            
            "computed: {},",            
            "// 监控data中的数据变化",            
            "watch: {},",            
            "// 生命周期 - 创建完成（可以访问当前this实例）",            
            "onLoad(options) {",            
            "",            
            "},",            
            "// 生命周期 - 页面展示（不可以访问DOM元素）",            
            "onShow() {",            
            "",            
            "},",            
            "// 生命周期 - 挂载完成（可以访问DOM元素）",            
            "onReady() {",            
            "",            
            "},",            
            "// 方法集合",            
            "methods: {",            
            "",            
            "},",            
            "onHide() {}, // 生命周期 - 监听页面隐藏",            
            "onUnload() {}, // 生命周期 - 监听页面卸载",            
            "}",            
            "</script>",            
            "<style lang='scss'>",            
            "$4",            
            "</style>"        
        ],        
        "description": "Log output to console"    
    }
}

3.新增一个vue页面，输入代码片段的名称，就可以了。