vue小程序开发（二）项目搭建

新建项目

创建项目

vue create -p dcloudio/uni-preset-vue dnpicture

安装 sass 依赖

npm install sass-loader node-sass

建议

cnpm i node-sass@4.14.1 cnpm i sass-loader@7.3.1 --save-dev

启动

npm run dev:mp-weixin

引入tabbar页面

在pages.json中录入pages

{
    "path": "pages/home/index",
    "style": {
        "navigationBarTitleText": "首页"
    }
},
{
    "path": "pages/horizontal/index",
    "style": {
        "navigationBarTitleText": "横屏"
    }
},
{
    "path": "pages/video/index",
    "style": {
        "navigationBarTitleText": "精美视频"
    }
},
{
    "path": "pages/search/index",
    "style": {
        "navigationBarTitleText": "搜索"
    }
},
{
    "path": "pages/mine/index",
    "style": {
        "navigationBarTitleText": "我的"
    }
}

将icon包放在static下

在pages.json中插入

"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#d4237a",
    "backgroundColor": "#fff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
        {
            "pagePath": "pages/home/index",
            "text": "首页",
            "iconPath": "./static/icon/_home.png",
            "selectedIconPath": "./static/icon/home.png"
        },
        {
            "pagePath": "pages/horizontal/index",
            "text": "横屏",
            "iconPath": "./static/icon/_img.png",
            "selectedIconPath": "./static/icon/img.png"
        },
        {
            "pagePath": "pages/video/index",
            "text": "精美视频",
            "iconPath": "./static/icon/_videocamera.png",
            "selectedIconPath": "./static/icon/videocamera.png"
        },
        {
            "pagePath": "pages/search/index",
            "text": "搜索",
            "iconPath": "./static/icon/_search.png",
            "selectedIconPath": "./static/icon/search.png"
        },
        {
            "pagePath": "pages/mine/index",
            "text": "我的",
            "iconPath": "./static/icon/_my.png",
            "selectedIconPath": "./static/icon/my.png"
        }
    ]
}

得到

引入字体图标

• 字体图标使用的是 iconfont
• 在 App.vue中 全局引入

将styles文件夹放在src目录下

在引入样式文件中不能使用 @ 符号， 在uni-app中找不到

因为要在全局中应用，所以导入到 App.vue中

App.vue

<style>
	/*每个页面公共css */
	@import "./styles/base.wxss";
	@import "./styles/iconfont.wxss";
</style>

测试

home/index.vue

<template>
  <view>
      首页
        <text class="iconfont iconvideocamera"></text>
  </view>
</template>

uni-ui

• uni-ui是Dcloud提供的一个跨端ui库，它是基于vue组件的，flex布局的、无dom的跨全端ui框架

• uni-ui不包括基础组件，它是基础组件的补充

• 数字角标、日历、卡片、折叠面板…

• 安装 uni-ui

• 局部引入组件

• 注册组件

• 使用组件

官方指导

安装 uni-ui

npm i @dcloudio/uni-ui 

报错解决

Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

uni-app

使用方式

原生微信小程序 wx.request

uni-app的方式 uni.request

其他api的使用方式也类似

官方指导