跳至主要內容

关于本站的说明 http://doc.fly2you.cn

李鹏军...大约 2 分钟笔记说明

关于本站的说明 http://doc.fly2you.cnopen in new window

Vue 3 + TypeScript + Vite + VuePress 2 + Element Plus

该模板将帮助您在Vite中使用Vue 3和TypeScript进行开发。该模板使用Vue 3<script setup>SFCs,请查看 设置文档open in new window以了解更多信息。

技术栈

目录结构

本项目通过vite-cli脚手架生成(有根据业务需求做调整修改),下面是整个项目的目录结构。

├── docs                       // 文档目录
│   ├── .vuepress              // vuepress配置
│   │    ├── components        // 自定义组件
│   │    ├── config            // 变量配置文件
│   │    ├── public            // 静态资源
│   │    ├── styles            // scss样式
│   │    ├── client.ts         // vuepress 客户端配置
│   │    ├── config.ts         // vuepress 入口配置
│   │    └── theme.ts          // vuepress 主题配置
├── .gitignore                 // git 忽略项
├── deployDoc.sh               // 自动发布脚本
└── package.json               // package.json

package.json

{
  "name": "docfly2you",
  "version": "1.0.0",
  "description": "开源微同商城文档",
  "type": "module",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "keywords": [
    "platform-wechat-mall",
    "Java版微信小程序商城"
  ],
  "author": "李鹏军",
  "license": "Apache-2.0",
  "directories": {
    "doc": "docs"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.4.1",
    "gitalk": "^1.8.0",
    "qrcode.vue": "^3.3.3",
    "vue": "^3.3.4",
    "vuepress-theme-hope": "2.0.0-beta.238"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "@vuepress/client": "2.0.0-beta.67",
    "@vuepress/plugin-docsearch": "2.0.0-beta.67",
    "@vuepress/plugin-register-components": "^2.0.0-beta.67",
    "@vuepress/utils": "2.0.0-beta.67",
    "cross-env": "^7.0.3",
    "increase-memory-limit": "^1.0.7",
    "vite": "^4.4.2",
    "vitest": "^0.18.0",
    "vue-baidu-analytics": "^2.2.0",
    "vuepress": "2.0.0-beta.67"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/fuyang_lipengjun/docfly2you.git"
  }
}

安装

# 安装依赖
npm install

# 启动服务
npm run docs:dev

安装过程中,可能会出现安装过慢、报错等情况,请尝试以下方式:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm i

# 启动服务
npm run docs:dev

启动完成后会自动打开浏览器访问 http://localhost:8080

生产打包部署

npm run docs:build

部署Nginx配置参考

server {
    listen 80;
    server_name doc.fly2you.cn;
    
    location / {
        root '/home/doc';
        index index.html;
    }
}