diff --git a/README.md b/README.md
index f6cdcb3..53b85dc 100644
--- a/README.md
+++ b/README.md
@@ -102,9 +102,8 @@ VUE_APP_ENV = 'production'
这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production`
变量我们统一在 `src/config/env.*.js` 里进行管理。
-这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
-**修改起来方便,不需
-要重启项目,符合开发习惯。**
+这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
+**修改起来方便,不需要重启项目,符合开发习惯。**
config/index.js
@@ -131,7 +130,7 @@ module.exports = {
```javascript
// 根据环境不同引入不同baseApi地址
-import {baseApi} from '@/config'
+import { baseApi } from '@/config'
console.log(baseApi)
```
@@ -226,10 +225,9 @@ module.exports = {
npm i babel-plugin-import -D
```
-在` babel.config.js` 设置
+在`babel.config.js` 设置
```javascript
-
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
const plugins = [
[
@@ -243,10 +241,9 @@ const plugins = [
]
]
module.exports = {
- presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
+ presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
plugins
}
-
```
#### 使用组件
@@ -256,7 +253,7 @@ module.exports = {
```javascript
// 按需全局引入 vant组件
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(Cell)
Vue.use(List)
@@ -273,11 +270,11 @@ Vue.use(Tabbar).use(TabbarItem)
```html
```
@@ -295,15 +292,16 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
#### 自定义 vant-ui 样式
-现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。
+现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能
+加 `scoped`,但你又想只覆盖这个页面的 `vant` 样式,你就可在它的父级加一个 `class`,用命名空间来解决问题。
```css
.about-container {
- /* 你的命名空间 */
- .van-button {
- /* vant-ui 元素*/
- margin-right: 0px;
- }
+ /* 你的命名空间 */
+ .van-button {
+ /* vant-ui 元素*/
+ margin-right: 0px;
+ }
}
```
@@ -316,30 +314,32 @@ vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
.a >>> .b { /* ... */ }
```
+
#### 全局变量
-`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:
+`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配
+置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:
```javascript
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
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}";
- `,
- },
- },
- },
+ `
+ }
+ }
+ }
}
```
@@ -359,14 +359,14 @@ Vue.prototype.$cdn = $cdn
```html
```
@@ -402,7 +402,7 @@ new Vue({
```html