docs: 完善文档

This commit is contained in:
fonghehe 2025-08-27 15:38:15 +08:00
parent 4dee78d00c
commit b261cc0f19
18 changed files with 27789 additions and 11630 deletions

View File

@ -1,13 +1,31 @@
{ {
"hash": "f28f7884", "hash": "239dbc0d",
"browserHash": "c30aef33", "configHash": "0cbf0876",
"lockfileHash": "05441bb6",
"browserHash": "dec8ef8e",
"optimized": { "optimized": {
"vue": { "vue": {
"src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js", "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js", "file": "vue.js",
"fileHash": "5ddba685", "fileHash": "c8a520fe",
"needsInterop": false
},
"vitepress > @vue/devtools-api": {
"src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
"file": "vitepress___@vue_devtools-api.js",
"fileHash": "b3eaab79",
"needsInterop": false
},
"vitepress > @vueuse/core": {
"src": "../../../../node_modules/@vueuse/core/index.mjs",
"file": "vitepress___@vueuse_core.js",
"fileHash": "e7d34837",
"needsInterop": false "needsInterop": false
} }
}, },
"chunks": {} "chunks": {
"chunk-RMNUDMGF": {
"file": "chunk-RMNUDMGF.js"
}
}
} }

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,12 +1,12 @@
# Vue-H5-Template # Vue-H5-Template
[Vue-H5-Template](https://github.com/sunniejs/vue-h5-template),是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ,构建移动端快速开发脚手架 [Vue-H5-Template](https://github.com/sunniejs/vue-h5-template),是基于 vite7 + vue3.5 + pinia + ( Vant or Varlet or NutUI ) + viewport(VW) 适配方案 ,构建移动端快速开发脚手架
## 特点 ## 特点
### 最新技术栈 ### 最新技术栈
- 框架选型基于当下流行的 vue + vite + ts 模式,精选社区 star 和满意度均不错的 ui 框架和 vite 插件,并时常进行更新,确保与官方文档一致 - 框架选型基于当下流行的 vue + vite + ts 模式,精选社区 star 和满意度均不错的 ui 框架和 vite 插件,并时常进行更新,确保与官方文档一致
### 基于 TypeScript ### 基于 TypeScript

View File

@ -2,11 +2,11 @@
## node 版本要求 ## node 版本要求
推荐 16.17.0+以上的版本,毕竟 2022 年了,别掐着 12+的版本了,你也可以使用[nvm](https://github.com/nvm-sh/nvm)或[nvm-windows](https://github.com/coreybutler/nvm-windows)在同一台电脑上管理多个 node 版本。 推荐 20.19.0+以上的版本,毕竟 2025 年了,别掐着 16+的版本了,你也可以使用[nvm](https://github.com/nvm-sh/nvm)或[nvm-windows](https://github.com/coreybutler/nvm-windows)在同一台电脑上管理多个 node 版本。
## 包管理器 ## 包管理器
尽量使用 yarn 或者 pnpm本项目仅保证在 yarn 或 pnpm 下正确运行npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像,会有各种奇怪的 bug。 尽量使用 yarn 或者 pnpm本项目仅保证在 yarn 或 pnpm 下正确运行npm 涉及到网络环境等各种情况的限制不做过多考虑。
## 启动项目 ## 启动项目

View File

@ -1,21 +1,12 @@
# alias # alias
```javascript ```javascript
import { fileURLToPath, URL } from 'node:url';
resolve: { resolve: {
alias: [{ alias: {
find: 'vue-i18n', '@': fileURLToPath(new URL('./src', import.meta.url)),
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', '#': fileURLToPath(new URL('./types', import.meta.url))
}, },
// /@/xxxx => src/xxxx
{
find: /\/@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /\/#\//,
replacement: pathResolve('types') + '/',
},
],
}, },
``` ```

View File

@ -13,30 +13,43 @@ base: '/app/',
``` ```
```javascript ```javascript
export default function ({ command }: ConfigEnv): UserConfigExport { export default function ({ command, mode }: ConfigEnv): UserConfig {
const isProduction = command === "build"; const isProduction = command === "build";
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env);
return { return {
server: { base: "/",
host: "0.0.0.0", root,
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"#": fileURLToPath(new URL("./types", import.meta.url)),
},
},
server: {
host: true,
hmr: true,
},
plugins: createVitePlugins(viteEnv, isProduction),
build: {
minify: "terser",
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
}, },
plugins: [
vue(),
vueJsx(),
createStyleImportPlugin({
resolves: [NutuiResolve()],
}),
eruda(),
viteMockServe({
mockPath: "./src/mock",
localEnabled: command === "serve",
logger: true,
}),
],
css: { css: {
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
quietDeps: true,
silenceDeprecations: ["legacy-js-api"],
// 配置 nutui 全局 scss 变量 // 配置 nutui 全局 scss 变量
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`, additionalData: `@use "@nutui/nutui/dist/styles/variables.scss" as *; @use '@/styles/vant.scss' as *;`,
}, },
}, },
}, },

View File

@ -5,10 +5,20 @@
# 拉取项目 # 拉取项目
git clone https://github.com/sunniejs/vue-h5-template git clone https://github.com/sunniejs/vue-h5-template
<<<<<<< Updated upstream
# 安装依赖 # 安装依赖
yarn install yarn install
# 启动项目 # 启动项目
yarn dev yarn dev
=======
// 安装依赖
- pnpm install
- yarn install
// 启动项目
- pnpm dev
- yarn dev
>>>>>>> Stashed changes
``` ```

View File

@ -5,55 +5,26 @@ Vite 构建工具,`使用 vite-plugin-style-import` 和 `unplugin-vue-componen
## 安装插件 ## 安装插件
```bash ```bash
yarn add vite-plugin-style-import -D pnpm add unplugin-vue-components/vite -D
yarn add unplugin-vue-components/vite -D
``` ```
## 使用组件库 ## 使用组件库
nutUI 没有按需加载的 resolversstyle 需要自己配置按需加载 vant 、 varlet 和 nutUI 可以使用组件按需加载
`config/vite/plugins/styleImport.ts` 设置
```javascript
// 按需加载样式文件
...
createStyleImportPlugin({
resolves: [NutuiResolve()],
}),
...
```
项目在 `src/plugins/nutUI.ts` 下统一管理组件,用哪个引入哪个,无需在页面里重复引用
```javascript
// 按需全局引入nutUI组件
import Vue from "vue";
import { Button, Cell, CellGroup } from "@nutui/nutui";
export const nutUiComponents = [Button, Cell, CellGroup];
// 在main.ts文件中引入
nutUiComponents.forEach((item) => {
app.use(item);
});
```
vant 和 varlet 可以使用组件按需加载
`config/vite/plugins/component.ts` `config/vite/plugins/component.ts`
```javascript ```javascript
import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers'; import { VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
import NutUIResolver from '@nutui/auto-import-resolver';
... ...
resolvers: [VantResolver(), VarletUIResolver()], resolvers: [VantResolver(), VarletUIResolver(), NutUIResolver()],
... ...
``` ```
## 不需要某个组件库 ## 不需要某个组件库
nutUI 需删除`src/plugins/nutUI.ts``main.ts`文件下的引入 只需删除对应的 resolvers 即可
vant 和 varlet 只需删除对应的 resolvers 即可
删除后需全局搜索删除不需要的组件,避免报错 删除后需全局搜索删除不需要的组件,避免报错
@ -64,5 +35,3 @@ vant 和 varlet 只需删除对应的 resolvers 即可
- [vant](https://vant-contrib.gitee.io/vant/#/zh-CN) - [vant](https://vant-contrib.gitee.io/vant/#/zh-CN)
- [varlet](https://varlet-varletjs.vercel.app/#/zh-CN/button) - [varlet](https://varlet-varletjs.vercel.app/#/zh-CN/button)
- [quark-design](https://vue-quarkdesign.hellobike.com/#/)

View File

@ -1,6 +1,6 @@
{ {
"devDependencies": { "devDependencies": {
"vitepress": "^1.0.0-alpha.64", "vitepress": "^1.6.4",
"vue": "^3.2.47" "vue": "^3.2.47"
}, },
"scripts": { "scripts": {

1960
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

1443
yarn.lock

File diff suppressed because it is too large Load Diff