You've already forked template-MP-ts
移除传统的全局混入改为使用Vue3的全局暴露
This commit is contained in:
4
IFLOW.md
4
IFLOW.md
@@ -27,8 +27,6 @@
|
|||||||
├── components/ # 公共组件
|
├── components/ # 公共组件
|
||||||
├── lib/ # 第三方库
|
├── lib/ # 第三方库
|
||||||
│ └── luch-request/ # luch-request 网络请求库
|
│ └── luch-request/ # luch-request 网络请求库
|
||||||
├── mixins/ # Vue 混入
|
|
||||||
│ └── global.ts # 全局混入
|
|
||||||
├── pages/ # 主包页面
|
├── pages/ # 主包页面
|
||||||
│ └── index/ # 首页
|
│ └── index/ # 首页
|
||||||
│ └── index.vue # 首页页面
|
│ └── index.vue # 首页页面
|
||||||
@@ -98,7 +96,7 @@ npm install
|
|||||||
|
|
||||||
## 静态资源
|
## 静态资源
|
||||||
|
|
||||||
* 静态资源变量 `ASSETSURL` 已进行全局混入,可以在 `<template></template>` 中直接使用。
|
* 静态资源变量 `ASSETSURL` 已进行全局暴露,可以在 `<template></template>` 中直接使用。
|
||||||
* 所有静态资源URL应该使用 `ASSETSURL` 进行拼接,如:`${ASSETSURL}simple.png`。
|
* 所有静态资源URL应该使用 `ASSETSURL` 进行拼接,如:`${ASSETSURL}simple.png`。
|
||||||
|
|
||||||
## 工具函数 (tool.ts)
|
## 工具函数 (tool.ts)
|
||||||
|
|||||||
25
README.md
25
README.md
@@ -5,25 +5,36 @@
|
|||||||
## 目录结构
|
## 目录结构
|
||||||
|
|
||||||
```
|
```
|
||||||
├── api/ # 接口相关
|
├── api/ # 接口相关
|
||||||
│ ├── modules/ # 模块化 API 请求
|
│ ├── modules/ # 业务接口
|
||||||
│ └── request.ts # 请求封装配置
|
│ └── request.ts # 请求封装
|
||||||
├── common/ # 公共资源
|
├── common/ # 公共资源
|
||||||
│ ├── styles/ # 全局样式
|
│ ├── styles/ # 全局样式
|
||||||
|
│ │ ├── common.css # codefun原子类样式
|
||||||
|
│ │ └── base.scss # 全局样式变量
|
||||||
│ └── utils/ # 工具函数
|
│ └── utils/ # 工具函数
|
||||||
|
│ └── tool.ts # 常用工具函数
|
||||||
├── components/ # 公共组件
|
├── components/ # 公共组件
|
||||||
├── lib/ # 第三方库
|
├── lib/ # 第三方库
|
||||||
├── mixins/ # Vue 混入
|
│ └── luch-request/ # luch-request 网络请求库
|
||||||
├── pages/ # 主包页面
|
├── pages/ # 主包页面
|
||||||
|
│ └── index/ # 首页
|
||||||
|
│ └── index.vue # 首页页面
|
||||||
|
├── subPages/ # 分包页面
|
||||||
├── store/ # 状态管理
|
├── store/ # 状态管理
|
||||||
├── uni_modules/ # uni-app 组件库
|
│ └── index.ts # Vuex store
|
||||||
|
├── uni_modules/ # uni-app 组件
|
||||||
|
│ └── z-paging/ # 分页组件库
|
||||||
├── uview-plus/ # uView-Plus 组件库
|
├── uview-plus/ # uView-Plus 组件库
|
||||||
├── App.vue # 应用入口
|
├── App.vue # 应用入口
|
||||||
├── main.ts # 主入口文件
|
├── main.ts # 主入口文件
|
||||||
├── pages.json # 页面路由和配置
|
├── pages.json # 页面配置
|
||||||
├── manifest.json # 应用配置
|
├── manifest.json # 应用配置
|
||||||
├── uni.scss # 全局样式变量
|
├── uni.scss # 全局样式变量
|
||||||
└── .env # 环境变量配置
|
├── vite.config.js # Vite 编译配置
|
||||||
|
├── .env # 环境变量
|
||||||
|
├── .nvmdrc # Node.js 版本要求
|
||||||
|
└── tsconfig.json # TypeScript 配置
|
||||||
```
|
```
|
||||||
|
|
||||||
## 使用方法
|
## 使用方法
|
||||||
|
|||||||
8
main.ts
8
main.ts
@@ -5,10 +5,10 @@ import App from './App.vue'
|
|||||||
// 创建应用实例
|
// 创建应用实例
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
// 全局混入
|
// 提供全局变量
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import mixin from './mixins/global'
|
const ASSETSURL: string = import.meta.env.VITE_ASSETSURL
|
||||||
app.use(mixin)
|
app.provide('ASSETSURL', ASSETSURL)
|
||||||
|
|
||||||
// 全局组件
|
// 全局组件
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@@ -18,4 +18,4 @@ app.use(uView)
|
|||||||
// 挂载应用
|
// 挂载应用
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
export default app
|
export default app
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
// @ts-ignore
|
|
||||||
const ASSETSURL = import.meta.env.VITE_ASSETSURL
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install(app: any) {
|
|
||||||
app.mixin({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 资源地址
|
|
||||||
ASSETSURL,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {},
|
|
||||||
onShow() {},
|
|
||||||
methods: {},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -3,14 +3,17 @@
|
|||||||
<view class="content">
|
<view class="content">
|
||||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||||
<view class="text-area">
|
<view class="text-area">
|
||||||
<text class="title">{{ title }}</text>
|
<text class="title">{{ title }}{{ ASSETSURL }}</text>
|
||||||
</view>
|
</view>
|
||||||
<u-button type="primary" @click="handleClick">点击按钮</u-button>
|
<u-button type="primary" @click="handleClick">点击按钮</u-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { inject } from 'vue'
|
||||||
|
|
||||||
const title = 'Hello'
|
const title = 'Hello'
|
||||||
|
const ASSETSURL = inject('ASSETSURL')
|
||||||
|
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
|
|||||||
@@ -31,7 +31,8 @@ function replaceManifestAppid() {
|
|||||||
// 写回文件
|
// 写回文件
|
||||||
writeFileSync(manifestPath, JSON.stringify(manifest, null, 4))
|
writeFileSync(manifestPath, JSON.stringify(manifest, null, 4))
|
||||||
|
|
||||||
console.log(`Manifest appid 已更新为: ${appid}`)
|
console.log(`Manifest appid 已更新为: ${uni_appId}`)
|
||||||
|
console.log(`Manifest mp-weixin appid 已更新为: ${appid}`)
|
||||||
} else {
|
} else {
|
||||||
console.warn('未找到 VITE_APPID 和 VITE_UNI_APPID 环境变量,使用默认值')
|
console.warn('未找到 VITE_APPID 和 VITE_UNI_APPID 环境变量,使用默认值')
|
||||||
}
|
}
|
||||||
@@ -41,7 +42,12 @@ function replaceManifestAppid() {
|
|||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [replaceManifestAppid(), uni()],
|
plugins: [replaceManifestAppid(), uni()],
|
||||||
server: {
|
build: {
|
||||||
port: 3000,
|
minify: 'terser',
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
drop_console: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user