# software-studio

**Repository Path**: xiangyang666/software-studio

## Basic Information

- **Project Name**: software-studio
- **Description**: 陕工院-软件工作室项目（微信小程序端）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-12
- **Last Updated**: 2024-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 陕工院-软件工作室

### 技术栈：uniapp + vue3 + pinia + scss + uview-plus

*https://uniapp.dcloud.net.cn/quickstart-cli.html*

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

### 自动导入 vue3 的 hooks

_借助 unplugin-auto-import/vite 这个插件_

1. 安装
   > npm i -D unplugin-auto-import
2. Vite 配置

```js
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // 加上下面的配置
    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
      ],
      imports: ["vue", "uni-app", "pinia"],
      dts: "typings/auto-imports.d.ts",
    }),
  ],
});
```

### pinia

1. 安装依赖
   > npm install pinia@2.0.14

**注：如不指定版本号，则会出现一下报错**
*https://blog.csdn.net/weixin_39550080/article/details/134154746*

```js
vue3代码运行报错import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref,

No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-demi/lib/index.mjs” for import “hasInjectionContext”
node_modules/.pnpm/pinia@2.1.7_typescript@5.0.4_vue@3.2.47/node_modules/pinia/dist/pinia.mjs:6:9:
6 │ import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, getCurrentScope, onScopeDis…
╵ ~~~~~~~~~~~~~~~~~~~
D:\publicGroup\algo_riskmanagement_web\node_modules.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1636
let error = new Error(${text}${summary});
```

**原因：vue 版本和 pinia 版本不兼容导致，因为 vue 版本"vue": "3.2.17"，pinia 版本"pinia": “^2.0.34”，这两个版本不兼容。**

### scss

1. 安装依赖
   > npm install sass -D
2. 定义全局样式

- 新建 src\assets\base.scss 全局样式文件
  > $bgColor: #ccc;
- 在 vite.config.js 中配置

```js
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/base.scss";`,
      },
    },
  },
});
```

- 在组件中使用

```js
<template>
  <div class="main">hello world</div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: $bgColor;
  color: blue;
}
</style>
```

### uview-plus

1. 安装
   > npm install uview-plus
2. 引入组件库

   ```js
   // main.js
   import { createSSRApp } from "vue";
   import App from "./App.vue";
   // 引入uview
   import uviewPlus from "uview-plus";
   // 查询到正在使用的uview-plus的版本：
   console.log("当前项目uview-plus：" + uni.$uconfig.v);
   export function createApp() {
     const app = createSSRApp(App);
     app.use(uviewPlus);
     return {
       app,
     };
   }
   ```

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

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

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

4. 配置 easycom 组件模式

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

> uni-app 为了调试性能的原因，修改 easycom 规则不会实时生效，配置完后，您需要重启 HX 或者重新编译项目才能正常使用 uview-plus 的功能。

> 请确保您的 pages.json 中只有一个 easycom 字段，否则请自行合并多个引入规则。

```js
// pages.json
  {
    "easycom": {
  // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
  "custom": {
    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
  }
  }
}
```