vue 现有项目 加入 vuepress

Posted 2021-09-07 _____

将VuePress添加到项目

官网已经不再推荐全局安装 VuePress

yarn add -D vuepress # npm install -D vuepress

VuePress将作为项目的依赖项安装。

package.json 中添加一些 scripts(opens new window)

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

VuePress 遵循 “约定优于配置” 的原则，需要创建目录结构如下：

docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

VuePress 其他配置看(官网)[https://vuepress.vuejs.org/zh/]

遇到的问题

VuePress 中使用了 element-ui

配置没有问题，但是在运行 vuepress dev docs 时报错Cannot find module \'core-js/library/fn/object/assign 等错误信息，错误完全围绕 core-js
跟着google走，大部分文档都让我升级 core-js，然而并没有用

最后在 https://github.com/vuejs/vuep... 中发现，原来是 element ui 依赖 core-js的 2.x 版本，而web项目依赖 core-js 的 3.x 版本导致的（错误信息中没有关于 element-ui 的，真坑爹）

改 core-js 的版本是不可能的，安装依赖 async-validator@1.11.5 就可以 解决问题 了！

yarn add async-validator@1.11.5 # npm install async-validator@1.11.5

项目使用了Jest测试用例
运行报 [BABEL] 错误
原因在于@vue/cli-plugin-babel 依赖的babel-core为babel-core@^7.0.0-bridge.0，babel7以下的都无法识别

npm i -D babel-core@^7.0.0-bridge.0 

而默认的vue-cli产出通过yarn生成，默认带了这个依赖，因此没有问题。
可见在依赖管理方面yarn做的更好，建议vue-test-utils的官方文档中标注下这类问题。

---

参考

• vuepress加载element-ui时报错
• 如何将VUEPRESS集成到您现有的VUE项目中
• jestReferenceError: BABEL unknown: Unknown option