mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-09-09 05:32:33 +08:00
docs: 完善文档
This commit is contained in:
parent
4dee78d00c
commit
b261cc0f19
26
docs/.vitepress/cache/deps/_metadata.json
vendored
26
docs/.vitepress/cache/deps/_metadata.json
vendored
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
10796
docs/.vitepress/cache/deps/chunk-RMNUDMGF.js
vendored
Normal file
10796
docs/.vitepress/cache/deps/chunk-RMNUDMGF.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
docs/.vitepress/cache/deps/chunk-RMNUDMGF.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/chunk-RMNUDMGF.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
4505
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
vendored
Normal file
4505
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
9731
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
vendored
Normal file
9731
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
10798
docs/.vitepress/cache/deps/vue.js
vendored
10798
docs/.vitepress/cache/deps/vue.js
vendored
File diff suppressed because it is too large
Load Diff
8
docs/.vitepress/cache/deps/vue.js.map
vendored
8
docs/.vitepress/cache/deps/vue.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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
|
||||||
|
|
||||||
|
@ -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 涉及到网络环境等各种情况的限制不做过多考虑。
|
||||||
|
|
||||||
## 启动项目
|
## 启动项目
|
||||||
|
|
||||||
|
@ -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') + '/',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
```
|
```
|
||||||
|
@ -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 *;`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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
|
||||||
|
|
||||||
```
|
```
|
||||||
|
@ -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 没有按需加载的 resolvers,style 需要自己配置按需加载
|
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/#/)
|
|
||||||
|
@ -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
1960
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user