在uni-app项目中配置vue.config.js和集成插件

在本文中，我们将探讨如何在一个基于uni-app和Vue 2.7版本的项目中配置vue.config.js文件，并集成uni-composition-api和unplugin-vue2-script-setup插件。

1. 项目初始化

首先，确保你已经使用适当的Vue版本初始化了uni-app项目。可以使用以下命令来创建项目：

vue create -p dcloudio/uni-preset-vue#2.7 my-project

2. 安装必要的依赖

进入你的项目目录，并安装必要的依赖：

cd my-project
npm install uni-composition-api@^0.6.1 unplugin-vue2-script-setup@0.11.3

3. 配置vue.config.js

在项目的根目录中创建或编辑vue.config.js文件，以包含以下配置：

// vue.configs.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
const path = require('path');

const resolve = dir => path.join(__dirname, dir);

module.exports = {
  transpileDependencies: ['@sadais/piui-tool', 'sadais-piui'],
  devServer: {
    port: 8080,
    disableHostCheck: true,
    proxy: {},
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },
  outputDir: 'build', 
  assetsDir: 'static', 
  lintOnSave: false,
  productionSourceMap: false, 
  parallel: false,  
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
  chainWebpack(config) {
    config.plugins.delete('fork-ts-checker');
    config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('src/assets'))
        .set('api', resolve('src/api'))
        .set('views', resolve('src/views'))
        .set('components', resolve('src/components'));
  },
};

这段配置不仅配置了开发服务器和构建选项，还通过chainWebpack配置了一系列别名，以便在你的项目中更方便地引用文件。

4. 使用uni-composition-api

现在你已经安装了uni-composition-api，你可以在你的Vue组件中使用它：

<script>
import store from '@/store/index';
import { ref } from 'uni-composition-api';

export default {
  setup() {
    const chargesList = ref([
      {
        "id": 1,
        "name": "收费标准依据余发改价格〔2020〕46号文件，具体为：黄牌6元小时  封顶36元每日  夜间8点到早8点10元一车次， 蓝牌减半。",
      },
      {
        "id": 2,
        "name": "包月政策：10吨以上600元每月， 5吨到10吨450元每月， 5吨以下300元每月。",
      },
    ]);

    return {
      store,
      chargesList
    };
  }
}
</script>

在这段代码中，我们使用了uni-composition-api的ref函数来创建一个响应式的变量chargesList，并在setup函数中返回它，这样我们就可以在模板中使用它。

5. 利用unplugin-vue2-script-setup简化脚本设置

unplugin-vue2-script-setup插件允许你使用<script setup>语法来简化你的组件脚本。确保你已经在vue.config.js中配置了这个插件。

结论

通过以上步骤，你应该能够成功地在你的uni-app项目中配置vue.config.js文件，并集成uni-composition-api和unplugin-vue2-script-setup插件。这不仅可以提高你的开发效率，还可以让你更好地利用Vue 2.7的功能。

---

希望这个文章草稿对你有所帮助！如果有任何其他的细节或特定方面你想要了解，可以随时告诉我。