Vue-powered Static Site Generator
This is a demonstration website modeled after VuePress official website(v2.0.0-beta.67), with default Chinese language
Vue-Powered
Markdown-centered project structure; Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
Performant
bundler are Vite (default) and Webpack; VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
Themes Plugins
Providing a default theme out of the box; Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site.
Integrate in the project
# install in your project
pnpm add -D vuepress@next @vuepress/client@next vue
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
pnpm vuepress dev
# build to static files
pnpm vuepress build
# install in your project
yarn add -D vuepress@next
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
yarn vuepress dev
# build to static files
yarn vuepress build
# install in your project
npm install -D vuepress@next
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
npx vuepress dev
# build to static files
npx vuepress build
Plugins (supplementary)
- 1.markdown copy, Supports one click copy function;
- 2.markdown enhance, Support functions such as code block grouping, task list, flowchart, slides, etc;
Problem Record
- 1.Some plugins or files are missing under @vuePress in node_modules, resulting in failure when importing some files—— resolved (√)
⠙ Initializing and preparing dataerror Import file @vuepress/theme-default/src/client/styles/_variables.scss not found error Import file @vuepress/theme-default/src/client/styles/vars.scss not found error Import file @vuepress/theme-default/src/client/styles/vars-dark.scss not found error Import file @vuepress/plugin-back-to-top/src/client/styles/vars.css not found error Import file @vuepress/plugin-medium-zoom/src/client/styles/vars.css not found error Import file @vuepress/plugin-external-link-icon/src/client/styles/vars.css not found error Import file @vuepress/plugin-nprogress/src/client/styles/vars.css not found error Import file @vuepress/plugin-pwa-popup/src/client/styles/vars.css not found error Import file @vuepress/plugin-search/src/shared/hotKey.ts not found error Import file @vuepress/plugin-search/src/client/styles/vars.css not found error Import file @vuepress/plugin-back-to-top/src/client/styles/vars.css not found error Import file @vuepress/theme-default/src/client/styles/_variables.scss not found error Import file @vuepress/theme-default/src/client/styles/vars.scss not found error Import file @vuepress/theme-default/src/client/styles/vars-dark.scss not found error Import file @vuepress/plugin-external-link-icon/src/client/styles/vars.css not found error Import file @vuepress/plugin-medium-zoom/src/client/styles/vars.css not found error Import file @vuepress/plugin-nprogress/src/client/styles/vars.css not found error Import file @vuepress/plugin-search/src/shared/hotKey.ts not found error Import file @vuepress/plugin-search/src/client/styles/vars.css not found ⠹ Initializing and preparing dataerror Import file @vuepress/plugin-pwa-popup/src/client/styles/vars.css not foundresolution process: 1. Import the ecosystem directory to the project; 2. vuepress/config.js, add content:markdown->importCode. - 2.When customizing components, use 'import. meta' to report errors, or use other methods to define dirname - resolved (√)
yarn add -D @vuepress/plugin-register-components yarn add path
