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

李鹏军2022年9月11日
  • 笔记
  • 说明
大约 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以了解更多信息。

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's Take Over mode by following these steps:

  1. Run Extensions: Show Built-in Extensions from VS Code's command palette, look for TypeScript and JavaScript Language Features, then right click and select Disable (Workspace). By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
  2. Reload the VS Code window by running Developer: Reload Window from the command palette.

技术栈

目录结构

本项目通过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.0.9",
    "@vue/reactivity": "^3.2.38",
    "@vue/shared": "^3.2.38",
    "@vuepress/utils": "^2.0.0-beta.51",
    "element-plus": "^2.2.14",
    "gitalk": "^1.8.0",
    "sass": "^1.54.8",
    "vue": "^3.2.25",
    "vuepress-theme-hope": "^2.0.0-beta.97"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@vitejs/plugin-vue": "^2.3.3",
    "vuepress": "2.0.0-beta.51",
    "@vuepress/client": "2.0.0-beta.51",
    "@vuepress/plugin-register-components": "^2.0.0-beta.51",
    "@vuepress/plugin-docsearch": "next",
    "vuepress-plugin-md-enhance": "next",
    "vuepress-plugin-photo-swipe": "next",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "vite": "^2.9.9",
    "vitest": "^0.18.0",
    "vue-baidu-analytics": "^2.2.0"
  }
}

安装

# 安装依赖
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;
    }
}