vue小程序开发（二）项目搭建_小程序搭建 vue-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45915904/article/details/124161966

本文介绍了如何使用vue创建uni-app小程序，并进行项目搭建，包括安装sass依赖、配置tabbar页面以及引入字体图标。在pages.json中录入各页面并设置导航栏标题，然后将字体图标放在static目录下，并在App.vue中全局引入。此外，还提到了uni-ui的使用，它是Dcloud提供的一款跨端UI库，用于补充基础组件。在遇到问题时，如Node Sass版本不兼容，可以通过指定版本解决。最后，文章简要介绍了uni-app中请求API的使用方式，如uni.request与原生微信小程序的wx.request的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的使用方式也类似

官方指导