diff --git a/README.md b/README.md index ed7ccc3..d07461d 100644 --- a/README.md +++ b/README.md @@ -77,8 +77,6 @@ yarn dev } ``` -[▲ 回顶部](#top) - ### ✅ viewport 适配方案 不用担心，项目已经配置好了 `viewport` 适配，下面仅做介绍： @@ -122,7 +120,7 @@ module.exports = { 我们知道 `1rem` 等于 `html` 根元素设定的 `font-size` 的 `px` 值。Vant UI 设置 `rootValue: 37.5` , 你可以看到在 iPhone 6 下看到 （ `1rem 等于 37.5px` ）： ```html - + ``` 切换不同的机型，根元素可能会有不同的 `font-size` 。当你写 css px 样式时，会被程序换算成 `rem` 达到适配。 @@ -156,8 +154,6 @@ module.exports = { ``` -[▲ 回顶部](#top) - ### ✅ 多 UI 组件库供选择 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) - ### ✅ Pinia 状态管理 下一代 vuex，使用极其方便，ts 兼容好 @@ -236,14 +230,12 @@ vant 和 varlet 只需删除对应的 resolvers 即可 ```html ``` -[▲ 回顶部](#top) - ### ✅ Vue-router 本案例采用 `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) - ### ✅ Axios 封装及接口管理 `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) - ### ✅ vite.config.ts 基础配置 如果你的 `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) - ### ✅ 配置 alias 别名 ```javascript @@ -459,8 +445,6 @@ resolve: { }, ``` -[▲ 回顶部](#top) - ### ✅ 配置 proxy 跨域 ```javascript @@ -475,8 +459,6 @@ server: { }, ``` -[▲ 回顶部](#top) - ### ✅ Eslint+Pettier+stylelint 统 ˜ 开发规范 根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改 diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index fdc834a..4c2dfe0 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -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" }, ], }, ]; diff --git a/docs/guide/vue2/axios.md b/docs/guide/vue2/axios.md index 2416ead..394d34f 100644 --- a/docs/guide/vue2/axios.md +++ b/docs/guide/vue2/axios.md @@ -1,95 +1,95 @@ -### ✅ Axios 封装及接口管理 +# 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(() => {}); ``` diff --git a/docs/guide/vue2/base.md b/docs/guide/vue2/base.md index 098cd9f..0b6dc26 100644 --- a/docs/guide/vue2/base.md +++ b/docs/guide/vue2/base.md @@ -1,4 +1,4 @@ -### ✅ Webpack 4 vue.config.js 基础配置 +# 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';`, + }, + }, + }, + }; } ``` diff --git a/docs/guide/vue2/bundle.md b/docs/guide/vue2/bundle.md index 50a8011..6d520c9 100644 --- a/docs/guide/vue2/bundle.md +++ b/docs/guide/vue2/bundle.md @@ -1,20 +1,21 @@ -### ✅ 配置 打包分析 +# 配置打包分析 ```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 diff --git a/docs/guide/vue2/chunks.md b/docs/guide/vue2/chunks.md index f4c21cd..98094f5 100644 --- a/docs/guide/vue2/chunks.md +++ b/docs/guide/vue2/chunks.md @@ -1,45 +1,45 @@ -### ✅ splitChunks 单独打包第三方模块 +# 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"); + }); + }, +}; ``` diff --git a/docs/guide/vue2/console.md b/docs/guide/vue2/console.md index aa11db2..3013ba4 100644 --- a/docs/guide/vue2/console.md +++ b/docs/guide/vue2/console.md @@ -1,4 +1,4 @@ -### ✅ 去掉 console.log +# 去掉 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, +}; ``` diff --git a/docs/guide/vue2/env.md b/docs/guide/vue2/env.md index 9c5818c..f9b95ab 100644 --- a/docs/guide/vue2/env.md +++ b/docs/guide/vue2/env.md @@ -1,10 +1,10 @@ -### ✅ 配置多环境变量 +# 配置多环境变量 `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); ``` diff --git a/docs/guide/vue2/externals.md b/docs/guide/vue2/externals.md index 810a78f..d4d35f0 100644 --- a/docs/guide/vue2/externals.md +++ b/docs/guide/vue2/externals.md @@ -1,4 +1,4 @@ -### ✅ 配置 externals 引入 cdn 资源 +# 配置 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 中添加 diff --git a/docs/guide/vue2/ie.md b/docs/guide/vue2/ie.md index 3bec6a6..99a0305 100644 --- a/docs/guide/vue2/ie.md +++ b/docs/guide/vue2/ie.md @@ -1,4 +1,4 @@ -### ✅ 添加 IE 兼容 +# 添加 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, +}; ``` diff --git a/docs/guide/vue2/lint.md b/docs/guide/vue2/lint.md index 8f46dd7..bdb1cec 100644 --- a/docs/guide/vue2/lint.md +++ b/docs/guide/vue2/lint.md @@ -1,4 +1,4 @@ -### ✅ Eslint + Pettier 统一开发规范 +# Eslint + Pettier 统一开发规范 VScode （版本 1.47.3）安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化，其他使用`prettier`,后面会 专门写个如何使用配合使用这三个玩意 diff --git a/docs/guide/vue2/proxy.md b/docs/guide/vue2/proxy.md index d38002e..ef75da3 100644 --- a/docs/guide/vue2/proxy.md +++ b/docs/guide/vue2/proxy.md @@ -1,4 +1,4 @@ -### ✅ 配置 proxy 跨域 +# 配置 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), + }); } ``` diff --git a/docs/guide/vue2/rem.md b/docs/guide/vue2/rem.md index b6acfd2..2aa7413 100644 --- a/docs/guide/vue2/rem.md +++ b/docs/guide/vue2/rem.md @@ -1,11 +1,11 @@ -### ✅ rem 适配方案 +# 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 = { ``` diff --git a/docs/guide/vue2/router.md b/docs/guide/vue2/router.md index d883335..37ee864 100644 --- a/docs/guide/vue2/router.md +++ b/docs/guide/vue2/router.md @@ -1,4 +1,4 @@ -### ✅ Vue-router +# 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(); ``` diff --git a/docs/guide/vue2/sass.md b/docs/guide/vue2/sass.md index fab2845..52e738a 100644 --- a/docs/guide/vue2/sass.md +++ b/docs/guide/vue2/sass.md @@ -1,4 +1,4 @@ -### ✅ Sass 全局样式 +# Sass 全局样式 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！ @@ -6,11 +6,11 @@ ```html ``` @@ -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 { /* ... */ } ``` + #### 全局变量 `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 ``` diff --git a/docs/guide/vue2/vant.md b/docs/guide/vue2/vant.md index f276212..7bdfd8f 100644 --- a/docs/guide/vue2/vant.md +++ b/docs/guide/vue2/vant.md @@ -1,4 +1,4 @@ -### ✅ VantUI 组件按需加载 +# 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); ``` diff --git a/docs/guide/vue2/vuex.md b/docs/guide/vue2/vuex.md index df7d400..9c150e0 100644 --- a/docs/guide/vue2/vuex.md +++ b/docs/guide/vue2/vuex.md @@ -1,4 +1,4 @@ -### ✅ Vuex 状态管理 +# 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 ``` diff --git a/docs/guide/vue2/vw.md b/docs/guide/vue2/vw.md index 38f07ae..aa0572d 100644 --- a/docs/guide/vue2/vw.md +++ b/docs/guide/vue2/vw.md @@ -1,9 +1,9 @@ -### ✅ vm 适配方案 +# 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) diff --git a/docs/guide/vue3/ui.md b/docs/guide/vue3/ui.md index c1b5e67..eb44fc0 100644 --- a/docs/guide/vue3/ui.md +++ b/docs/guide/vue3/ui.md @@ -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)