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

docs: update docs

Browse Source
This commit is contained in:
fonghehe 2022-08-22 18:37:44 +08:00
parent ea8d822966
commit 27b3e97b15
19 changed files with 472 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
README.md
View File

@ -77,8 +77,6 @@ yarn dev
} }
``` ```
[▲ 回顶部](#top)
### <span id="viewport">✅ viewport 适配方案 </span> ### <span id="viewport">✅ viewport 适配方案 </span>
不用担心，项目已经配置好了 `viewport` 适配，下面仅做介绍： 不用担心，项目已经配置好了 `viewport` 适配，下面仅做介绍：
@ -122,7 +120,7 @@ module.exports = {
我们知道 `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` 达到适配。
@ -156,8 +154,6 @@ module.exports = {
</style> </style>
``` ```
[▲ 回顶部](#top)
### <span id="ui">✅ 多 UI 组件库供选择 </span> ### <span id="ui">✅ 多 UI 组件库供选择 </span>
Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。 Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
@ -188,8 +184,8 @@ nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载
```javascript ```javascript
// 按需全局引入nutUI组件 // 按需全局引入nutUI组件
import Vue from 'vue'; import Vue from "vue";
import { Button, Cell, CellGroup } from '@nutui/nutui'; import { Button, Cell, CellGroup } from "@nutui/nutui";
export const nutUiComponents = [Button, Cell, CellGroup]; export const nutUiComponents = [Button, Cell, CellGroup];
// 在main.ts文件中引入 // 在main.ts文件中引入
@ -217,8 +213,6 @@ vant 和 varlet 只需删除对应的 resolvers 即可
删除后需全局搜索删除不需要的组件，避免报错 删除后需全局搜索删除不需要的组件，避免报错
[▲ 回顶部](#top)
### <span id="Pinia">✅ Pinia 状态管理</span> ### <span id="Pinia">✅ Pinia 状态管理</span>
下一代 vuex，使用极其方便，ts 兼容好 下一代 vuex，使用极其方便，ts 兼容好
@ -236,14 +230,12 @@ vant 和 varlet 只需删除对应的 resolvers 即可
```html ```html
<script lang="ts" setup> <script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore(); const userStore = useUserStore();
userStore.login(); userStore.login();
</script> </script>
``` ```
[▲ 回顶部](#top)
### <span id="router">✅ Vue-router </span> ### <span id="router">✅ Vue-router </span>
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base` 本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
@ -253,16 +245,16 @@ vant 和 varlet 只需删除对应的 resolvers 即可
前往:[vue.config.js 基础配置](#base) 前往:[vue.config.js 基础配置](#base)
```javascript ```javascript
import Vue from 'vue'; import Vue from "vue";
import { createRouter, createWebHistory, Router } from 'vue-router'; import { createRouter, createWebHistory, Router } from "vue-router";
Vue.use(Router); Vue.use(Router);
export const router = [ export const router = [
{ {
name: 'root', name: "root",
path: '/', path: "/",
redirect: '/home', redirect: "/home",
component: () => import('@/layout/basic/index.vue'), component: () => import("@/layout/basic/index.vue"),
}, },
]; ];
@ -276,8 +268,6 @@ export default router;
更多:[Vue Router](https://router.vuejs.org/zh/introduction.html) 更多:[Vue Router](https://router.vuejs.org/zh/introduction.html)
[▲ 回顶部](#top)
### <span id="axios">✅ Axios 封装及接口管理</span> ### <span id="axios">✅ Axios 封装及接口管理</span>
`utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。 `utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
@ -287,11 +277,11 @@ export default router;
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录 - `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
```javascript ```javascript
import axios from 'axios'; import axios from "axios";
import store from '@/store'; import store from "@/store";
import { Toast } from 'vant'; import { Toast } from "vant";
// 根据环境不同引入不同api地址 // 根据环境不同引入不同api地址
import { baseApi } from '@/config'; import { baseApi } from "@/config";
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: baseApi, // url = base api url + request url baseURL: baseApi, // url = base api url + request url
@ -310,7 +300,7 @@ service.interceptors.request.use(
}); });
} }
if (store.getters.token) { if (store.getters.token) {
config.headers['X-Token'] = ''; config.headers["X-Token"] = "";
} }
return config; return config;
}, },
@ -318,7 +308,7 @@ service.interceptors.request.use(
// do something with request error // do something with request error
console.log(error); // for debug console.log(error); // for debug
return Promise.reject(error); return Promise.reject(error);
}, }
); );
// respone拦截器 // respone拦截器
service.interceptors.response.use( service.interceptors.response.use(
@ -328,20 +318,20 @@ service.interceptors.response.use(
if (res.status && res.status !== 200) { if (res.status && res.status !== 200) {
// 登录超时,重新登录 // 登录超时,重新登录
if (res.status === 401) { if (res.status === 401) {
store.dispatch('FedLogOut').then(() => { store.dispatch("FedLogOut").then(() => {
location.reload(); location.reload();
}); });
} }
return Promise.reject(res || 'error'); return Promise.reject(res || "error");
} else { } else {
return Promise.resolve(res); return Promise.resolve(res);
} }
}, },
(error) => { (error) => {
Toast.clear(); Toast.clear();
console.log('err' + error); // for debug console.log("err" + error); // for debug
return Promise.reject(error); return Promise.reject(error);
}, }
); );
export default service; export default service;
``` ```
@ -357,16 +347,16 @@ export default service;
- `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知 - `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
```javascript ```javascript
import qs from 'qs'; import qs from "qs";
// axios // axios
import request from '@/utils/request'; import request from "@/utils/request";
//user api //user api
// 用户信息 // 用户信息
export function getUserInfo(params) { export function getUserInfo(params) {
return request({ return request({
url: '/user/userinfo', url: "/user/userinfo",
method: 'post', method: "post",
data: qs.stringify(params), data: qs.stringify(params),
hideloading: true, // 隐藏 loading 组件 hideloading: true, // 隐藏 loading 组件
}); });
@ -377,18 +367,16 @@ export function getUserInfo(params) {
```javascript ```javascript
// 请求接口 // 请求接口
import { getUserInfo } from '@/api/user.js'; import { getUserInfo } from "@/api/user.js";
const params = { const params = {
user: 'sunnie', user: "sunnie",
}; };
getUserInfo(params) getUserInfo(params)
.then(() => {}) .then(() => {})
.catch(() => {}); .catch(() => {});
``` ```
[▲ 回顶部](#top)
### <span id="base">✅ vite.config.ts 基础配置 </span> ### <span id="base">✅ vite.config.ts 基础配置 </span>
如果你的 `Vue Router` 模式是 hash 如果你的 `Vue Router` 模式是 hash
@ -405,10 +393,10 @@ publicPath: '/app/',
```javascript ```javascript
export default function ({ command }: ConfigEnv): UserConfigExport { export default function ({ command }: ConfigEnv): UserConfigExport {
const isProduction = command === 'build'; const isProduction = command === "build";
return { return {
server: { server: {
host: '0.0.0.0', host: "0.0.0.0",
}, },
plugins: [ plugins: [
vue(), vue(),
@ -418,8 +406,8 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
}), }),
eruda(), eruda(),
viteMockServe({ viteMockServe({
mockPath: './src/mock', mockPath: "./src/mock",
localEnabled: command === 'serve', localEnabled: command === "serve",
logger: true, logger: true,
}), }),
], ],
@ -435,8 +423,6 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
} }
``` ```
[▲ 回顶部](#top)
### <span id="alias">✅ 配置 alias 别名 </span> ### <span id="alias">✅ 配置 alias 别名 </span>
```javascript ```javascript
@ -459,8 +445,6 @@ resolve: {
}, },
``` ```
[▲ 回顶部](#top)
### <span id="proxy">✅ 配置 proxy 跨域 </span> ### <span id="proxy">✅ 配置 proxy 跨域 </span>
```javascript ```javascript
@ -475,8 +459,6 @@ server: {
}, },
``` ```
[▲ 回顶部](#top)
### <span id="lint">✅ Eslint+Pettier+stylelint 统 ˜ 开发规范 </span> ### <span id="lint">✅ Eslint+Pettier+stylelint 统 ˜ 开发规范 </span>
根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改 根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改

31
docs/.vitepress/config.js
View File

@ -14,10 +14,11 @@ module.exports = {
"/guide/": sidebarGuide(), "/guide/": sidebarGuide(),
}, },
socialLinks: [ socialLinks: [
{ icon: "github", link: "https://github.com/tobe-fe-dalao/fastool" }, { icon: "github", link: "https://github.com/sunniejs/vue-h5-template" },
], ],
editLink: { 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编辑此页", text: "在GitHub编辑此页",
}, },
footer: { footer: {
@ -54,29 +55,31 @@ function sidebarGuide() {
text: "vue3-template", text: "vue3-template",
collapsible: true, collapsible: true,
items: [ items: [
{ text: "vite", link: "/guide/vue3/vite" }, { text: "启动项目", link: "/guide/vue3/start" },
{ text: "配置多环境变量", link: "/guide/vue3/env" }, { 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: "viewport 适配方案", link: "/guide/vue3/viewport" },
{ text: "多UI组件库供选择", link: "/guide/vue3/ui" }, { text: "UI组件库", link: "/guide/vue3/ui" },
{ text: "Pinia 状态管理", link: "/guide/vue3/pinia" }, { text: "Pinia 状态管理", link: "/guide/vue3/pinia" },
{ text: "vue-router", link: "/guide/vue3/router" }, { text: "vue-router", link: "/guide/vue3/router" },
{ text: "axios 封装及接口管理", link: "/guide/vue3/axios" }, { text: "axios 封装及接口管理", link: "/guide/vue3/axios" },
{ text: "vite.config.ts 基础配置", link: "/guide/vue3/base" }, { text: "alias", link: "/guide/vue3/alias" },
{ text: "alias", link: "/guide/vue3/base" }, { text: "proxy 跨域", link: "/guide/vue3/proxy" },
{ text: "proxy 跨域", link: "/guide/vue3/base" },
{ text: "多语言解决方案", link: "/guide/vue3/i18n" }, { text: "多语言解决方案", link: "/guide/vue3/i18n" },
{ {
text: "Eslint+Pettier+stylelint 统一开发规范", text: "统一开发规范",
link: "/guide/vue3/lint", link: "/guide/vue3/lint",
}, },
], ],
}, },
{ {
text: "vue2-template", text: "vue2-template",
collapsible: false, collapsible: true,
collapsed: true,
items: [ items: [
{ text: "启动项目", link: "/guide//vue2/start" }, { text: "启动项目", link: "/guide/vue2/start" },
{ text: "配置多环境变量", link: "/guide/vue2/env" }, { text: "多环境变量", link: "/guide/vue2/env" },
{ text: "rem 适配方案", link: "/guide/vue2/rem" }, { text: "rem 适配方案", link: "/guide/vue2/rem" },
{ text: "vw 适配方案", link: "/guide/vue2/vw" }, { text: "vw 适配方案", link: "/guide/vue2/vw" },
{ text: "VantUI 组件按需加载", link: "/guide/vue2/vant" }, { text: "VantUI 组件按需加载", link: "/guide/vue2/vant" },
@ -90,9 +93,9 @@ function sidebarGuide() {
{ text: "配置 打包分析", link: "/guide/vue2/bundle" }, { text: "配置 打包分析", link: "/guide/vue2/bundle" },
{ text: "配置 externals 引入 cdn 资源", link: "/guide/vue2/externals" }, { text: "配置 externals 引入 cdn 资源", link: "/guide/vue2/externals" },
{ text: "去掉 console.log", link: "/guide/vue2/console" }, { 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: "添加 IE 兼容", link: "/guide/vue2/ie" },
{ text: "Eslint+Pettier 统一开发规范", link: "/guide/vue2/lint" }, { text: "统一开发规范", link: "/guide/vue2/lint" },
], ],
}, },
]; ];

136
docs/guide/vue2/axios.md
View File

@ -1,95 +1,95 @@
### <span id="axios">✅ Axios 封装及接口管理</span> # Axios 封装及接口管理
`utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。 `utils/request.js` 封装 axios ,开发者需要根据后台接口做修改。
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token` - `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲 - `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录 - `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
```javascript ```javascript
import axios from 'axios' import axios from "axios";
import store from '@/store' import store from "@/store";
import { Toast } from 'vant' import { Toast } from "vant";
// 根据环境不同引入不同api地址 // 根据环境不同引入不同api地址
import { baseApi } from '@/config' import { baseApi } from "@/config";
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: baseApi, // url = base api url + request url baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout timeout: 5000, // request timeout
}) });
// request 拦截器 request interceptor // request 拦截器 request interceptor
service.interceptors.request.use( service.interceptors.request.use(
config => { (config) => {
// 不传递默认开启loading // 不传递默认开启loading
if (!config.hideloading) { if (!config.hideloading) {
// loading // loading
Toast.loading({ Toast.loading({
forbidClick: true, 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)
} }
) 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拦截器 // respone拦截器
service.interceptors.response.use( service.interceptors.response.use(
response => { (response) => {
Toast.clear() Toast.clear();
const res = response.data const res = response.data;
if (res.status && res.status !== 200) { if (res.status && res.status !== 200) {
// 登录超时,重新登录 // 登录超时,重新登录
if (res.status === 401) { if (res.status === 401) {
store.dispatch('FedLogOut').then(() => { store.dispatch("FedLogOut").then(() => {
location.reload() location.reload();
}) });
} }
return Promise.reject(res || 'error') return Promise.reject(res || "error");
} else { } else {
return Promise.resolve(res) return Promise.resolve(res);
}
},
error => {
Toast.clear()
console.log('err' + error) // for debug
return Promise.reject(error)
} }
) },
export default service (error) => {
Toast.clear();
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
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";
// axios // axios
import request from '@/utils/request' import request from "@/utils/request";
//user api //user api
// 用户信息 // 用户信息
export function getUserInfo(params) { export function getUserInfo(params) {
return request({ return request({
url: '/user/userinfo', url: "/user/userinfo",
method: 'post', method: "post",
data: qs.stringify(params), data: qs.stringify(params),
hideloading: true, // 隐藏 loading 组件 hideloading: true, // 隐藏 loading 组件
}) });
} }
``` ```
@ -97,10 +97,10 @@ export function getUserInfo(params) {
```javascript ```javascript
// 请求接口 // 请求接口
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(() => {});
``` ```

67
docs/guide/vue2/base.md
View File

@ -1,4 +1,4 @@
### <span id="base">✅ Webpack 4 vue.config.js 基础配置 </span> # Webpack 4 vue.config.js 基础配置
如果你的 `Vue Router` 模式是 hash 如果你的 `Vue Router` 模式是 hash
@ -6,31 +6,60 @@
publicPath: './', publicPath: './',
``` ```
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一直** 如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
```javascript ```javascript
publicPath: '/app/', publicPath: '/app/',
``` ```
```javascript 配置如下
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = { ```javascript
publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用 import { createVitePlugins } from "./config/vite/plugins";
// publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用 import { resolve } from "path";
outputDir: 'dist', // 生产环境构建文件的目录 import { ConfigEnv, UserConfigExport } from "vite";
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: !IS_PROD, const pathResolve = (dir: string) => {
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 return resolve(process.cwd(), ".", dir);
devServer: { };
port: 9020, // 端口号
open: false, // 启动后打开浏览器 // https://vitejs.dev/config/
overlay: { export default function ({ command }: ConfigEnv): UserConfigExport {
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 const isProduction = command === "build";
warnings: false, const root = process.cwd();
errors: true, 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';`,
},
},
},
};
} }
``` ```

