diff --git a/README.md b/README.md index 5f2624f..c9aa6b4 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ module.exports = { **新手必看，老鸟跳过** -很多小伙伴会问我，适配的问题, 因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大概普及一下 rem。 +很多小伙伴会问我，适配的问题, 因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。 我们知道 `1rem` 等于 `html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5` , 你可以看到在 iPhone 6 下看到 （ `1rem 等于 37.5px` ）： @@ -156,7 +156,7 @@ module.exports = { ### ✅ 多 UI 组件库供选择 -Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。 +Vite 构建工具，使用 `vite-plugin-style-import` 和 `unplugin-vue-components/vite` 实现按需引入。 #### 安装插件 @@ -242,7 +242,7 @@ vant 和 varlet 只需删除对应的 resolvers 即可 **注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改** -前往:[vue.config.js 基础配置](#base) +前往: [vite.config.js 基础配置](#base) ```javascript import Vue from "vue"; @@ -474,5 +474,5 @@ server: {

- + 如果对你有帮助送我一颗珍贵的小星星（づ￣3￣）づ╭❤～ diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index f35cccc..4527961 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -52,7 +52,7 @@ @media (min-width: 960px) { .title { - font-size: 24px !important; + font-size: 18px !important; } } diff --git a/docs/guide/edit.md b/docs/guide/edit.md index 9a67306..727a0b3 100644 --- a/docs/guide/edit.md +++ b/docs/guide/edit.md @@ -2,18 +2,18 @@ 欢迎有意愿参与到开源的朋友，加入到本文档的编写，书写文档不仅是教会别人知识，更是用自己的表达方式概括自己所学习知识的一种方式，这对个人来说是不可多得的成长机会。 -```js +```bash -// 拉取项目 +# 拉取项目 git clone https://github.com/sunniejs/vue-h5-template -// 切换分支 +# 切换分支 git checkout -b docs origin/docs -// 安装依赖 +# 安装依赖 yarn install -// 启动项目 +# 启动项目 yarn start ``` diff --git a/docs/guide/other/index.md b/docs/guide/other/index.md index 71b397e..7f967f2 100644 --- a/docs/guide/other/index.md +++ b/docs/guide/other/index.md @@ -4,7 +4,7 @@ ### 2、我可以用在个人或公司的项目吗？ -模版基于 MIT License,你可以根据自己的需求用到不同的项目里，如果对你有帮助点个 star 支持一下呗 🌟 +模版基于 MIT License，你可以根据自己的需求用到不同的项目里，如果对你有帮助点个 star 支持一下呗 🌟 ### 3、我是一个新手，有什么好的学习建议吗？ diff --git a/docs/guide/vue2/axios.md b/docs/guide/vue2/axios.md index 394d34f..20b095b 100644 --- a/docs/guide/vue2/axios.md +++ b/docs/guide/vue2/axios.md @@ -1,6 +1,6 @@ # Axios 封装及接口管理 -`utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。 +`utils/request.js` 封装 axios ，开发者需要根据后台接口做修改。 - `service.interceptors.request.use` 里可以设置请求头，比如设置 `token` - `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲 @@ -74,7 +74,7 @@ export default service; - `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi` - `method` 请求方法 - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 -- `hideloading` 默认 `false`,设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知 +- `hideloading` 默认 `false`，设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知 ```javascript import qs from "qs"; diff --git a/docs/guide/vue2/env.md b/docs/guide/vue2/env.md index f9b95ab..6f5d5f8 100644 --- a/docs/guide/vue2/env.md +++ b/docs/guide/vue2/env.md @@ -16,9 +16,9 @@ ##### 配置介绍 -  以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。 -  比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问。 -  除了 `VUE_APP_*` 变量之外，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` +  以 `VUE_APP_` 开头的变量，在代码中可以通过 `process.env.VUE_APP_` 访问。 +  比如：`VUE_APP_ENV = 'development'` 通过 `process.env.VUE_APP_ENV` 访问。 +  当然，除了 `VUE_APP_*` 变量之外，在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV` 和`BASE_URL` 在项目根目录中新建`.env.*` @@ -47,10 +47,10 @@ VUE_APP_ENV = 'staging' VUE_APP_ENV = 'production' ``` -这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV `development` `staging` `production` +这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV `development` `staging` `production` 变量我们统一在 `src/config/env.*.js` 里进行管理。 -这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？ +这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？ **修改起来方便，不需 要重启项目，符合开发习惯。** diff --git a/docs/guide/vue2/externals.md b/docs/guide/vue2/externals.md index d4d35f0..ddfe4c7 100644 --- a/docs/guide/vue2/externals.md +++ b/docs/guide/vue2/externals.md @@ -1,6 +1,6 @@ # 配置 externals 引入 cdn 资源 -这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 +这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用，不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 以实际测试一下。 另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名） diff --git a/docs/guide/vue2/lint.md b/docs/guide/vue2/lint.md index bdb1cec..20bb930 100644 --- a/docs/guide/vue2/lint.md +++ b/docs/guide/vue2/lint.md @@ -1,7 +1,6 @@ # Eslint + Pettier 统一开发规范 -VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会 -专门写个如何使用配合使用这三个玩意 +VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`，后面会专门写个如何使用配合使用这三个玩意儿 在文件 `.prettierrc` 里写 属于你的 pettier 规则 diff --git a/docs/guide/vue2/rem.md b/docs/guide/vue2/rem.md index a361907..6fef729 100644 --- a/docs/guide/vue2/rem.md +++ b/docs/guide/vue2/rem.md @@ -36,9 +36,9 @@ module.exports = { **新手必看，老鸟跳过** -很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大概普及一下 rem。 +很多小伙伴会问我，适配的问题，因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。 -我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`,你可以看到在 iPhone 6 下看到 （`1rem 等于 37.5px`）： +我们知道 `1rem` 等于`html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5`，你可以看到在 iPhone 6 下看到 （`1rem 等于 37.5px`）： ```html @@ -48,7 +48,7 @@ module.exports = { 因为我们用了 Vant 的组件，需要按照 `rootValue: 37.5` 来写样式。 -举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 +举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕，其他机型适配。 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 diff --git a/docs/guide/vue2/router.md b/docs/guide/vue2/router.md index 37ee864..1b8b2e5 100644 --- a/docs/guide/vue2/router.md +++ b/docs/guide/vue2/router.md @@ -4,7 +4,7 @@ **注意**：如果你使用了 `history` 模式，`vue.config.js` 中的 `publicPath` 要做对应的**修改** -前往:[vue.config.js 基础配置](#base) +前往: [vue.config.js 基础配置](#base) ```javascript import Vue from "vue"; diff --git a/docs/guide/vue2/sass.md b/docs/guide/vue2/sass.md index 52e738a..22c7ae8 100644 --- a/docs/guide/vue2/sass.md +++ b/docs/guide/vue2/sass.md @@ -52,7 +52,7 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置 #### 全局变量 -`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量： +`vue.config.js` 配置使用 `css.loaderOptions` 选项，注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入，配置`$cdn`通过变量形式引入 cdn 地址，这样向所有 Sass/Less 样式传入共享的全局变量： ```javascript const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); @@ -77,7 +77,7 @@ module.exports = { }; ``` -设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问 +设置 js 中可以访问 `$cdn`，`.vue` 文件中使用`this.$cdn`访问 ```javascript // 引入全局样式 diff --git a/docs/guide/vue2/start.md b/docs/guide/vue2/start.md index 4e2c3bc..eefeeaf 100644 --- a/docs/guide/vue2/start.md +++ b/docs/guide/vue2/start.md @@ -1,17 +1,17 @@ # 启动项目 -```js +```bash -// 拉取项目 +# 拉取项目 git clone https://github.com/sunniejs/vue-h5-template -// 切换分支 +# 切换分支 git checkout -b vue2-h5-template origin/vue2-h5-template -// 安装依赖 +# 安装依赖 yarn install -// 启动项目 +# 启动项目 yarn serve ``` diff --git a/docs/guide/vue2/vw.md b/docs/guide/vue2/vw.md index aa0572d..1e28bc7 100644 --- a/docs/guide/vue2/vw.md +++ b/docs/guide/vue2/vw.md @@ -1,7 +1,7 @@ # vm 适配方案 本项目使用的是 `rem` 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做 -。如果你想用 `vw`,你可以按照下面的方式切换。 +。如果你想用 `vw`，你可以按照下面的方式切换。 ## 1.安装依赖 diff --git a/docs/guide/vue3/base.md b/docs/guide/vue3/base.md index 8941b5a..87a5fc8 100644 --- a/docs/guide/vue3/base.md +++ b/docs/guide/vue3/base.md @@ -3,13 +3,13 @@ 如果你的 `Vue Router` 模式是 hash ```javascript -publicPath: './', +base: './', ``` 如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致** ```javascript -publicPath: '/app/', +base: '/app/', ``` ```javascript diff --git a/docs/guide/vue3/i18n.md b/docs/guide/vue3/i18n.md index 577f2a1..9fa9478 100644 --- a/docs/guide/vue3/i18n.md +++ b/docs/guide/vue3/i18n.md @@ -43,7 +43,7 @@ export function setLang(locale?: string) { # css图片解决方案 -目前在业务开发中,css的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案 +目前在业务开发中，CSS 的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置，目前这里提供 scss 的图片多语言的方案 ```css @mixin main-lang-bg($width, $height, $preUrl, $posUrl) { @@ -86,4 +86,4 @@ export function setLang(locale?: string) { @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png'); } -``` \ No newline at end of file +``` diff --git a/docs/guide/vue3/lint.md b/docs/guide/vue3/lint.md index 57c0f2e..3a8c337 100644 --- a/docs/guide/vue3/lint.md +++ b/docs/guide/vue3/lint.md @@ -1,3 +1,3 @@ -# Eslint+Pettier+stylelint 统一开发规范 +# Eslint + Pettier + Stylelint 统一开发规范 -根目录下的.eslintrc.js、.stylelint.config.js、.prettier.config.js 内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改 +根目录下的 `.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js` 内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改 diff --git a/docs/guide/vue3/pinia.md b/docs/guide/vue3/pinia.md index db01fe3..da65ede 100644 --- a/docs/guide/vue3/pinia.md +++ b/docs/guide/vue3/pinia.md @@ -15,9 +15,9 @@ │ │ └── user.js │ ├── index.js ``` -目前pinia分为两种编程模式,options API和 Composition API，我们这边都会列举出来实现的业务逻辑效果是一样的，提供大家思路 +目前pinia分为两种编程模式，Options API 和 Composition API，我们这边都会列举出来实现的业务逻辑效果是一样的，提供大家思路 -### options API: +### Options API: ```javascript interface StoreUser { diff --git a/docs/guide/vue3/router.md b/docs/guide/vue3/router.md index 485ba08..027c7e4 100644 --- a/docs/guide/vue3/router.md +++ b/docs/guide/vue3/router.md @@ -4,7 +4,7 @@ **注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改** -前往:[vue.config.js 基础配置](#base) +前往: [vite.config.js 基础配置](#base) ```javascript import Vue from "vue"; diff --git a/docs/guide/vue3/start.md b/docs/guide/vue3/start.md index 9bb2a27..cea9ad8 100644 --- a/docs/guide/vue3/start.md +++ b/docs/guide/vue3/start.md @@ -1,14 +1,14 @@ # 启动项目 -```js +```bash -// 拉取项目 +# 拉取项目 git clone https://github.com/sunniejs/vue-h5-template -// 安装依赖 +# 安装依赖 yarn install -// 启动项目 +# 启动项目 yarn dev ``` diff --git a/docs/guide/vue3/ui.md b/docs/guide/vue3/ui.md index 05a9712..ab6713a 100644 --- a/docs/guide/vue3/ui.md +++ b/docs/guide/vue3/ui.md @@ -1,6 +1,6 @@ # 多 UI 组件库供选择 -Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。 +Vite 构建工具，`使用 vite-plugin-style-import` 和 `unplugin-vue-components/vite` 实现按需引入。 ## 安装插件 diff --git a/docs/guide/vue3/viewport.md b/docs/guide/vue3/viewport.md index 75a6daf..7b82adf 100644 --- a/docs/guide/vue3/viewport.md +++ b/docs/guide/vue3/viewport.md @@ -36,7 +36,7 @@ module.exports = { **新手必看，老鸟跳过** -很多小伙伴会问我，适配的问题, 因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大概普及一下 rem。 +很多小伙伴会问我，适配的问题, 因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。 我们知道 `1rem` 等于 `html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5` , 你可以看到在 iPhone 6 下看到 （ `1rem 等于 37.5px` ）：