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

keying

发布于 2023-09-05 14:33:56

3.5K0

文章被收录于专栏：后端从入门到精通后端从入门到精通

这篇文章主要记录了搭建前端框架主要步奏，接下来会手把手教你如何用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、最后可以看到