27
docs/guide/vue2/bundle.md
View File

@ -1,20 +1,21 @@
### <span id="bundle">✅ 配置 打包分析 </span> # 配置打包分析
```javascript ```javascript
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = { module.exports = {
chainWebpack: config => { chainWebpack: (config) => {
// 打包分析 // 打包分析
if (IS_PROD) { if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [ config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
{ {
analyzerMode: 'static', analyzerMode: "static",
}, },
]) ]);
} }
}, },
} };
``` ```
```bash ```bash

82
docs/guide/vue2/chunks.md
View File

@ -1,45 +1,45 @@
### <span id="chunks">✅ splitChunks 单独打包第三方模块</span> # splitChunks 单独打包第三方模块
```javascript ```javascript
module.exports = { module.exports = {
chainWebpack: config => { chainWebpack: (config) => {
config.when(IS_PROD, config => { config.when(IS_PROD, (config) => {
config config
.plugin('ScriptExtHtmlWebpackPlugin') .plugin("ScriptExtHtmlWebpackPlugin")
.after('html') .after("html")
.use('script-ext-html-webpack-plugin', [ .use("script-ext-html-webpack-plugin", [
{ {
// 将 runtime 作为内联引入不单独存在 // 将 runtime 作为内联引入不单独存在
inline: /runtime\..*\.js$/, inline: /runtime\..*\.js$/,
}, },
]) ])
.end() .end();
config.optimization.splitChunks({ config.optimization.splitChunks({
chunks: 'all', chunks: "all",
cacheGroups: { cacheGroups: {
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块 // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
commons: { commons: {
name: 'chunk-commons', name: "chunk-commons",
test: resolve('src/components'), test: resolve("src/components"),
minChunks: 3, // 被至少用三次以上打包分离 minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级 priority: 5, // 优先级
reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。 reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
}, },
node_vendors: { node_vendors: {
name: 'chunk-libs', name: "chunk-libs",
chunks: 'initial', // 只打包初始时依赖的第三方 chunks: "initial", // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
priority: 10, priority: 10,
}, },
vantUI: { vantUI: {
name: 'chunk-vantUI', // 单独将 vantUI 拆包 name: "chunk-vantUI", // 单独将 vantUI 拆包
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的 priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?vant(.*)/, test: /[\\/]node_modules[\\/]_?vant(.*)/,
}, },
}, },
}) });
config.optimization.runtimeChunk('single') config.optimization.runtimeChunk("single");
}) });
}, },
} };
``` ```

