# uniapp脚手架

**Repository Path**: hanjiangjiaolong/uniapp-scaffold

## Basic Information

- **Project Name**: uniapp脚手架
- **Description**: uniapp脚手架
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-14
- **Last Updated**: 2024-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3+vite+uniapp小程序搭建流程

### 一、初始化项目

通过vue-cli创建uni-app项目

```shell
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
```

```
┌─ 
├─ components           uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  └─index
│          index.vue
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│      logo.png
├─uni_modules
│  ├─uni-transition
│  └─uni-ui
├─unpackage
│    └─dist
│  App.vue              应用配置，用来配置小程序的全局样式、生命周期函数等
│  index.html
│  main.js              Vue初始化入口文件
│  manifest.json        配置应用名称、appid、logo、版本等打包信息
│  pages.json           配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
└─ uni.scss
```

### 二、引用scss样式

```shell
npm install sass node-sass sass-loader@10 -D
```

### 三、语法糖插件

解决 `import { ref , reactive ..... } from 'vue'` 大量引入的问题

配置后可以不用引入，直接使用

```shell
npm i -D unplugin-auto-import
```

`vite.config.js`

```javascript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		uni(),
		AutoImport({
			imports: ['vue', 'vue-router']
		})
	],
})
```

### 四、解决@路径问题

`vite.config.js`

```javascript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		uni(),
		AutoImport({
			imports: ['vue', 'vue-router']
		})
	],
	resolve: {
		// 配置路径别名
		alias: {
			'@': path.resolve(__dirname, './src')
		}
	}
})
```

### 五、安装uview-plus

```javascript
// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y

npm install uview-plus
npm install dayjs
npm install clipboard

// 更新
// npm update uview-plus
```

```js
// main.js
import uviewPlus from 'uview-plus'

app.use(uviewPlus)
```

#### 在引入uview-plus的全局SCSS主题文件

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

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

#### 引入uview-plus基础样式

注意！

在`App.vue`中**首行**的位置引入，注意给style标签加入lang="scss"属性

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

#### 配置easycom组件模式

此配置需要在项目`src`目录的`pages.json`中进行。

温馨提示

1. uni-app为了调试性能的原因，修改`easycom`规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
2. 请确保您的`pages.json`中只有一个`easycom`字段，否则请自行合并多个引入规则。

```json
// pages.json
{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
```

### 六、引入组件测试页面

pages/index/index.vue

```vue
<template>
	<view style="padding: 20px;">
		<up-button type="primary" text="确定"></up-button>
		<up-button type="primary" :plain="true" text="镂空"></up-button>
		<up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
		<up-button type="primary" :disabled="disabled" text="禁用"></up-button>
		<up-button type="primary" loading loadingText="加载中"></up-button>
		<up-button type="primary" icon="map" text="图标按钮"></up-button>
		<up-button type="primary" shape="circle" text="按钮形状"></up-button>
		<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
		<up-button type="primary" size="small" text="大小尺寸"></up-button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const disabled = ref(true);
</script>


<style>
</style>
```

![image-20240703230947155](./assets/image-20240703230947155.png)

### 七、自定义tabBar

pages.json

```json
{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	"pages": [
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "components/g-tab-bar/g-tab-bar",
			"style": {
				"navigationBarTitleText": "下导航"
			}
		},
		{
			"path": "pages/404/404",
			"style": {
				"navigationBarTitleText": "404页"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"custom": true, // 自定义底部菜单
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index"
			},
			{
				"text": "404",
				"pagePath": "pages/404/404"
			}
		]
	}
}
```

App.vue

```vue
<script setup>
	onLaunch(() => {
		console.log("App Launch");
	});
	onShow(() => {
		// #ifndef MP-WEIXIN
		uni.hideTabBar(); // 隐藏原生tabBar
		// #endif
	});
	onHide(() => {
		console.log("App Hide");
	});
</script>

<style lang="scss">
	@import "uview-plus/index.scss";
</style>
```

components/g-tab-bar/g-tab-bar.vue

```vue
<template>
	<up-tabbar :value="activeTabName" fixed @change="changeTab" activeColor="#00aaff" inactiveColor="#7A7E83"
		:z-index="10">
		<up-tabbar-item v-for="(item, index) in tabbarList" :key="item.name" :text="item.text" :name="item.name"
			:icon="item.icon" />
	</up-tabbar>
</template>

<script setup>
	const props = defineProps({
		activeTabName: {
			type: String,
			required: true,
			default: "index",
		},
	});
	let tabbarList = [{
			pagePath: "/pages/index/index",
			text: "首页",
			icon: "home",
			name: "index",
		},
		{
			pagePath: "/pages/404/404",
			text: "404页面",
			icon: "shopping-cart",
			name: "product",
		},
		{
			pagePath: "/pages/order/index",
			text: "订单",
			icon: "order",
			name: "order",
		},
		{
			pagePath: "/pages/mine/index",
			text: "我的",
			icon: "account",
			name: "mine",
		},
	];

	function changeTab(name) {
		if (props.activeTabName === name) {
			return;
		}
		uni.switchTab({
			url: tabbarList.filter((e) => e.name === name)[0].pagePath,
		});
	}
</script>

<style></style>
```

pages/404/404.vue

```vue
<template>
	<view>404</view>
</template>

<script setup></script>

<style></style>
```