Vue框架集成uview-plus-前端教程（一）

后端从入门到精通 2023-07-14

1337

这篇文章主要记录了搭建前端框架主要步奏，接下来会手把手教你如何用vue框架集成uview-plus，后续会如何发版到小程序，一步一步完成发版。

今

日

一

码

一、HBuilderX

题

首先我们要进行HBuilderX下载（下载安装教程就不细说，不会请自行百度）。

1、下载安装好后，我们先创建一个默认模板，vue版本选择3。

2、创建好后来右上角点击搜索uview-plus，点击进去会跳转页面，之后在页面点击下载。

3、下载好之后，左边目录uni_modules就会出现我们安装的uview-plus。

二、集成到页面

1、我们先要执行命令安装

npm install sass sass-loader@10 -D

npm install dayjs npm install clipboard

2、App.vue需要加入代码

<style lang="scss">
  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
  @import "@/uni_modules/uview-plus/index.scss";
</style>

3、在项目根目录的uni.scss
中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

4、在项目根目录中的main.js
中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)
之后

// main.js
import uviewPlus from '@/uni_modules/uview-plus'
 
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

5、在pages.json加入

"easycom": {
  
          "^u-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
  
        },

6、在页面加入

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
    <u-button type="primary" :plain="true" text="镂空"></u-button>
    
    <u-button type="primary" shape="circle" text="按钮形状"></u-button>
  </view>
</template>

7、最后可以看到

关注我..每天陪你一起学习进步

vue 前端框架软件 scss 框架

文章转载自后端从入门到精通，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Vue框架集成uview-plus-前端教程（一）

评论