32
docs/guide/vue2/console.md
View File

@ -1,4 +1,4 @@
### <span id="console">✅ 去掉 console.log </span> # 去掉 console.log
保留了测试环境和本地环境的 `console.log` 保留了测试环境和本地环境的 `console.log`
@ -10,25 +10,25 @@ npm i -D babel-plugin-transform-remove-console
```javascript ```javascript
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console // 获取 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 = [ const plugins = [
[ [
'import', "import",
{ {
libraryName: 'vant', libraryName: "vant",
libraryDirectory: 'es', libraryDirectory: "es",
style: true, style: true,
}, },
'vant', "vant",
], ],
] ];
// 去除 console.log // 去除 console.log
if (IS_PROD) { if (IS_PROD) {
plugins.push('transform-remove-console') plugins.push("transform-remove-console");
} }
module.exports = { module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]], presets: [["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry" }]],
plugins, plugins,
} };
``` ```

34
docs/guide/vue2/env.md
View File

@ -1,10 +1,10 @@
### <span id="env">✅ 配置多环境变量 </span> # 配置多环境变量
`package.json` 里的 `scripts` 配置 `serve` `stage` `build`，通过 `--mode xxx` 来执行不同环境 `package.json` 里的 `scripts` 配置 `serve` `stage` `build`，通过 `--mode xxx` 来执行不同环境
- 通过 `npm run serve` 启动本地 , 执行 `development` - 通过 `npm run serve` 启动本地 , 执行 `development`
- 通过 `npm run stage` 打包测试 , 执行 `staging` - 通过 `npm run stage` 打包测试 , 执行 `staging`
- 通过 `npm run build` 打包正式 , 执行 `production` - 通过 `npm run build` 打包正式 , 执行 `production`
```javascript ```javascript
"scripts": { "scripts": {
@ -22,7 +22,7 @@
在项目根目录中新建`.env.*` 在项目根目录中新建`.env.*`
- .env.development 本地开发环境配置 - .env.development 本地开发环境配置
```bash ```bash
NODE_ENV='development' NODE_ENV='development'
@ -31,7 +31,7 @@ VUE_APP_ENV = 'development'
``` ```
- .env.staging 测试环境配置 - .env.staging 测试环境配置
```bash ```bash
NODE_ENV='production' NODE_ENV='production'
@ -39,7 +39,7 @@ NODE_ENV='production'
VUE_APP_ENV = 'staging' VUE_APP_ENV = 'staging'
``` ```
- .env.production 正式环境配置 - .env.production 正式环境配置
```bash ```bash
NODE_ENV='production' NODE_ENV='production'
@ -58,8 +58,8 @@ config/index.js
```javascript ```javascript
// 根据环境引入不同配置 process.env.NODE_ENV // 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV) const config = require("./env." + process.env.VUE_APP_ENV);
module.exports = config module.exports = config;
``` ```
配置对应环境的变量，拿本地环境文件 `env.development.js` 举例，用户可以根据需求修改 配置对应环境的变量，拿本地环境文件 `env.development.js` 举例，用户可以根据需求修改
@ -67,18 +67,18 @@ module.exports = config
```javascript ```javascript
// 本地环境配置 // 本地环境配置
module.exports = { module.exports = {
title: 'vue-h5-template', title: "vue-h5-template",
baseUrl: 'http://localhost:9018', // 项目地址 baseUrl: "http://localhost:9018", // 项目地址
baseApi: 'https://test.xxx.com/api', // 本地api请求地址 baseApi: "https://test.xxx.com/api", // 本地api请求地址
APPID: 'xxx', APPID: "xxx",
APPSECRET: 'xxx', APPSECRET: "xxx",
} };
``` ```
根据环境不同，变量就会不同了 根据环境不同，变量就会不同了
```javascript ```javascript
// 根据环境不同引入不同baseApi地址 // 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config' import { baseApi } from "@/config";
console.log(baseApi) console.log(baseApi);
``` ```

98
docs/guide/vue2/externals.md
View File

@ -1,4 +1,4 @@
### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span> # 配置 externals 引入 cdn 资源
这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
以实际测试一下。 以实际测试一下。
@ -11,60 +11,60 @@
暂时还没有研究放到自己的 cdn 服务器上。 暂时还没有研究放到自己的 cdn 服务器上。
```javascript ```javascript
const defaultSettings = require('./src/config/index.js') const defaultSettings = require("./src/config/index.js");
const name = defaultSettings.title || 'vue mobile template' const name = defaultSettings.title || "vue mobile template";
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
// externals // externals
const externals = { const externals = {
vue: 'Vue', vue: "Vue",
'vue-router': 'VueRouter', "vue-router": "VueRouter",
vuex: 'Vuex', vuex: "Vuex",
vant: 'vant', vant: "vant",
axios: 'axios', axios: "axios",
} };
// CDN外链，会插入到index.html中 // CDN外链，会插入到index.html中
const cdn = { const cdn = {
// 开发环境 // 开发环境
dev: { dev: {
css: [], css: [],
js: [], js: [],
}, },
// 生产环境 // 生产环境
build: { build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'], css: ["https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css"],
js: [ js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.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/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/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/vuex@3.1.2/dist/vuex.min.js",
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js', "https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js",
], ],
}, },
} };
module.exports = { module.exports = {
configureWebpack: config => { configureWebpack: (config) => {
config.name = name config.name = name;
// 为生产环境修改配置... // 为生产环境修改配置...
if (IS_PROD) { if (IS_PROD) {
// externals // externals
config.externals = externals config.externals = externals;
} }
}, },
chainWebpack: config => { chainWebpack: (config) => {
/** /**
* 添加CDN参数到htmlWebpackPlugin配置中 * 添加CDN参数到htmlWebpackPlugin配置中
*/ */
config.plugin('html').tap(args => { config.plugin("html").tap((args) => {
if (IS_PROD) { if (IS_PROD) {
args[0].cdn = cdn.build args[0].cdn = cdn.build;
} else { } else {
args[0].cdn = cdn.dev args[0].cdn = cdn.dev;
} }
return args return args;
}) });
}, },
} };
``` ```
在 public/index.html 中添加 在 public/index.html 中添加

