vue-template

English | 简体中文

介绍

• 基于Vue 3, Vite, pnpm进行项目搭建

• Vite使用 esbuild 进行打包管理

• 使用 Typescript 进行类型声明和检查

• 基于文件的 vite-plugin-pages vue-router路由管理和 vite-plugin-vue-layouts 布局管理

• 使用 unplugin-auto-import 和unplugin-vue-components 进行自动化管理

• 使用 axios 进行网络请求

• 使用 Pinia 进行状态管理

• 使用 SCSS 进行样式扩展

• 加入 VueUse Composition API 工具以便于简化开发工作

• 加入 vue-i18n 进行国际化进行翻译

• 加入 [ unplugin-icons ] 进行图标管理和自动导入. 可以使用iconify 里面的任意图标

Vitesse 需要 Node 版本 >=14.18 Vue3 只支持原生支持 ES2015 的浏览器

介绍

项目结构

|—— docs/       //项目的文档介绍
|—— public/     //公用静态资源
|—— src/
  |—— apis/        //各类封装的api接口
  |—— assets/      //公共样式和静态资源
  |—— components/  //各类封装的组件
  |—— language/    //各类语言文件
  |—— layouts/     //自定义的模板
  |—— modules/     //各类导入的模块
  |—— pages/       //自动生成路由的文件
  |—— stores/      //pinia存储的全局数据
  |—— App.vue
  |—— auto-imports.d.ts
  |—— components.d.ts
  |—— main.ts       //入口文件
|—— .env.development//环境变量
|—— .env.production //环境变量
|—— .gitignore      //Git配置文件
|—— .npmrc          //npm配置文件
|—— build-test.sh   //build-test打包测试脚本
|—— index.html
|—— package.json
|—— pnpm-lock.yaml
|—— README.en.md
|—— README.md
|—— serve.js        //build-test打包测试服务器脚本
|—— tsconfig.json   //typeScript的配置
|—— tsconfig.node.json
|—— vite.config.ts  //vite的各项配置

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

构建测试，则需执行以下命令

pnpm build-test

然后你会看到用于发布的 dist 文件夹被生成。并执行模拟静态文件服务器的执行