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。包括白名单以保持第三方库不变。
  • 包大小分析

分叉并制作自己的

你应该分叉此存储库以创建自己的、具有自己见解的模板。此模板对预处理器、模板结构或检查配置没有假设。

设置

此模板需要在你的机器上全局安装Vue CLI 3 安装。

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

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

# install the Twigpack plugin
./craft plugin/install 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等）本地加载你的网站。这也将在页面加载时由于从javascript加载JS/CSS资产而造成短暂的未样式闪烁。**在生产构建后，此闪烁不存在**。

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

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

预处理器

此模板已预先配置了CSS提取，适用于包括LESS、SASS、Stylus和PostCSS在内的大多数流行的CSS预处理器。要使用预处理器，你需要安装相应的webpack加载器。例如，要使用SASS

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

注意你还需要安装node-sass，因为sass-loader将其作为依赖项。

更多关于此信息，请参阅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插件来启用代码风格检查。