16
docs/guide/vue2/ie.md
View File

@ -1,4 +1,4 @@
### <span id="ie">✅ 添加 IE 兼容 </span> # 添加 IE 兼容
之前的方式 会报 `@babel/polyfill` is deprecated. Please, use required parts of `core-js` and 之前的方式 会报 `@babel/polyfill` is deprecated. Please, use required parts of `core-js` and
`regenerator-runtime/runtime` separately `regenerator-runtime/runtime` separately
@ -14,17 +14,19 @@ npm i --save core-js regenerator-runtime
```javascript ```javascript
// 兼容 IE // 兼容 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 // 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 "core-js/stable";
import 'regenerator-runtime/runtime' import "regenerator-runtime/runtime";
``` ```
配置 `babel.config.js` 配置 `babel.config.js`
```javascript ```javascript
const plugins = [] const plugins = [];
module.exports = { module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]], presets: [
plugins, ["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
} ],
plugins,
};
``` ```

2
docs/guide/vue2/lint.md
View File

@ -1,4 +1,4 @@
### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span> # Eslint + Pettier 统一开发规范
VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会 VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会
专门写个如何使用配合使用这三个玩意 专门写个如何使用配合使用这三个玩意

38
docs/guide/vue2/proxy.md
View File

@ -1,4 +1,4 @@
### <span id="proxy">✅ 配置 proxy 跨域 </span> # 配置 proxy 跨域
如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数 如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
@ -6,31 +6,31 @@
```javascript ```javascript
module.exports = { module.exports = {
devServer: { devServer: {
// .... // ....
proxy: { proxy: {
//配置跨域 //配置跨域
'/api': { "/api": {
target: 'https://test.xxx.com', // 接口的域名 target: "https://test.xxx.com", // 接口的域名
// ws: true, // 是否启用websockets // ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端 changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: { pathRewrite: {
'^/api': '/', "^/api": "/",
},
},
}, },
},
}, },
} },
};
``` ```
使用 例如: `src/api/home.js` 使用 例如: `src/api/home.js`
```javascript ```javascript
export function getUserInfo(params) { export function getUserInfo(params) {
return request({ return request({
url: '/api/userinfo', url: "/api/userinfo",
method: 'post', method: "post",
data: qs.stringify(params), data: qs.stringify(params),
}) });
} }
``` ```

