Eleventy Plus Vite 项目教程
1. 项目的目录结构及介绍
eleventy-plus-vite/
├── src/
│ ├── _includes/
│ ├── assets/
│ ├── css/
│ ├── js/
│ ├── _data/
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── .nvmrc
├── .prettierrc
├── LICENSE
├── README.md
├── netlify.toml
├── package.json
└── postcss.config.js
src/
: 项目的源代码目录。_includes/
: 包含模板文件。assets/
: 存放静态资源文件,如图片、字体等。css/
: 存放CSS文件。js/
: 存放JavaScript文件。_data/
: 存放全局数据文件。index.njk
: 首页模板文件。
.eleventy.js
: Eleventy配置文件。.gitignore
: Git忽略文件配置。.nvmrc
: Node版本配置文件。.prettierrc
: Prettier代码格式化配置文件。LICENSE
: 项目许可证文件。README.md
: 项目说明文件。netlify.toml
: Netlify部署配置文件。package.json
: 项目依赖和脚本配置文件。postcss.config.js
: PostCSS配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是package.json
中的脚本部分。以下是一些关键的启动命令:
npm start
或npx @11ty/eleventy --serve
: 启动开发服务器。npm run build
或npx @11ty/eleventy
: 触发生产环境构建。
3. 项目的配置文件介绍
.eleventy.js
这是Eleventy的主要配置文件,用于配置Eleventy的行为,例如模板引擎、目录结构、插件等。
module.exports = function(eleventyConfig) {
// 添加插件、过滤器、短代码等配置
eleventyConfig.addPlugin(require('eleventy-plugin-vite'));
// 其他配置...
};
netlify.toml
这是Netlify的部署配置文件,用于配置Netlify的构建和部署行为。
[build]
command = "npm run build"
publish = "dist"
postcss.config.js
这是PostCSS的配置文件,用于配置PostCSS插件,例如Autoprefixer、Nesting等。
module.exports = {
plugins: {
'postcss-nesting': {},
'autoprefixer': {}
}
};
package.json
这是Node.js项目的配置文件,包含了项目的依赖、脚本和其他元数据。
{
"name": "eleventy-plus-vite",
"version": "1.0.0",
"scripts": {
"start": "eleventy --serve",
"build": "eleventy"
},
"dependencies": {
"@11ty/eleventy": "^1.0.0",
"eleventy-plugin-vite": "^1.0.0"
}
}
通过以上配置文件和目录结构的介绍,您可以更好地理解和使用Eleventy Plus Vite项目。