mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-09-09 18:10:11 +08:00
docs: update docs
This commit is contained in:
fonghehe
parent
ea8d822966
commit
27b3e97b15
78
README.md
78
README.md
@ -77,8 +77,6 @@ yarn dev
|
||||
}
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="viewport">✅ viewport 适配方案 </span>
|
||||
|
||||
不用担心，项目已经配置好了 `viewport` 适配，下面仅做介绍：
|
||||
@ -122,7 +120,7 @@ module.exports = {
|
||||
我们知道 `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>
|
||||
<html data-dpr="1" style="font-size: 37.5px;"></html>
|
||||
```
|
||||
|
||||
切换不同的机型，根元素可能会有不同的 `font-size` 。当你写 css px 样式时，会被程序换算成 `rem` 达到适配。
|
||||
@ -156,8 +154,6 @@ module.exports = {
|
||||
</style>
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="ui">✅ 多 UI 组件库供选择 </span>
|
||||
|
||||
Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
|
||||
@ -188,8 +184,8 @@ nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载
|
||||
|
||||
```javascript
|
||||
// 按需全局引入nutUI组件
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell, CellGroup } from '@nutui/nutui';
|
||||
import Vue from "vue";
|
||||
import { Button, Cell, CellGroup } from "@nutui/nutui";
|
||||
export const nutUiComponents = [Button, Cell, CellGroup];
|
||||
|
||||
// 在main.ts文件中引入
|
||||
@ -217,8 +213,6 @@ vant 和 varlet 只需删除对应的 resolvers 即可
|
||||
|
||||
删除后需全局搜索删除不需要的组件，避免报错
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="Pinia">✅ Pinia 状态管理</span>
|
||||
|
||||
下一代 vuex，使用极其方便，ts 兼容好
|
||||
@ -236,14 +230,12 @@ vant 和 varlet 只需删除对应的 resolvers 即可
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
userStore.login();
|
||||
</script>
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="router">✅ Vue-router </span>
|
||||
|
||||
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
|
||||
@ -253,16 +245,16 @@ vant 和 varlet 只需删除对应的 resolvers 即可
|
||||
前往:[vue.config.js 基础配置](#base)
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { createRouter, createWebHistory, Router } from 'vue-router';
|
||||
import Vue from "vue";
|
||||
import { createRouter, createWebHistory, Router } from "vue-router";
|
||||
|
||||
Vue.use(Router);
|
||||
export const router = [
|
||||
{
|
||||
name: 'root',
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
component: () => import('@/layout/basic/index.vue'),
|
||||
name: "root",
|
||||
path: "/",
|
||||
redirect: "/home",
|
||||
component: () => import("@/layout/basic/index.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
@ -276,8 +268,6 @@ export default router;
|
||||
|
||||
更多:[Vue Router](https://router.vuejs.org/zh/introduction.html)
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="axios">✅ Axios 封装及接口管理</span>
|
||||
|
||||
`utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
|
||||
@ -287,11 +277,11 @@ export default router;
|
||||
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
|
||||
|
||||
```javascript
|
||||
import axios from 'axios';
|
||||
import store from '@/store';
|
||||
import { Toast } from 'vant';
|
||||
import axios from "axios";
|
||||
import store from "@/store";
|
||||
import { Toast } from "vant";
|
||||
// 根据环境不同引入不同api地址
|
||||
import { baseApi } from '@/config';
|
||||
import { baseApi } from "@/config";
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: baseApi, // url = base api url + request url
|
||||
@ -310,7 +300,7 @@ service.interceptors.request.use(
|
||||
});
|
||||
}
|
||||
if (store.getters.token) {
|
||||
config.headers['X-Token'] = '';
|
||||
config.headers["X-Token"] = "";
|
||||
}
|
||||
return config;
|
||||
},
|
||||
@ -318,7 +308,7 @@ service.interceptors.request.use(
|
||||
// do something with request error
|
||||
console.log(error); // for debug
|
||||
return Promise.reject(error);
|
||||
},
|
||||
}
|
||||
);
|
||||
// respone拦截器
|
||||
service.interceptors.response.use(
|
||||
@ -328,20 +318,20 @@ service.interceptors.response.use(
|
||||
if (res.status && res.status !== 200) {
|
||||
// 登录超时,重新登录
|
||||
if (res.status === 401) {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
store.dispatch("FedLogOut").then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
return Promise.reject(res || 'error');
|
||||
return Promise.reject(res || "error");
|
||||
} else {
|
||||
return Promise.resolve(res);
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
Toast.clear();
|
||||
console.log('err' + error); // for debug
|
||||
console.log("err" + error); // for debug
|
||||
return Promise.reject(error);
|
||||
},
|
||||
}
|
||||
);
|
||||
export default service;
|
||||
```
|
||||
@ -357,16 +347,16 @@ export default service;
|
||||
- `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
|
||||
|
||||
```javascript
|
||||
import qs from 'qs';
|
||||
import qs from "qs";
|
||||
// axios
|
||||
import request from '@/utils/request';
|
||||
import request from "@/utils/request";
|
||||
//user api
|
||||
|
||||
// 用户信息
|
||||
export function getUserInfo(params) {
|
||||
return request({
|
||||
url: '/user/userinfo',
|
||||
method: 'post',
|
||||
url: "/user/userinfo",
|
||||
method: "post",
|
||||
data: qs.stringify(params),
|
||||
hideloading: true, // 隐藏 loading 组件
|
||||
});
|
||||
@ -377,18 +367,16 @@ export function getUserInfo(params) {
|
||||
|
||||
```javascript
|
||||
// 请求接口
|
||||
import { getUserInfo } from '@/api/user.js';
|
||||
import { getUserInfo } from "@/api/user.js";
|
||||
|
||||
const params = {
|
||||
user: 'sunnie',
|
||||
user: "sunnie",
|
||||
};
|
||||
getUserInfo(params)
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="base">✅ vite.config.ts 基础配置 </span>
|
||||
|
||||
如果你的 `Vue Router` 模式是 hash
|
||||
@ -405,10 +393,10 @@ publicPath: '/app/',
|
||||
|
||||
```javascript
|
||||
export default function ({ command }: ConfigEnv): UserConfigExport {
|
||||
const isProduction = command === 'build';
|
||||
const isProduction = command === "build";
|
||||
return {
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
host: "0.0.0.0",
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
@ -418,8 +406,8 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
|
||||
}),
|
||||
eruda(),
|
||||
viteMockServe({
|
||||
mockPath: './src/mock',
|
||||
localEnabled: command === 'serve',
|
||||
mockPath: "./src/mock",
|
||||
localEnabled: command === "serve",
|
||||
logger: true,
|
||||
}),
|
||||
],
|
||||
@ -435,8 +423,6 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
|
||||
}
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="alias">✅ 配置 alias 别名 </span>
|
||||
|
||||
```javascript
|
||||
@ -459,8 +445,6 @@ resolve: {
|
||||
},
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="proxy">✅ 配置 proxy 跨域 </span>
|
||||
|
||||
```javascript
|
||||
@ -475,8 +459,6 @@ server: {
|
||||
},
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="lint">✅ Eslint+Pettier+stylelint 统 ˜ 开发规范 </span>
|
||||
|
||||
根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
|
||||
|
||||
@ -14,10 +14,11 @@ module.exports = {
|
||||
"/guide/": sidebarGuide(),
|
||||
},
|
||||
socialLinks: [
|
||||
{ icon: "github", link: "https://github.com/tobe-fe-dalao/fastool" },
|
||||
{ icon: "github", link: "https://github.com/sunniejs/vue-h5-template" },
|
||||
],
|
||||
editLink: {
|
||||
pattern: "https://github.com/tobe-fe-dalao/fastool/tree/doc/docs/:path",
|
||||
pattern:
|
||||
"https://github.com/sunniejs/vue-h5-template/blob/docs/docs/:path",
|
||||
text: "在GitHub编辑此页",
|
||||
},
|
||||
footer: {
|
||||
@ -54,29 +55,31 @@ function sidebarGuide() {
|
||||
text: "vue3-template",
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: "vite", link: "/guide/vue3/vite" },
|
||||
{ text: "配置多环境变量", link: "/guide/vue3/env" },
|
||||
{ text: "启动项目", link: "/guide/vue3/start" },
|
||||
{ text: "vite.config.ts 基础配置", link: "/guide/vue3/base" },
|
||||
{ text: "vite插件集成", link: "/guide/vue3/vite" },
|
||||
{ text: "多环境变量", link: "/guide/vue3/env" },
|
||||
{ text: "viewport 适配方案", link: "/guide/vue3/viewport" },
|
||||
{ text: "多UI组件库供选择", link: "/guide/vue3/ui" },
|
||||
{ text: "UI组件库", link: "/guide/vue3/ui" },
|
||||
{ text: "Pinia 状态管理", link: "/guide/vue3/pinia" },
|
||||
{ text: "vue-router", link: "/guide/vue3/router" },
|
||||
{ text: "axios 封装及接口管理", link: "/guide/vue3/axios" },
|
||||
{ text: "vite.config.ts 基础配置", link: "/guide/vue3/base" },
|
||||
{ text: "alias", link: "/guide/vue3/base" },
|
||||
{ text: "proxy 跨域", link: "/guide/vue3/base" },
|
||||
{ text: "alias", link: "/guide/vue3/alias" },
|
||||
{ text: "proxy 跨域", link: "/guide/vue3/proxy" },
|
||||
{ text: "多语言解决方案", link: "/guide/vue3/i18n" },
|
||||
{
|
||||
text: "Eslint+Pettier+stylelint 统一开发规范",
|
||||
text: "统一开发规范",
|
||||
link: "/guide/vue3/lint",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "vue2-template",
|
||||
collapsible: false,
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: "启动项目", link: "/guide//vue2/start" },
|
||||
{ text: "配置多环境变量", link: "/guide/vue2/env" },
|
||||
{ text: "启动项目", link: "/guide/vue2/start" },
|
||||
{ text: "多环境变量", link: "/guide/vue2/env" },
|
||||
{ text: "rem 适配方案", link: "/guide/vue2/rem" },
|
||||
{ text: "vw 适配方案", link: "/guide/vue2/vw" },
|
||||
{ text: "VantUI 组件按需加载", link: "/guide/vue2/vant" },
|
||||
@ -90,9 +93,9 @@ function sidebarGuide() {
|
||||
{ text: "配置 打包分析", link: "/guide/vue2/bundle" },
|
||||
{ text: "配置 externals 引入 cdn 资源", link: "/guide/vue2/externals" },
|
||||
{ text: "去掉 console.log", link: "/guide/vue2/console" },
|
||||
{ text: "splitChunks 单独打包第三方模块", link: "/guide/vue2/chunks" },
|
||||
{ text: "splitChunks 打包第三方模块", link: "/guide/vue2/chunks" },
|
||||
{ text: "添加 IE 兼容", link: "/guide/vue2/ie" },
|
||||
{ text: "Eslint+Pettier 统一开发规范", link: "/guide/vue2/lint" },
|
||||
{ text: "统一开发规范", link: "/guide/vue2/lint" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
### <span id="axios">✅ Axios 封装及接口管理</span>
|
||||
# Axios 封装及接口管理
|
||||
|
||||
`utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。
|
||||
|
||||
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
|
||||
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
|
||||
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
|
||||
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
|
||||
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
|
||||
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
|
||||
|
||||
```javascript
|
||||
import axios from 'axios'
|
||||
import store from '@/store'
|
||||
import { Toast } from 'vant'
|
||||
import axios from "axios";
|
||||
import store from "@/store";
|
||||
import { Toast } from "vant";
|
||||
// 根据环境不同引入不同api地址
|
||||
import { baseApi } from '@/config'
|
||||
import { baseApi } from "@/config";
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: baseApi, // url = base api url + request url
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000, // request timeout
|
||||
})
|
||||
baseURL: baseApi, // url = base api url + request url
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000, // request timeout
|
||||
});
|
||||
|
||||
// request 拦截器 request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 不传递默认开启loading
|
||||
if (!config.hideloading) {
|
||||
// loading
|
||||
Toast.loading({
|
||||
forbidClick: true,
|
||||
})
|
||||
}
|
||||
if (store.getters.token) {
|
||||
config.headers['X-Token'] = ''
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// do something with request error
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
(config) => {
|
||||
// 不传递默认开启loading
|
||||
if (!config.hideloading) {
|
||||
// loading
|
||||
Toast.loading({
|
||||
forbidClick: true,
|
||||
});
|
||||
}
|
||||
)
|
||||
if (store.getters.token) {
|
||||
config.headers["X-Token"] = "";
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
// do something with request error
|
||||
console.log(error); // for debug
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
// respone拦截器
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
Toast.clear()
|
||||
const res = response.data
|
||||
if (res.status && res.status !== 200) {
|
||||
// 登录超时,重新登录
|
||||
if (res.status === 401) {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}
|
||||
return Promise.reject(res || 'error')
|
||||
} else {
|
||||
return Promise.resolve(res)
|
||||
}
|
||||
},
|
||||
error => {
|
||||
Toast.clear()
|
||||
console.log('err' + error) // for debug
|
||||
return Promise.reject(error)
|
||||
(response) => {
|
||||
Toast.clear();
|
||||
const res = response.data;
|
||||
if (res.status && res.status !== 200) {
|
||||
// 登录超时,重新登录
|
||||
if (res.status === 401) {
|
||||
store.dispatch("FedLogOut").then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
return Promise.reject(res || "error");
|
||||
} else {
|
||||
return Promise.resolve(res);
|
||||
}
|
||||
)
|
||||
export default service
|
||||
},
|
||||
(error) => {
|
||||
Toast.clear();
|
||||
console.log("err" + error); // for debug
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
export default service;
|
||||
```
|
||||
|
||||
#### 接口管理
|
||||
|
||||
在`src/api` 文件夹下统一管理接口
|
||||
|
||||
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
|
||||
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
|
||||
- `method` 请求方法
|
||||
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
|
||||
- `hideloading` 默认 `false`,设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
|
||||
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
|
||||
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
|
||||
- `method` 请求方法
|
||||
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
|
||||
- `hideloading` 默认 `false`,设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
|
||||
|
||||
```javascript
|
||||
import qs from 'qs'
|
||||
import qs from "qs";
|
||||
// axios
|
||||
import request from '@/utils/request'
|
||||
import request from "@/utils/request";
|
||||
//user api
|
||||
|
||||
// 用户信息
|
||||
export function getUserInfo(params) {
|
||||
return request({
|
||||
url: '/user/userinfo',
|
||||
method: 'post',
|
||||
data: qs.stringify(params),
|
||||
hideloading: true, // 隐藏 loading 组件
|
||||
})
|
||||
return request({
|
||||
url: "/user/userinfo",
|
||||
method: "post",
|
||||
data: qs.stringify(params),
|
||||
hideloading: true, // 隐藏 loading 组件
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
@ -97,10 +97,10 @@ export function getUserInfo(params) {
|
||||
|
||||
```javascript
|
||||
// 请求接口
|
||||
import { getUserInfo } from '@/api/user.js'
|
||||
import { getUserInfo } from "@/api/user.js";
|
||||
|
||||
const params = { user: 'sunnie' }
|
||||
const params = { user: "sunnie" };
|
||||
getUserInfo(params)
|
||||
.then(() => {})
|
||||
.catch(() => {})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="base">✅ Webpack 4 vue.config.js 基础配置 </span>
|
||||
# Webpack 4 vue.config.js 基础配置
|
||||
|
||||
如果你的 `Vue Router` 模式是 hash
|
||||
|
||||
@ -6,31 +6,60 @@
|
||||
publicPath: './',
|
||||
```
|
||||
|
||||
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一直**
|
||||
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
|
||||
|
||||
```javascript
|
||||
publicPath: '/app/',
|
||||
```
|
||||
|
||||
```javascript
|
||||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||
配置如下
|
||||
|
||||
module.exports = {
|
||||
publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
|
||||
// publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
|
||||
outputDir: 'dist', // 生产环境构建文件的目录
|
||||
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
|
||||
lintOnSave: !IS_PROD,
|
||||
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
devServer: {
|
||||
port: 9020, // 端口号
|
||||
open: false, // 启动后打开浏览器
|
||||
overlay: {
|
||||
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
|
||||
warnings: false,
|
||||
errors: true,
|
||||
```javascript
|
||||
import { createVitePlugins } from "./config/vite/plugins";
|
||||
import { resolve } from "path";
|
||||
import { ConfigEnv, UserConfigExport } from "vite";
|
||||
|
||||
const pathResolve = (dir: string) => {
|
||||
return resolve(process.cwd(), ".", dir);
|
||||
};
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default function ({ command }: ConfigEnv): UserConfigExport {
|
||||
const isProduction = command === "build";
|
||||
const root = process.cwd();
|
||||
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: {
|
||||
host: true,
|
||||
hmr: true,
|
||||
},
|
||||
plugins: createVitePlugins(isProduction),
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// 配置 nutui 全局 scss 变量
|
||||
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";@import '/@/styles/mixin.scss';`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
### <span id="bundle">✅ 配置 打包分析 </span>
|
||||
# 配置打包分析
|
||||
|
||||
```javascript
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
const BundleAnalyzerPlugin =
|
||||
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
|
||||
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
// 打包分析
|
||||
if (IS_PROD) {
|
||||
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
|
||||
{
|
||||
analyzerMode: 'static',
|
||||
},
|
||||
])
|
||||
}
|
||||
},
|
||||
}
|
||||
chainWebpack: (config) => {
|
||||
// 打包分析
|
||||
if (IS_PROD) {
|
||||
config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
|
||||
{
|
||||
analyzerMode: "static",
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```bash
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
### <span id="chunks">✅ splitChunks 单独打包第三方模块</span>
|
||||
# splitChunks 单独打包第三方模块
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
config.when(IS_PROD, config => {
|
||||
config
|
||||
.plugin('ScriptExtHtmlWebpackPlugin')
|
||||
.after('html')
|
||||
.use('script-ext-html-webpack-plugin', [
|
||||
{
|
||||
// 将 runtime 作为内联引入不单独存在
|
||||
inline: /runtime\..*\.js$/,
|
||||
},
|
||||
])
|
||||
.end()
|
||||
config.optimization.splitChunks({
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
|
||||
commons: {
|
||||
name: 'chunk-commons',
|
||||
test: resolve('src/components'),
|
||||
minChunks: 3, // 被至少用三次以上打包分离
|
||||
priority: 5, // 优先级
|
||||
reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
|
||||
},
|
||||
node_vendors: {
|
||||
name: 'chunk-libs',
|
||||
chunks: 'initial', // 只打包初始时依赖的第三方
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
},
|
||||
vantUI: {
|
||||
name: 'chunk-vantUI', // 单独将 vantUI 拆包
|
||||
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
|
||||
test: /[\\/]node_modules[\\/]_?vant(.*)/,
|
||||
},
|
||||
},
|
||||
})
|
||||
config.optimization.runtimeChunk('single')
|
||||
})
|
||||
},
|
||||
}
|
||||
chainWebpack: (config) => {
|
||||
config.when(IS_PROD, (config) => {
|
||||
config
|
||||
.plugin("ScriptExtHtmlWebpackPlugin")
|
||||
.after("html")
|
||||
.use("script-ext-html-webpack-plugin", [
|
||||
{
|
||||
// 将 runtime 作为内联引入不单独存在
|
||||
inline: /runtime\..*\.js$/,
|
||||
},
|
||||
])
|
||||
.end();
|
||||
config.optimization.splitChunks({
|
||||
chunks: "all",
|
||||
cacheGroups: {
|
||||
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
|
||||
commons: {
|
||||
name: "chunk-commons",
|
||||
test: resolve("src/components"),
|
||||
minChunks: 3, // 被至少用三次以上打包分离
|
||||
priority: 5, // 优先级
|
||||
reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
|
||||
},
|
||||
node_vendors: {
|
||||
name: "chunk-libs",
|
||||
chunks: "initial", // 只打包初始时依赖的第三方
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
},
|
||||
vantUI: {
|
||||
name: "chunk-vantUI", // 单独将 vantUI 拆包
|
||||
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
|
||||
test: /[\\/]node_modules[\\/]_?vant(.*)/,
|
||||
},
|
||||
},
|
||||
});
|
||||
config.optimization.runtimeChunk("single");
|
||||
});
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="console">✅ 去掉 console.log </span>
|
||||
# 去掉 console.log
|
||||
|
||||
保留了测试环境和本地环境的 `console.log`
|
||||
|
||||
@ -10,25 +10,25 @@ npm i -D babel-plugin-transform-remove-console
|
||||
|
||||
```javascript
|
||||
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
|
||||
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
|
||||
const IS_PROD = ["production", "prod"].includes(process.env.VUE_APP_ENV);
|
||||
const plugins = [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
'vant',
|
||||
],
|
||||
]
|
||||
[
|
||||
"import",
|
||||
{
|
||||
libraryName: "vant",
|
||||
libraryDirectory: "es",
|
||||
style: true,
|
||||
},
|
||||
"vant",
|
||||
],
|
||||
];
|
||||
// 去除 console.log
|
||||
if (IS_PROD) {
|
||||
plugins.push('transform-remove-console')
|
||||
plugins.push("transform-remove-console");
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],
|
||||
plugins,
|
||||
}
|
||||
presets: [["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry" }]],
|
||||
plugins,
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
### <span id="env">✅ 配置多环境变量 </span>
|
||||
# 配置多环境变量
|
||||
|
||||
`package.json` 里的 `scripts` 配置 `serve` `stage` `build`，通过 `--mode xxx` 来执行不同环境
|
||||
|
||||
- 通过 `npm run serve` 启动本地 , 执行 `development`
|
||||
- 通过 `npm run stage` 打包测试 , 执行 `staging`
|
||||
- 通过 `npm run build` 打包正式 , 执行 `production`
|
||||
- 通过 `npm run serve` 启动本地 , 执行 `development`
|
||||
- 通过 `npm run stage` 打包测试 , 执行 `staging`
|
||||
- 通过 `npm run build` 打包正式 , 执行 `production`
|
||||
|
||||
```javascript
|
||||
"scripts": {
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
在项目根目录中新建`.env.*`
|
||||
|
||||
- .env.development 本地开发环境配置
|
||||
- .env.development 本地开发环境配置
|
||||
|
||||
```bash
|
||||
NODE_ENV='development'
|
||||
@ -31,7 +31,7 @@ VUE_APP_ENV = 'development'
|
||||
|
||||
```
|
||||
|
||||
- .env.staging 测试环境配置
|
||||
- .env.staging 测试环境配置
|
||||
|
||||
```bash
|
||||
NODE_ENV='production'
|
||||
@ -39,7 +39,7 @@ NODE_ENV='production'
|
||||
VUE_APP_ENV = 'staging'
|
||||
```
|
||||
|
||||
- .env.production 正式环境配置
|
||||
- .env.production 正式环境配置
|
||||
|
||||
```bash
|
||||
NODE_ENV='production'
|
||||
@ -58,8 +58,8 @@ config/index.js
|
||||
|
||||
```javascript
|
||||
// 根据环境引入不同配置 process.env.NODE_ENV
|
||||
const config = require('./env.' + process.env.VUE_APP_ENV)
|
||||
module.exports = config
|
||||
const config = require("./env." + process.env.VUE_APP_ENV);
|
||||
module.exports = config;
|
||||
```
|
||||
|
||||
配置对应环境的变量，拿本地环境文件 `env.development.js` 举例，用户可以根据需求修改
|
||||
@ -67,18 +67,18 @@ module.exports = config
|
||||
```javascript
|
||||
// 本地环境配置
|
||||
module.exports = {
|
||||
title: 'vue-h5-template',
|
||||
baseUrl: 'http://localhost:9018', // 项目地址
|
||||
baseApi: 'https://test.xxx.com/api', // 本地api请求地址
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
}
|
||||
title: "vue-h5-template",
|
||||
baseUrl: "http://localhost:9018", // 项目地址
|
||||
baseApi: "https://test.xxx.com/api", // 本地api请求地址
|
||||
APPID: "xxx",
|
||||
APPSECRET: "xxx",
|
||||
};
|
||||
```
|
||||
|
||||
根据环境不同，变量就会不同了
|
||||
|
||||
```javascript
|
||||
// 根据环境不同引入不同baseApi地址
|
||||
import { baseApi } from '@/config'
|
||||
console.log(baseApi)
|
||||
import { baseApi } from "@/config";
|
||||
console.log(baseApi);
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span>
|
||||
# 配置 externals 引入 cdn 资源
|
||||
|
||||
这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
|
||||
以实际测试一下。
|
||||
@ -11,60 +11,60 @@
|
||||
暂时还没有研究放到自己的 cdn 服务器上。
|
||||
|
||||
```javascript
|
||||
const defaultSettings = require('./src/config/index.js')
|
||||
const name = defaultSettings.title || 'vue mobile template'
|
||||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||
const defaultSettings = require("./src/config/index.js");
|
||||
const name = defaultSettings.title || "vue mobile template";
|
||||
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
|
||||
|
||||
// externals
|
||||
const externals = {
|
||||
vue: 'Vue',
|
||||
'vue-router': 'VueRouter',
|
||||
vuex: 'Vuex',
|
||||
vant: 'vant',
|
||||
axios: 'axios',
|
||||
}
|
||||
vue: "Vue",
|
||||
"vue-router": "VueRouter",
|
||||
vuex: "Vuex",
|
||||
vant: "vant",
|
||||
axios: "axios",
|
||||
};
|
||||
// CDN外链，会插入到index.html中
|
||||
const cdn = {
|
||||
// 开发环境
|
||||
dev: {
|
||||
css: [],
|
||||
js: [],
|
||||
},
|
||||
// 生产环境
|
||||
build: {
|
||||
css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
|
||||
js: [
|
||||
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
|
||||
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
|
||||
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
|
||||
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
|
||||
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
|
||||
],
|
||||
},
|
||||
}
|
||||
// 开发环境
|
||||
dev: {
|
||||
css: [],
|
||||
js: [],
|
||||
},
|
||||
// 生产环境
|
||||
build: {
|
||||
css: ["https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css"],
|
||||
js: [
|
||||
"https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js",
|
||||
],
|
||||
},
|
||||
};
|
||||
module.exports = {
|
||||
configureWebpack: config => {
|
||||
config.name = name
|
||||
// 为生产环境修改配置...
|
||||
if (IS_PROD) {
|
||||
// externals
|
||||
config.externals = externals
|
||||
}
|
||||
},
|
||||
chainWebpack: config => {
|
||||
/**
|
||||
* 添加CDN参数到htmlWebpackPlugin配置中
|
||||
*/
|
||||
config.plugin('html').tap(args => {
|
||||
if (IS_PROD) {
|
||||
args[0].cdn = cdn.build
|
||||
} else {
|
||||
args[0].cdn = cdn.dev
|
||||
}
|
||||
return args
|
||||
})
|
||||
},
|
||||
}
|
||||
configureWebpack: (config) => {
|
||||
config.name = name;
|
||||
// 为生产环境修改配置...
|
||||
if (IS_PROD) {
|
||||
// externals
|
||||
config.externals = externals;
|
||||
}
|
||||
},
|
||||
chainWebpack: (config) => {
|
||||
/**
|
||||
* 添加CDN参数到htmlWebpackPlugin配置中
|
||||
*/
|
||||
config.plugin("html").tap((args) => {
|
||||
if (IS_PROD) {
|
||||
args[0].cdn = cdn.build;
|
||||
} else {
|
||||
args[0].cdn = cdn.dev;
|
||||
}
|
||||
return args;
|
||||
});
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
在 public/index.html 中添加
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="ie">✅ 添加 IE 兼容 </span>
|
||||
# 添加 IE 兼容
|
||||
|
||||
之前的方式 会报 `@babel/polyfill` is deprecated. Please, use required parts of `core-js` and
|
||||
`regenerator-runtime/runtime` separately
|
||||
@ -14,17 +14,19 @@ npm i --save core-js regenerator-runtime
|
||||
```javascript
|
||||
// 兼容 IE
|
||||
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
|
||||
import 'core-js/stable'
|
||||
import 'regenerator-runtime/runtime'
|
||||
import "core-js/stable";
|
||||
import "regenerator-runtime/runtime";
|
||||
```
|
||||
|
||||
配置 `babel.config.js`
|
||||
|
||||
```javascript
|
||||
const plugins = []
|
||||
const plugins = [];
|
||||
|
||||
module.exports = {
|
||||
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
|
||||
plugins,
|
||||
}
|
||||
presets: [
|
||||
["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
|
||||
],
|
||||
plugins,
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>
|
||||
# Eslint + Pettier 统一开发规范
|
||||
|
||||
VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会
|
||||
专门写个如何使用配合使用这三个玩意
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="proxy">✅ 配置 proxy 跨域 </span>
|
||||
# 配置 proxy 跨域
|
||||
|
||||
如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
|
||||
|
||||
@ -6,31 +6,31 @@
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
devServer: {
|
||||
// ....
|
||||
proxy: {
|
||||
//配置跨域
|
||||
'/api': {
|
||||
target: 'https://test.xxx.com', // 接口的域名
|
||||
// ws: true, // 是否启用websockets
|
||||
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
|
||||
pathRewrite: {
|
||||
'^/api': '/',
|
||||
},
|
||||
},
|
||||
devServer: {
|
||||
// ....
|
||||
proxy: {
|
||||
//配置跨域
|
||||
"/api": {
|
||||
target: "https://test.xxx.com", // 接口的域名
|
||||
// ws: true, // 是否启用websockets
|
||||
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
|
||||
pathRewrite: {
|
||||
"^/api": "/",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
使用 例如: `src/api/home.js`
|
||||
|
||||
```javascript
|
||||
export function getUserInfo(params) {
|
||||
return request({
|
||||
url: '/api/userinfo',
|
||||
method: 'post',
|
||||
data: qs.stringify(params),
|
||||
})
|
||||
return request({
|
||||
url: "/api/userinfo",
|
||||
method: "post",
|
||||
data: qs.stringify(params),
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
### <span id="rem">✅ rem 适配方案 </span>
|
||||
# rem 适配方案
|
||||
|
||||
不用担心，项目已经配置好了 `rem` 适配, 下面仅做介绍：
|
||||
|
||||
Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具:
|
||||
|
||||
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem`
|
||||
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值
|
||||
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem`
|
||||
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值
|
||||
|
||||
##### PostCSS 配置
|
||||
|
||||
@ -14,16 +14,22 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
|
||||
```javascript
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {
|
||||
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
|
||||
},
|
||||
'postcss-pxtorem': {
|
||||
rootValue: 37.5,
|
||||
propList: ['*']
|
||||
}
|
||||
}
|
||||
}
|
||||
plugins: {
|
||||
autoprefixer: {
|
||||
overrideBrowserslist: [
|
||||
"Android 4.1",
|
||||
"iOS 7.1",
|
||||
"Chrome > 31",
|
||||
"ff > 31",
|
||||
"ie >= 8",
|
||||
],
|
||||
},
|
||||
"postcss-pxtorem": {
|
||||
rootValue: 37.5,
|
||||
propList: ["*"],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa)
|
||||
@ -44,8 +50,8 @@ module.exports = {
|
||||
|
||||
举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。
|
||||
|
||||
- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。
|
||||
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
|
||||
- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。
|
||||
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
|
||||
|
||||
也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。
|
||||
|
||||
@ -55,15 +61,15 @@ module.exports = {
|
||||
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
|
||||
|
||||
<style>
|
||||
/* rootValue: 75 */
|
||||
.image {
|
||||
width: 750px;
|
||||
height: 1334px;
|
||||
}
|
||||
/* rootValue: 37.5 */
|
||||
.image {
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
}
|
||||
/* rootValue: 75 */
|
||||
.image {
|
||||
width: 750px;
|
||||
height: 1334px;
|
||||
}
|
||||
/* rootValue: 37.5 */
|
||||
.image {
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="router">✅ Vue-router </span>
|
||||
# Vue-router
|
||||
|
||||
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
|
||||
|
||||
@ -7,28 +7,28 @@
|
||||
前往:[vue.config.js 基础配置](#base)
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Vue from "vue";
|
||||
import Router from "vue-router";
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Router);
|
||||
export const router = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: () => import('@/views/home/index'), // 路由懒加载
|
||||
meta: {
|
||||
title: '首页', // 页面标题
|
||||
keepAlive: false, // keep-alive 标识
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import("@/views/home/index"), // 路由懒加载
|
||||
meta: {
|
||||
title: "首页", // 页面标题
|
||||
keepAlive: false, // keep-alive 标识
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
const createRouter = () =>
|
||||
new Router({
|
||||
// mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
|
||||
// base: '/app/',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: router,
|
||||
})
|
||||
new Router({
|
||||
// mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
|
||||
// base: '/app/',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: router,
|
||||
});
|
||||
|
||||
export default createRouter()
|
||||
export default createRouter();
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="sass">✅ Sass 全局样式</span>
|
||||
# Sass 全局样式
|
||||
|
||||
首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
/* global styles */
|
||||
/* global styles */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* local styles */
|
||||
/* local styles */
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -32,11 +32,11 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
|
||||
|
||||
```css
|
||||
.about-container {
|
||||
/* 你的命名空间 */
|
||||
.van-button {
|
||||
/* vant-ui 元素*/
|
||||
margin-right: 0px;
|
||||
}
|
||||
/* 你的命名空间 */
|
||||
.van-button {
|
||||
/* vant-ui 元素*/
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -49,56 +49,57 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
|
||||
.a >>> .b { /* ... */ }
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 全局变量
|
||||
|
||||
`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量：
|
||||
|
||||
```javascript
|
||||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||
const defaultSettings = require('./src/config/index.js')
|
||||
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
|
||||
const defaultSettings = require("./src/config/index.js");
|
||||
module.exports = {
|
||||
css: {
|
||||
extract: IS_PROD,
|
||||
sourceMap: false,
|
||||
loaderOptions: {
|
||||
// 给 scss-loader 传递选项
|
||||
scss: {
|
||||
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
|
||||
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
|
||||
prependData: `
|
||||
css: {
|
||||
extract: IS_PROD,
|
||||
sourceMap: false,
|
||||
loaderOptions: {
|
||||
// 给 scss-loader 传递选项
|
||||
scss: {
|
||||
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
|
||||
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
|
||||
prependData: `
|
||||
@import "assets/css/mixin.scss";
|
||||
@import "assets/css/variables.scss";
|
||||
$cdn: "${defaultSettings.$cdn}";
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问
|
||||
|
||||
```javascript
|
||||
// 引入全局样式
|
||||
import '@/assets/css/index.scss'
|
||||
import "@/assets/css/index.scss";
|
||||
|
||||
// 设置 js中可以访问 $cdn
|
||||
// 引入cdn
|
||||
import { $cdn } from '@/config'
|
||||
Vue.prototype.$cdn = $cdn
|
||||
import { $cdn } from "@/config";
|
||||
Vue.prototype.$cdn = $cdn;
|
||||
```
|
||||
|
||||
在 css 和 js 使用
|
||||
|
||||
```html
|
||||
<script>
|
||||
console.log(this.$cdn)
|
||||
console.log(this.$cdn);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
|
||||
}
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url($cdn + "/weapp/logo.png") center / contain no-repeat;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="vant">✅ VantUI 组件按需加载 </span>
|
||||
# VantUI 组件按需加载
|
||||
|
||||
项目采
|
||||
用[Vant 自动按需引入组件 (推荐)](https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian)下
|
||||
@ -7,7 +7,7 @@
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 `babel` 插件，它会在编译过程中将
|
||||
`import` 的写法自动转换为按需引入的方式
|
||||
|
||||
#### 安装插件
|
||||
## 安装插件
|
||||
|
||||
```bash
|
||||
npm i babel-plugin-import -D
|
||||
@ -18,32 +18,34 @@ npm i babel-plugin-import -D
|
||||
```javascript
|
||||
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
|
||||
const plugins = [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
'vant',
|
||||
],
|
||||
]
|
||||
[
|
||||
"import",
|
||||
{
|
||||
libraryName: "vant",
|
||||
libraryDirectory: "es",
|
||||
style: true,
|
||||
},
|
||||
"vant",
|
||||
],
|
||||
];
|
||||
module.exports = {
|
||||
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
|
||||
plugins,
|
||||
}
|
||||
presets: [
|
||||
["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
|
||||
],
|
||||
plugins,
|
||||
};
|
||||
```
|
||||
|
||||
#### 使用组件
|
||||
## 使用组件
|
||||
|
||||
项目在 `src/plugins/vant.js` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
|
||||
|
||||
```javascript
|
||||
// 按需全局引入 vant组件
|
||||
import Vue from 'vue'
|
||||
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
|
||||
Vue.use(Button)
|
||||
Vue.use(Cell)
|
||||
Vue.use(List)
|
||||
Vue.use(Tabbar).use(TabbarItem)
|
||||
import Vue from "vue";
|
||||
import { Button, List, Cell, Tabbar, TabbarItem } from "vant";
|
||||
Vue.use(Button);
|
||||
Vue.use(Cell);
|
||||
Vue.use(List);
|
||||
Vue.use(Tabbar).use(TabbarItem);
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
### <span id="vuex">✅ Vuex 状态管理</span>
|
||||
# Vuex 状态管理
|
||||
|
||||
目录结构
|
||||
|
||||
@ -13,33 +13,36 @@
|
||||
`main.js` 引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import store from "./store";
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
})
|
||||
el: "#app",
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
});
|
||||
```
|
||||
|
||||
使用
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['userName']),
|
||||
},
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(["userName"]),
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Action 通过 store.dispatch 方法触发
|
||||
doDispatch() {
|
||||
this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
|
||||
},
|
||||
},
|
||||
}
|
||||
methods: {
|
||||
// Action 通过 store.dispatch 方法触发
|
||||
doDispatch() {
|
||||
this.$store.dispatch(
|
||||
"setUserName",
|
||||
"真乖，赶紧关注公众号，组织都在等你~"
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
### <span id="vw">✅ vm 适配方案 </span>
|
||||
# vm 适配方案
|
||||
|
||||
本项目使用的是 `rem` 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做
|
||||
。如果你想用 `vw`,你可以按照下面的方式切换。
|
||||
|
||||
#### 1.安装依赖
|
||||
## 1.安装依赖
|
||||
|
||||
```bash
|
||||
|
||||
@ -11,7 +11,7 @@ npm install postcss-px-to-viewport -D
|
||||
|
||||
```
|
||||
|
||||
#### 2.修改 .postcssrc.js
|
||||
## 2.修改 .postcssrc.js
|
||||
|
||||
将根目录下 .postcssrc.js 文件修改如下
|
||||
|
||||
@ -40,7 +40,7 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
#### 3.删除原来的 rem 相关代码
|
||||
## 3.删除原来的 rem 相关代码
|
||||
|
||||
src/main.js 删除如下代码
|
||||
|
||||
@ -57,5 +57,3 @@ package.json 删除如下代码
|
||||
```
|
||||
|
||||
运行起来，F12 元素 css style 就是 vw 单位了
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
@ -56,3 +56,11 @@ nutUI 需删除`src/plugins/nutUI.ts`和`main.ts`文件下的引入
|
||||
vant 和 varlet 只需删除对应的 resolvers 即可
|
||||
|
||||
删除后需全局搜索删除不需要的组件，避免报错
|
||||
|
||||
## 参考文档
|
||||
|
||||
- [nutUI](https://nutui.jd.com/#/zh-CN/component/button)
|
||||
|
||||
- [vant](https://vant-contrib.gitee.io/vant/#/zh-CN)
|
||||
|
||||
- [varlet](https://varlet-varletjs.vercel.app/#/zh-CN/button)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user