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

报错解决

uni-app

使用方式

uni-app的方式 uni.request

其他api的使用方式也类似