56
docs/guide/vue2/rem.md
View File

@ -1,11 +1,11 @@
### <span id="rem">✅ rem 适配方案 </span> # rem 适配方案
不用担心，项目已经配置好了 `rem` 适配, 下面仅做介绍： 不用担心，项目已经配置好了 `rem` 适配, 下面仅做介绍：
Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具: Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具:
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem` - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件，用于将单位转化为 `rem`
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值 - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值
##### PostCSS 配置 ##### PostCSS 配置
@ -14,16 +14,22 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
```javascript ```javascript
// https://github.com/michael-ciniawsky/postcss-load-config // https://github.com/michael-ciniawsky/postcss-load-config
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: { autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] overrideBrowserslist: [
}, "Android 4.1",
'postcss-pxtorem': { "iOS 7.1",
rootValue: 37.5, "Chrome > 31",
propList: ['*'] "ff > 31",
} "ie >= 8",
} ],
} },
"postcss-pxtorem": {
rootValue: 37.5,
propList: ["*"],
},
},
};
``` ```
更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa) 更多详细信息： [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa)
@ -44,8 +50,8 @@ module.exports = {
举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。 举个例子：设计给了你一张 750px \* 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。
- 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。 - 当`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。
- 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 - 当`rootValue: 37.5` 的时候，样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。 也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。
@ -55,15 +61,15 @@ module.exports = {
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" /> <img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
<style> <style>
/* rootValue: 75 */ /* rootValue: 75 */
.image { .image {
width: 750px; width: 750px;
height: 1334px; height: 1334px;
} }
/* rootValue: 37.5 */ /* rootValue: 37.5 */
.image { .image {
width: 375px; width: 375px;
height: 667px; height: 667px;
} }
</style> </style>
``` ```

40
docs/guide/vue2/router.md
View File

@ -1,4 +1,4 @@
### <span id="router">✅ Vue-router </span> # Vue-router
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base` 本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
@ -7,28 +7,28 @@
前往:[vue.config.js 基础配置](#base) 前往:[vue.config.js 基础配置](#base)
```javascript ```javascript
import Vue from 'vue' import Vue from "vue";
import Router from 'vue-router' import Router from "vue-router";
Vue.use(Router) Vue.use(Router);
export const router = [ export const router = [
{ {
path: '/', path: "/",
name: 'index', name: "index",
component: () => import('@/views/home/index'), // 路由懒加载 component: () => import("@/views/home/index"), // 路由懒加载
meta: { meta: {
title: '首页', // 页面标题 title: "首页", // 页面标题
keepAlive: false, // keep-alive 标识 keepAlive: false, // keep-alive 标识
},
}, },
] },
];
const createRouter = () => const createRouter = () =>
new Router({ new Router({
// mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
// base: '/app/', // base: '/app/',
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: router, routes: router,
}) });
export default createRouter() export default createRouter();
``` ```

63
docs/guide/vue2/sass.md
View File

@ -1,4 +1,4 @@
### <span id="sass">✅ Sass 全局样式</span> # Sass 全局样式
首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！ 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
@ -6,11 +6,11 @@
```html ```html
<style lang="scss"> <style lang="scss">
/* global styles */ /* global styles */
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
/* local styles */ /* local styles */
</style> </style>
``` ```
@ -32,11 +32,11 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
```css ```css
.about-container { .about-container {
/* 你的命名空间 */ /* 你的命名空间 */
.van-button { .van-button {
/* vant-ui 元素*/ /* vant-ui 元素*/
margin-right: 0px; margin-right: 0px;
} }
} }
``` ```
@ -49,56 +49,57 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
.a >>> .b { /* ... */ } .a >>> .b { /* ... */ }
</style> </style>
``` ```
#### 全局变量 #### 全局变量
`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 ```javascript
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const defaultSettings = require('./src/config/index.js') const defaultSettings = require("./src/config/index.js");
module.exports = { module.exports = {
css: { css: {
extract: IS_PROD, extract: IS_PROD,
sourceMap: false, sourceMap: false,
loaderOptions: { loaderOptions: {
// 给 scss-loader 传递选项 // 给 scss-loader 传递选项
scss: { scss: {
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData: ` prependData: `
@import "assets/css/mixin.scss"; @import "assets/css/mixin.scss";
@import "assets/css/variables.scss"; @import "assets/css/variables.scss";
$cdn: "${defaultSettings.$cdn}"; $cdn: "${defaultSettings.$cdn}";
`, `,
}, },
},
}, },
} },
};
``` ```
设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问 设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问
```javascript ```javascript
// 引入全局样式 // 引入全局样式
import '@/assets/css/index.scss' import "@/assets/css/index.scss";
// 设置 js中可以访问 $cdn // 设置 js中可以访问 $cdn
// 引入cdn // 引入cdn
import { $cdn } from '@/config' import { $cdn } from "@/config";
Vue.prototype.$cdn = $cdn Vue.prototype.$cdn = $cdn;
``` ```
在 css 和 js 使用 在 css 和 js 使用
```html ```html
<script> <script>
console.log(this.$cdn) console.log(this.$cdn);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.logo { .logo {
width: 120px; width: 120px;
height: 120px; height: 120px;
background: url($cdn+'/weapp/logo.png') center / contain no-repeat; background: url($cdn + "/weapp/logo.png") center / contain no-repeat;
} }
</style> </style>
``` ```

46
docs/guide/vue2/vant.md
View File

@ -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)下 用[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` 插件，它会在编译过程中将 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 `babel` 插件，它会在编译过程中将
`import` 的写法自动转换为按需引入的方式 `import` 的写法自动转换为按需引入的方式
#### 安装插件 ## 安装插件
```bash ```bash
npm i babel-plugin-import -D npm i babel-plugin-import -D
@ -18,32 +18,34 @@ npm i babel-plugin-import -D
```javascript ```javascript
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置 // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [ const plugins = [
[ [
'import', "import",
{ {
libraryName: 'vant', libraryName: "vant",
libraryDirectory: 'es', libraryDirectory: "es",
style: true, style: true,
}, },
'vant', "vant",
], ],
] ];
module.exports = { module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]], presets: [
plugins, ["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
} ],
plugins,
};
``` ```
#### 使用组件 ## 使用组件
项目在 `src/plugins/vant.js` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用 项目在 `src/plugins/vant.js` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
```javascript ```javascript
// 按需全局引入 vant组件 // 按需全局引入 vant组件
import Vue from 'vue' import Vue from "vue";
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant' import { Button, List, Cell, Tabbar, TabbarItem } from "vant";
Vue.use(Button) Vue.use(Button);
Vue.use(Cell) Vue.use(Cell);
Vue.use(List) Vue.use(List);
Vue.use(Tabbar).use(TabbarItem) Vue.use(Tabbar).use(TabbarItem);
``` ```

