README

Vue CLI 模板的所有功能，专为 Craft CMS 项目定制单文件组件。

包含内容

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

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

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

  • 使用 UglifyJS v3 进行 JavaScript 最小化
  • Babel 编译
  • 将所有组件的 CSS 提取到单个文件中，并使用 cssnano 最小化
  • 使用版本哈希编译静态资产，以实现高效的长期缓存
  • 包大小分析

分叉它并创建自己的

你应该分叉此存储库以创建适合您设置的特定模板。此模板对预处理器、模板结构或检查配置没有假设。

我还创建了一个 此模板的分支，它集成了 TailwindCSS & Purgecss。

设置

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

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

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

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

# install dependencies
npm install # yarn

# 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 文档。

预处理器

此模板已预先配置了大多数流行 CSS 预处理器的 CSS 提取，包括 LESS、SASS、Stylus 和 PostCSS。要使用预处理器，您只需安装相应的 webpack loader 即可。例如，要使用 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来启用代码风格检查。