JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-05-21 05:09:15 +08:00
Code Issues Projects Releases Wiki Activity

feat: 更新相关的依赖和修复一些已知的问题

Browse Source
This commit is contained in:
fonghehe 2022-05-27 16:29:39 +08:00
parent ceff802428
commit 1400bdf15c
17 changed files with 674 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.husky/pre-commit Normal file
View File

@ -0,0 +1,7 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
[ -n "$CI" ] && exit 0
# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

105
README.md
View File

@ -5,7 +5,7 @@
掘金: [移动端适配方案](https://juejin.cn/post/7018433228591595550) 掘金: [移动端适配方案](https://juejin.cn/post/7018433228591595550)
<p> <p>
<img src="./public/screen.png" width="320" style="display:inline;"> <img src="./public/screen.png" width="320" style="display:inline; ">
</p> </p>
### Node 版本要求 ### Node 版本要求
@ -24,12 +24,12 @@ cd vue-h5-template
npm install npm install
npm run serve npm run dev
``` ```
<span id="top">目录</span> <span id="top">目录</span>
- √ Vue-cli4 - √ vite
- [√ 配置多环境变量](#env) - [√ 配置多环境变量](#env)
- [√ viewport 适配方案](#viewport) - [√ viewport 适配方案](#viewport)
- [√ nutUI 组件按需加载](#nutUI) - [√ nutUI 组件按需加载](#nutUI)
@ -37,12 +37,13 @@ npm run serve
- [√ Vue-router4](#router) - [√ Vue-router4](#router)
- [√ Axios 封装及接口管理](#axios) - [√ Axios 封装及接口管理](#axios)
- [√ vite.config.ts 基础配置](#base) - [√ vite.config.ts 基础配置](#base)
- [√ ts 支持](#alias) - [√ alias](#alias)
- [√ Eslint+Pettier+stylelint 统一开发规范 ](#pettier) - [√ proxy 跨域](#proxy)
- [√ Eslint+Pettier+stylelint 统一开发规范 ](#lint)
### <span id="env">✅ 配置多环境变量 </span> ### <span id="env">✅ 配置多环境变量 </span>
`package.json` 里的 `scripts` 配置 `dev` `dev:test` `dev:prod`，通过 `--mode xxx` 来执行不同环境 `package.json` 里的 `scripts` 配置 `dev` `dev:test` `dev:prod` ，通过 `--mode xxx` 来执行不同环境
- 通过 `npm run dev` 启动本地环境参数 , 执行 `development` - 通过 `npm run dev` 启动本地环境参数 , 执行 `development`
- 通过 `npm run dev:test` 启动测试环境参数 , 执行 `test` - 通过 `npm run dev:test` 启动测试环境参数 , 执行 `test`
@ -50,9 +51,9 @@ npm run serve
```javascript ```javascript
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"dev:test": "vite --mode test", "dev:test": "vite --mode test",
"dev:prod": "vite --mode production", "dev:prod": "vite --mode production",
} }
``` ```
@ -62,9 +63,7 @@ npm run serve
不用担心，项目已经配置好了 `viewport` 适配, 下面仅做介绍： 不用担心，项目已经配置好了 `viewport` 适配, 下面仅做介绍：
Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具: - [postcss-px-to-viewport-8-plugin](https://github.com/xian88888888/postcss-px-to-viewport-8-plugin) 是一款 `postcss` 插件，用于将单位转化为 `vw`, 现在很多浏览器对`vw`的支持都很好。
- [postcss-px-to-viewport-8-plugin](https://github.com/xian88888888/postcss-px-to-viewport-8-plugin) 是一款 `postcss` 插件，用于将单位转化为 `vw`
##### PostCSS 配置 ##### PostCSS 配置
@ -74,9 +73,6 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
// https://github.com/michael-ciniawsky/postcss-load-config // https://github.com/michael-ciniawsky/postcss-load-config
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
},
'postcss-px-to-viewport-8-plugin': { 'postcss-px-to-viewport-8-plugin': {
unitToConvert: 'px', // 要转化的单位 unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度 viewportWidth: 375, // UI设计稿的宽度
@ -97,19 +93,19 @@ 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
<html data-dpr="1" style="font-size: 37.5px;"></html> <html data-dpr="1" style="font-size: 37.5px;"> </html>
``` ```
切换不同的机型，根元素可能会有不同的`font-size`。当你写 css px 样式时，会被程序换算成 `rem` 达到适配。 切换不同的机型，根元素可能会有不同的 `font-size` 。当你写 css px 样式时，会被程序换算成 `rem` 达到适配。
因为我们用了 Vant 的组件，需要按照 `rootValue: 37.5` 来写样式。 因为我们用了 Vant 的组件，需要按照 `rootValue: 37.5` 来写样式。
举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕, 其他机型适配。
- 当`rootValue: 75` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。 - 当`rootValue: 75` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
@ -127,6 +123,7 @@ module.exports = {
width: 750px; width: 750px;
height: 1334px; height: 1334px;
} }
/* rootValue: 37.5 */ /* rootValue: 37.5 */
.image { .image {
width: 375px; width: 375px;
@ -147,16 +144,16 @@ Vite 构建工具，使用 vite-plugin-style-import 实现按需引入。
npm i vite-plugin-style-import -D npm i vite-plugin-style-import -D
``` ```
在`vite.config.ts` 设置 在 `vite.config.ts` 设置
```javascript ```javascript
plugins: [ plugins: [
... ...
createStyleImportPlugin({ createStyleImportPlugin({
resolves: [NutuiResolve()], resolves: [NutuiResolve()],
}), }),
... ...
], ],
``` ```
#### 使用组件 #### 使用组件
@ -206,7 +203,7 @@ nutUiComponents.forEach((item) => {
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base` 本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
**注意**：如果你使用了 `history` 模式，`vue.config.js` 中的 `publicPath` 要做对应的**修改** **注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改**
前往:[vue.config.js 基础配置](#base) 前往:[vue.config.js 基础配置](#base)
@ -238,7 +235,7 @@ export default router;
### <span id="axios">✅ Axios 封装及接口管理</span> ### <span id="axios">✅ Axios 封装及接口管理</span>
`utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。 `utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token` - `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲 - `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
@ -306,13 +303,13 @@ export default service;
#### 接口管理 #### 接口管理
在`src/api` 文件夹下统一管理接口 在 `src/api` 文件夹下统一管理接口
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js` - 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi` - `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
- `method` 请求方法 - `method` 请求方法
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作 - `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
- `hideloading` 默认 `false`,设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知 - `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
```javascript ```javascript
import qs from 'qs'; import qs from 'qs';
@ -337,7 +334,9 @@ export function getUserInfo(params) {
// 请求接口 // 请求接口
import { getUserInfo } from '@/api/user.js'; import { getUserInfo } from '@/api/user.js';
const params = { user: 'sunnie' }; const params = {
user: 'sunnie',
};
getUserInfo(params) getUserInfo(params)
.then(() => {}) .then(() => {})
.catch(() => {}); .catch(() => {});
@ -397,9 +396,21 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
```javascript ```javascript
resolve: { resolve: {
alias: { alias: [{
'@': pathResolve('./src'), find: 'vue-i18n',
}, replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
},
// /@/xxxx => src/xxxx
{
find: /\/@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /\/#\//,
replacement: pathResolve('types') + '/',
},
],
}, },
``` ```
@ -410,29 +421,31 @@ resolve: {
```javascript ```javascript
server: { server: {
proxy: { proxy: {
'/api': { '/api': {
target: 'https://baidu.com', target: 'https://baidu.com',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') rewrite: (path) => path.replace(/^\/api/, '')
} }
} }
}, },
``` ```
[▲ 回顶部](#top) [▲ 回顶部](#top)
<h3>文档在拼命完善中。。。</h3> ### <span id="lint">✅ Eslint+Pettier+stylelint 统一开发规范 </span>
根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
# 关于我 # 关于我
<p>
<img src="./public/account.jpg" width="256" style="display:inline;">
</p>
扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。 扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。
<p>
<img src="./public/account.jpg" width="256" style="display:inline; ">
</p>
<p> <p>
<img src="./public/group.png" width="256" style="display:inline;"> <img src="./public/group.png" width="256" style="display:inline; ">
</p> </p>
如果对你有帮助送我一颗珍贵的小星星（づ￣3￣）づ╭❤～ 如果对你有帮助送我一颗珍贵的小星星（づ￣3￣）づ╭❤～

43
package.json
View File

@ -20,48 +20,51 @@
}, },
"dependencies": { "dependencies": {
"@nutui/nutui": "^3.1.20", "@nutui/nutui": "^3.1.20",
"@vueuse/core": "8.3.1", "@vueuse/core": "8.5.0",
"@vueuse/integrations": "8.3.1", "@vueuse/integrations": "8.5.0",
"axios": "0.27.2", "axios": "0.27.2",
"pinia": "^2.0.13", "pinia": "^2.0.14",
"universal-cookie": "^4.0.4", "universal-cookie": "^4.0.4",
"vant": "^3.4.8", "vant": "^3.4.9",
"vue": "^3.2.33", "vue": "^3.2.36",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.10",
"vue-router": "^4.0.14" "vue-router": "^4.0.15"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^17.0.29", "@types/node": "^17.0.35",
"@typescript-eslint/eslint-plugin": "^5.21.0", "@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.21.0", "@typescript-eslint/parser": "^5.26.0",
"@vitejs/plugin-legacy": "^1.8.1", "@vitejs/plugin-legacy": "^1.8.2",
"@vitejs/plugin-vue": "^2.3.1", "@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10", "@vitejs/plugin-vue-jsx": "^1.3.10",
"consola": "^2.15.3", "consola": "^2.15.3",
"eruda": "^2.4.1", "eruda": "^2.4.1",
"eslint": "^8.14.0", "eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-vue": "^9.0.1",
"husky": "7.0.4", "husky": "7.0.4",
"lint-staged": "12.4.1", "lint-staged": "12.4.1",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"postcss": "^8.4.12", "postcss": "^8.4.14",
"postcss-px-to-viewport-8-plugin": "^1.1.3", "postcss-px-to-viewport-8-plugin": "^1.1.3",
"postcss-html": "^1.4.1",
"postcss-less": "^6.0.0",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"stylelint": "^14.8.0", "stylelint": "^14.8.5",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^7.0.0", "stylelint-config-recommended": "^7.0.0",
"stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0", "stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.0.0", "stylelint-order": "^5.0.0",
"typescript": "^4.6.3", "typescript": "^4.7.2",
"vite": "^2.9.6", "vite": "^2.9.9",
"vite-plugin-eruda": "^1.0.1", "vite-plugin-eruda": "^1.0.1",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-style-import": "^2.0.0", "vite-plugin-style-import": "^2.0.0",
"vue-eslint-parser": "^8.3.0", "vue-eslint-parser": "^9.0.2",
"vue-tsc": "^0.34.10" "vue-tsc": "^0.34.16",
"yorkie": "^2.0.0"
}, },
"lint-staged": { "lint-staged": {
"*.{js,jsx,ts,tsx}": [ "*.{js,jsx,ts,tsx}": [

BIN
public/group.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 362 KiB

2
src/api/index.ts
View File

@ -1,4 +1,4 @@
import useAxiosApi from '@/utils/useAxiosApi'; import useAxiosApi from '/@/utils/useAxiosApi';
/** /**
* 账号密码登录 * 账号密码登录

1
src/i18n/index.ts
View File

@ -1,3 +1,4 @@
import { AnyObject } from '#/global';
import { createI18n } from 'vue-i18n'; import { createI18n } from 'vue-i18n';
export function loadLang() { export function loadLang() {

4
src/main.ts
View File

@ -1,9 +1,9 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import { nutUiComponents } from './plugins/nutUI'; import { nutUiComponents } from './plugins/nutUI';
import { i18n } from '@/i18n'; import { i18n } from '/@/i18n';
import router from './router'; import router from './router';
import { setupStore } from '@/store'; import { setupStore } from '/@/store';
import './assets/font/iconfont.css'; import './assets/font/iconfont.css';
import './assets/app.css'; import './assets/app.css';

6
src/router/index.ts
View File

@ -1,12 +1,12 @@
import { createRouter, createWebHistory, Router } from 'vue-router'; import { createRouter, createWebHashHistory, Router } from 'vue-router';
import routes from './routes'; import routes from './routes';
const router: Router = createRouter({ const router: Router = createRouter({
history: createWebHistory(), history: createWebHashHistory('/'),
routes: routes, routes: routes,
}); });
router.beforeEach(async (to, from, next) => { router.beforeEach(async (_to, _from, next) => {
next(); next();
}); });

10
src/router/routes.ts
View File

@ -3,12 +3,12 @@ const routes = [
name: 'root', name: 'root',
path: '/', path: '/',
redirect: '/home', redirect: '/home',
component: () => import('@/components/Basic/index.vue'), component: () => import('/@/components/Basic/index.vue'),
children: [ children: [
{ {
name: 'Home', name: 'Home',
path: 'home', path: 'home',
component: () => import('@/views/Home/index.vue'), component: () => import('/@/views/Home/index.vue'),
meta: { meta: {
title: '', title: '',
keepAlive: true, keepAlive: true,
@ -17,7 +17,7 @@ const routes = [
{ {
name: 'List', name: 'List',
path: 'list', path: 'list',
component: () => import('@/views/List/index.vue'), component: () => import('/@/views/List/index.vue'),
meta: { meta: {
title: '', title: '',
keepAlive: true, keepAlive: true,
@ -26,7 +26,7 @@ const routes = [
{ {
name: 'Member', name: 'Member',
path: 'member', path: 'member',
component: () => import('@/views/Member/index.vue'), component: () => import('/@/views/Member/index.vue'),
meta: { meta: {
title: '', title: '',
keepAlive: true, keepAlive: true,
@ -37,7 +37,7 @@ const routes = [
{ {
name: 'Login', name: 'Login',
path: '/login', path: '/login',
component: () => import('@/views/Login/index.vue'), component: () => import('/@/views/Login/index.vue'),
meta: { meta: {
title: '', title: '',
keepAlive: true, keepAlive: true,

3
src/store/modules/user.ts
View File

@ -1,4 +1,5 @@
import { loginPassword } from '@/api'; import { AnyObject } from '/#/global';
import { loginPassword } from '/@/api';
import { useCookies } from '@vueuse/integrations/useCookies'; import { useCookies } from '@vueuse/integrations/useCookies';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { watch } from 'vue'; import { watch } from 'vue';

4
src/utils/index.ts
View File

@ -1,6 +1,4 @@
/** import { AnyObject } from '#/global';
* 类型检查
*/
export function typeCheck(param: any) { export function typeCheck(param: any) {
return Object.prototype.toString.call(param); return Object.prototype.toString.call(param);

4
src/views/home/index.vue
View File

@ -30,8 +30,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { setLang } from '@/i18n'; import { setLang } from '/@/i18n';
const userStore = useUserStore(); const userStore = useUserStore();
const getUserInfo = computed(() => { const getUserInfo = computed(() => {

8
src/views/login/index.vue
View File

@ -14,9 +14,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import router from '@/router'; import { router } from '/@/router';
import { ComponentInternalInstance, getCurrentInstance, reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore(); const userStore = useUserStore();
const formData = reactive({ const formData = reactive({
@ -24,7 +24,7 @@
pwd: '', pwd: '',
}); });
const ruleForm = ref<any>(null); const ruleForm = ref<any>(null);
const { proxy } = getCurrentInstance() as ComponentInternalInstance; // const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const submit = () => { const submit = () => {
ruleForm.value.validate().then(async ({ valid, errors }: any) => { ruleForm.value.validate().then(async ({ valid, errors }: any) => {
if (valid) { if (valid) {

4
tsconfig.json
View File

@ -23,8 +23,8 @@
"types": ["vite/client"], "types": ["vite/client"],
"removeComments": true, "removeComments": true,
"paths": { "paths": {
"@/*": ["src/*"], "/@/*": ["src/*"],
"#/*": ["types/*"] "/#/*": ["types/*"]
} }
}, },
"include": [ "include": [

2
types/global.d.ts vendored
View File

@ -87,7 +87,7 @@ declare global {
} }
} }
interface AnyObject { export interface AnyObject {
[key: string]: any; [key: string]: any;
} }

29
vite.config.ts
View File

@ -6,13 +6,35 @@ import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import'
import { viteMockServe } from 'vite-plugin-mock'; import { viteMockServe } from 'vite-plugin-mock';
import eruda from 'vite-plugin-eruda'; import eruda from 'vite-plugin-eruda';
const pathResolve = (dir: string) => resolve(__dirname, dir); const pathResolve = (dir: string) => {
return resolve(process.cwd(), '.', dir);
};
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default function ({ command }: ConfigEnv): UserConfigExport { export default function ({ command }: ConfigEnv): UserConfigExport {
const isProduction = command === 'build'; const isProduction = command === 'build';
const root = process.cwd();
console.log(isProduction); console.log(isProduction);
return { return {
root,
resolve: {
alias: [
{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
},
// /@/xxxx => src/xxxx
{
find: /\/@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /\/#\//,
replacement: pathResolve('types') + '/',
},
],
},
server: { server: {
host: '0.0.0.0', host: '0.0.0.0',
}, },
@ -37,10 +59,5 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
}, },
}, },
}, },
resolve: {
alias: {
'@': pathResolve('./src'),
},
},
}; };
} }

861
yarn.lock
View File

File diff suppressed because it is too large Load Diff