Merge pull request #149 from libondev/docs

docs: typo
This commit is contained in:
fonghehe 2024-11-11 17:04:24 +08:00 committed by GitHub
commit 4dee78d00c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 47 additions and 48 deletions

View File

@ -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 = {
### <span id="ui">✅ 多 UI 组件库供选择 </span>
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: {
<p>
<img src="https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg" width="256" style="display:inline; ">
</p>
如果对你有帮助送我一颗珍贵的小星星づ ̄3 ̄づ╭❤

View File

@ -52,7 +52,7 @@
@media (min-width: 960px) {
.title {
font-size: 24px !important;
font-size: 18px !important;
}
}

View File

@ -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
```

View File

@ -4,7 +4,7 @@
### 2、我可以用在个人或公司的项目吗
模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟
模版基于 MIT License你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟
### 3、我是一个新手有什么好的学习建议吗

View File

@ -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";

View File

@ -16,9 +16,9 @@
##### 配置介绍
&emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
&emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问。
&emsp;&emsp;除了 `VUE_APP_*` 变量之外,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV``BASE_URL`
&emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
&emsp;&emsp;比如`VUE_APP_ENV = 'development'` 通过 `process.env.VUE_APP_ENV` 访问。
&emsp;&emsp;当然,除了 `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 下新建三个对应的文件呢?
**修改起来方便,不需
要重启项目,符合开发习惯。**

View File

@ -1,6 +1,6 @@
# 配置 externals 引入 cdn 资源
这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可
这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可
以实际测试一下。
另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)

View File

@ -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 规则

View File

@ -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
<html data-dpr="1" style="font-size: 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 屏幕。

View File

@ -4,7 +4,7 @@
**注意**:如果你使用了 `history` 模式,`vue.config.js` 中的 `publicPath` 要做对应的**修改**
前往:[vue.config.js 基础配置](#base)
前往: [vue.config.js 基础配置](#base)
```javascript
import Vue from "vue";

View File

@ -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
// 引入全局样式

View File

@ -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
```

View File

@ -1,7 +1,7 @@
# vm 适配方案
本项目使用的是 `rem` 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做
。如果你想用 `vw`,你可以按照下面的方式切换。
。如果你想用 `vw`你可以按照下面的方式切换。
## 1.安装依赖

View File

@ -3,13 +3,13 @@
如果你的 `Vue Router` 模式是 hash
```javascript
publicPath: './',
base: './',
```
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
```javascript
publicPath: '/app/',
base: '/app/',
```
```javascript

View File

@ -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');
}
</style>
```
```

View File

@ -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 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改

View File

@ -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 {

View File

@ -4,7 +4,7 @@
**注意**:如果你使用了 `history` 模式, `vue.config.js` 中的 `publicPath` 要做对应的**修改**
前往:[vue.config.js 基础配置](#base)
前往: [vite.config.js 基础配置](#base)
```javascript
import Vue from "vue";

View File

@ -1,14 +1,14 @@
# 启动项目
```js
```bash
// 拉取项目
# 拉取项目
git clone https://github.com/sunniejs/vue-h5-template
// 安装依赖
# 安装依赖
yarn install
// 启动项目
# 启动项目
yarn dev
```

View File

@ -1,6 +1,6 @@
# 多 UI 组件库供选择
Vite 构建工具,使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
Vite 构建工具,`使用 vite-plugin-style-import``unplugin-vue-components/vite` 实现按需引入。
## 安装插件

View File

@ -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`