45
docs/guide/vue2/vuex.md
View File

@ -1,4 +1,4 @@
### <span id="vuex">✅ Vuex 状态管理</span> # Vuex 状态管理
目录结构 目录结构
@ -13,33 +13,36 @@
`main.js` 引入 `main.js` 引入
```javascript ```javascript
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import store from './store' import store from "./store";
new Vue({ new Vue({
el: '#app', el: "#app",
router, router,
store, store,
render: h => h(App), render: (h) => h(App),
}) });
``` ```
使用 使用
```html ```html
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
export default { export default {
computed: { computed: {
...mapGetters(['userName']), ...mapGetters(["userName"]),
}, },
methods: { methods: {
// Action 通过 store.dispatch 方法触发 // Action 通过 store.dispatch 方法触发
doDispatch() { doDispatch() {
this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~') this.$store.dispatch(
}, "setUserName",
}, "真乖，赶紧关注公众号，组织都在等你~"
} );
},
},
};
</script> </script>
``` ```

10
docs/guide/vue2/vw.md
View File

@ -1,9 +1,9 @@
### <span id="vw">✅ vm 适配方案 </span> # vm 适配方案
本项目使用的是 `rem` 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做 本项目使用的是 `rem` 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 `rem` 或者 `vw`, 会有专门的工具去帮你做
。如果你想用 `vw`,你可以按照下面的方式切换。 。如果你想用 `vw`,你可以按照下面的方式切换。
#### 1.安装依赖 ## 1.安装依赖
```bash ```bash
@ -11,7 +11,7 @@ npm install postcss-px-to-viewport -D
``` ```
#### 2.修改 .postcssrc.js ## 2.修改 .postcssrc.js
将根目录下 .postcssrc.js 文件修改如下 将根目录下 .postcssrc.js 文件修改如下
@ -40,7 +40,7 @@ module.exports = {
}; };
``` ```
#### 3.删除原来的 rem 相关代码 ## 3.删除原来的 rem 相关代码
src/main.js 删除如下代码 src/main.js 删除如下代码
@ -57,5 +57,3 @@ package.json 删除如下代码
``` ```
运行起来，F12 元素 css style 就是 vw 单位了 运行起来，F12 元素 css style 就是 vw 单位了
[▲ 回顶部](#top)

8
docs/guide/vue3/ui.md
View File

@ -56,3 +56,11 @@ nutUI 需删除`src/plugins/nutUI.ts`和`main.ts`文件下的引入
vant 和 varlet 只需删除对应的 resolvers 即可 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)