README

预设中包含什么？

• Vue 2.6.12
• Laravel Mix 5
• Tailwind 1.8.x
• Pug 模板引擎，用于编写 Vue SFC 模板
• ESLint（可选）
  • ESLint 导入解析别名
  • ESLint Airbnb 配置

可用预设

vue-tailwind-preset

此预设排除任何 ESLint 配置

vue-tailwind-eslint-preset

此预设包含 ESLint 配置，并强制执行 Vue 推荐的代码风格规则。

vue-tailwind-airbnb-eslint-preset

此预设包含 ESLint 配置，并强制执行 Vue + Airbnb JavaScript 代码风格规则。

1.0 安装

$ composer require techrino/vue-tailwind-laravel-ui-preset

1.1 初始化预设

⚠️ 警告

以下命令将覆盖列表中列出的某些配置：

创建的配置列表

$ ▶ artisan ui vue-tailwind
  
   Select a frontend stack:
    [vue-tailwind-preset              ] Vue + Tailwind CSS
    [vue-tailwind-eslint-preset       ] Vue + Tailwind CSS + ESLint
    [vue-tailwind-airbnb-eslint-preset] Vue + Tailwind CSS + airbnb ESLint
   > 
   # Using directional key select a choice

1.1.1 创建的配置列表

执行上述命令后，这些配置文件将放置到您的项目中。

./tailwind.config.js
./postcss.config.js
./webpack.config.js
./webpack.mix.js
./.eslintrc.json
./.eslintignore
./resources/views
./cypress <- E2E Testing Scripts for preset
./resources/views/presets/vue-tailwind-preset
./resources/presets/vue-tailwind-preset
./public/presets <- image assets

将额外路由 /vue-tailwind-laravel-ui-preset 添加到 routes/web.php 以测试预设。

1.2 安装前端包

$ npm install
# or
$ yarn install

1.3 构建包

$ npm run dev

1.4 额外配置

此预设还预先配置了 webpack 别名，默认情况下，这些别名可以在任何 .vue 或 .js 文件中使用

管理您的 webpack 别名

所有别名都在 webpack.config.js 中预先配置，您可以根据您的使用情况进行修改。

module.exports =
    {
        resolve: {
        roots: [
          path.resolve(__dirname, 'resources/presets/vue-tailwind-preset/vue/'),
        ],
          extensions: [ '.js', '.vue', '.scss', '.css'],
          alias: {
            "@": `${__dirname}/resources/presets/vue-tailwind-preset/vue`,
            "@css": `${__dirname}/resources/presets/vue-tailwind-preset/css`,
          },
        modules: [
          'node_modules',
    
        ]
    }
};

如果您使用的是 vue-tailwind-eslint-preset，请勿忘记更新 .eslintrc.json 中的别名，位于 settings 部分

{
"settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["@", "./resources/presets/vue-tailwind-preset/vue"],
                    ["@css", "./resources/presets/vue-tailwind-preset/css"]
                ],
                "extensions": [".js", ".vue"]
            }
        }
    }
}