使用mobile‐first多端模板（saas主题）

使用mobile-first多端模板（saas主题），需要按顺序完成以下步骤。

1、阅读并完成适配AUI步骤

适配AUI文档

2、使用全局切换，指定多端模板

在项目入口 src/main.js 文件中导入 Vue 依赖后，增加如下配置：

// Vue 2.0
Vue.prototype.tiny_mode = { value: 'mobile-first' }

// Vue 3.0
app.config.globalProperties.tiny_mode = { value: 'mobile-first' }

3、引入tainwind样式

安装tailwind以及tailwind插件，命令行中输入以下命名：

npm i tailwindcss tailwindcss-vite-plugin --legacy-peer-deps

在项目根目录下新增一个tailwind.config.js文件以及一个postcss.config.js 如项目配置了type: module，则需新增tailwind.config.cjs和postcss.config.cjs

tailwind.config.cjs：

/** @type { import('tailwindcss').Config } */
module.exports = {
  presets: [require("@opentiny/vue-theme-saas/tailwind.config.js")],
  content: [
    "./src/**/*.{css,less,vue,js,jsx,ts,tsx}",
    "./node_modules/@opentiny/**/mobile-first.js",
  ],
};

postcss.config.cjs：

module.exports = {
  plugins: {
    tailwindcss: {}, 
  },
};

在main.js同级目录下，新增tailwind.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js中引入使用tailwind.css

import "./tailwind.css";