mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 07:03:01 +08:00
commit
4dee78d00c
@ -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 ̄)づ╭❤~
|
||||
|
@ -52,7 +52,7 @@
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.title {
|
||||
font-size: 24px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
||||
```
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
### 2、我可以用在个人或公司的项目吗?
|
||||
|
||||
模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟
|
||||
模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟
|
||||
|
||||
### 3、我是一个新手,有什么好的学习建议吗?
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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 下新建三个对应的文件呢?
|
||||
**修改起来方便,不需
|
||||
要重启项目,符合开发习惯。**
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
# 配置 externals 引入 cdn 资源
|
||||
|
||||
这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可
|
||||
这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可
|
||||
以实际测试一下。
|
||||
|
||||
另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)
|
||||
|
@ -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 规则
|
||||
|
||||
|
@ -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 屏幕。
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
**注意**:如果你使用了 `history` 模式,`vue.config.js` 中的 `publicPath` 要做对应的**修改**
|
||||
|
||||
前往:[vue.config.js 基础配置](#base)
|
||||
前往: [vue.config.js 基础配置](#base)
|
||||
|
||||
```javascript
|
||||
import Vue from "vue";
|
||||
|
@ -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
|
||||
// 引入全局样式
|
||||
|
@ -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
|
||||
|
||||
```
|
||||
|
@ -1,7 +1,7 @@
|
||||
# vm 适配方案
|
||||
|
||||
本项目使用的是 `rem` 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做
|
||||
。如果你想用 `vw`,你可以按照下面的方式切换。
|
||||
。如果你想用 `vw`,你可以按照下面的方式切换。
|
||||
|
||||
## 1.安装依赖
|
||||
|
||||
|
@ -3,13 +3,13 @@
|
||||
如果你的 `Vue Router` 模式是 hash
|
||||
|
||||
```javascript
|
||||
publicPath: './',
|
||||
base: './',
|
||||
```
|
||||
|
||||
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
|
||||
|
||||
```javascript
|
||||
publicPath: '/app/',
|
||||
base: '/app/',
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
@ -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>
|
||||
```
|
||||
```
|
||||
|
@ -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 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改
|
||||
|
@ -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 {
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
**注意**:如果你使用了 `history` 模式, `vue.config.js` 中的 `publicPath` 要做对应的**修改**
|
||||
|
||||
前往:[vue.config.js 基础配置](#base)
|
||||
前往: [vite.config.js 基础配置](#base)
|
||||
|
||||
```javascript
|
||||
import Vue from "vue";
|
||||
|
@ -1,14 +1,14 @@
|
||||
# 启动项目
|
||||
|
||||
```js
|
||||
```bash
|
||||
|
||||
// 拉取项目
|
||||
# 拉取项目
|
||||
git clone https://github.com/sunniejs/vue-h5-template
|
||||
|
||||
// 安装依赖
|
||||
# 安装依赖
|
||||
yarn install
|
||||
|
||||
// 启动项目
|
||||
# 启动项目
|
||||
yarn dev
|
||||
|
||||
```
|
||||
|
@ -1,6 +1,6 @@
|
||||
# 多 UI 组件库供选择
|
||||
|
||||
Vite 构建工具,使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
|
||||
Vite 构建工具,`使用 vite-plugin-style-import` 和 `unplugin-vue-components/vite` 实现按需引入。
|
||||
|
||||
## 安装插件
|
||||
|
||||
|
@ -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` ):
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user