README

从 craft-vue 模板分叉而来，集成了 Tailwind CSS 工具框架，并使用 Purgecss 删除未使用的 CSS。

包含内容

• npm run dev / yarn dev：一流的本地开发体验。

  • Webpack + vue-loader 用于单文件 Vue 组件
  • 状态保留的实时热重载
  • 文件编辑时页面重新加载（twig, html 等）
  • 状态保留的编译错误覆盖
  • 保存时使用 ESLint 进行代码检查
  • 源代码映射

• npm run build / yarn build：生产就绪构建。

  • 使用 UglifyJS v3 对 JavaScript 进行压缩
  • Babel 编译
  • 所有组件的 CSS 提取为单个文件，并使用 cssnano 压缩
  • 使用版本哈希编译静态资源，以实现高效的长期缓存
  • 使用 Purgecss 删除未使用的 CSS。包括白名单以保持第三方库不变。
  • 包大小分析

分叉它并创建自己的

您应该分叉此存储库以创建自己的、针对您设置的 boilerplate。此模板不假设预处理程序、模板结构或代码检查配置。

设置

此 boilerplate 需要全局安装 Vue CLI 3。请参阅 Vue CLI 安装指南。

# create & install project
composer create-project chasegiunta/craft-vue-tailwind PATH

# run Craft's setup & install
./craft setup

# install the Twigpack plugin
./craft install/plugin twigpack

# install dependencies
npm install # yarn

# (optional) initialize Tailwind's config file (tailwind.config.js)
./node_modules/.bin/tailwind init

# run dev server (default runs on localhost:8080)
npm run dev # yarn dev (alias for 'yarn serve')

# build for production with minification
npm run build # yarn build

启动后，您可以使用 Vue CLI 的 GUI 定制项目以适应您的需求。只需运行 vue ui 并导入您新创建的项目即可开始。

您还可以从 GUI 运行 dev 和 build 任务，以获取有价值的构建统计信息和运行时分析。

注意：在开发过程中，只有您的 资源 将从 localhost:8080 服务器，并在基本模板中引用。您仍然可以在您正常的开发域名（mysite.test 等）下本地加载网站。这也将在加载页面时由于 JS/CSS 资源从 JavaScript 加载而导致短暂的未样式闪烁。**在构建后，生产环境下不会出现此闪烁**。

如果 webpack 的开发服务器（yarn dev）没有运行，Twigpack 将从构建目录提供您的资源。

有关工作原理的详细说明，请参阅 Twigpack 文档 和 Vue CLI 文档。

预处理器

此 boilerplate 已预先配置了针对大多数流行 CSS 预处理器的 CSS 提取，包括 LESS、SASS、Stylus 和 PostCSS。要使用预处理器，您只需安装相应的 webpack 加载器即可。例如，要使用 SASS

npm install sass-loader node-sass --save-dev
# yarn add sass-loader node-sass --dev

注意您还需要安装 node-sass，因为 sass-loader 依赖于它作为 peer 依赖。

更多关于此的信息请参阅 https://cli.vuejs.ac.cn/guide/css.html#pre-processors

自动组件注册

放置在 src/components 中的任何 Vue 组件都将自动注册到 Vue 中。如果您愿意，可以嵌套这些组件在子文件夹中。

Babel 编译

此模板使用babel-preset-env来配置babel。您可以在这里了解更多信息。

代码风格检查

您可以通过GUI的vue ui添加@vue/cli-plugin-eslint插件来启用代码风格检查。