vue中引用vant，附带样式

1、首先 npm install babel-plugin-import 和 npm install vant 2、样式在项目中的  .babelrc 文件下 ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}, "vant"]]  //vant样式引用 3、在main.js中 import { Button } from 'vant'   //引用vant组件库中可用组件 Vue.use(Button )  注册组件即可。 from:https://www.cnblogs.com/1rookie/p/12660684.html

移动端手写签名插件 vue

第一步

1
npm install vue-signature

  第二步 main.js

1
2
import vueSignature from "vue-signature"
Vue.use(vueSignature)

  vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
    <div id="app">
        <vueSignature
            ref="signature"
            :sigOption="option"
            :w="'800px'"
            :h="'400px'"
            :disabled="disabled"
            :defaultUrl="dataUrl"
        ></vueSignature>
        <vueSignature ref="signature1" :sigOption="option"></vueSignature>
        <button @click="save">Save</button>
        <button @click="clear">Clear</button>
        <button @click="undo">Undo</button>
        <button @click="addWaterMark">addWaterMark</button>
        <button @click="handleDisabled">disabled</button>
    </div>
</template>
<script>
export default {
    name: "app",
    data() {
        return {
            option: {
                penColor: "rgb(0, 0, 0)",
                backgroundColor: "rgb(255,255,255)",
            },
            disabled: false,
            dataUrl:
                "https://avatars2.githubusercontent.com/u/17644818?s=460&v=4",
        };
    },
    methods: {
        save() {
            var _this = this;
            var png = _this.$refs.signature.save();
            var jpeg = _this.$refs.signature.save("image/jpeg");
            var svg = _this.$refs.signature.save("image/svg+xml");
            console.log(png);
            console.log(jpeg);
            console.log(svg);
        },
        clear() {
            var _this = this;
            _this.$refs.signature.clear();
        },
        undo() {
            var _this = this;
            _this.$refs.signature.undo();
        },
        addWaterMark() {
            var _this = this;
            _this.$refs.signature.addWaterMark({
                text: "mark text", // watermark text, > default ''
                font: "20px Arial", // mark font, > default '20px sans-serif'
                style: "all", // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill
                fillStyle: "red", // fillcolor, > default '#333'
                strokeStyle: "blue", // strokecolor, > default '#333'
                x: 100, // fill positionX, > default 20
                y: 200, // fill positionY, > default 20
                sx: 100, // stroke positionX, > default 40
                sy: 200, // stroke positionY, > default 40
            });
        },
        fromDataURL(url) {
            var _this = this;
            _this.$refs.signature.fromDataURL(
                "data:image/png;base64,iVBORw0K..."
            );
        },
        handleDisabled() {
            var _this = this;
            _this.disabled = !_this.disabled;
        },
    },
};
</script>

  from:https://blog.csdn.net/XLL20001022/article/details/101548655

vue项目打包后css背景图路径不对的问题

问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比 图一：使用npm run dev命令访问   图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图   解决办法： 解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

1
publicPath:'../../'

添加位置为如下图：   然后重新执行 npm run build 命令，即可成功显示图片   from:https://www.cnblogs.com/libo0125ok/p/9361038.html

npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置

备注：<=> 意为等价于； 1、npm install <=> npm i --save   <=> -S --save-dev  <=> -D npm run start <=> npm start  // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev  <packname>   工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader… 3、npm i --save <packname>  项目（运行时、发布到生产环境时）依赖；例：antd , element,react… 4、对应关系如下（至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给其他看你项目的人带来误解、可能会导致一些bug的出现，还有一些配置的错乱等） 5、使用 npm i 安装package.json里的依赖时，两部分的包都会pull下来 5-1、使用 --prod、 npm i --prod <=> npm i --production  // 仅会拉取dependencies中的依赖 5-2、设置NODE_DEV=production时            // 效果同上，仅会拉取dependencies中的依赖 (注意等号两边没空格) 5-2-1、命令行设置（注意不同环境时的"分割符"） window => cmd ：set NODE_ENV=production && xxxx mac      => shell  : NODE_ENV=production 空格 xxxx 5-2-2、package.json=>script命令中设置 彩蛋：在新建package.json文件时，我们可以使用npm init -y 快速创建（yes 表示一路默认创建，还有 -f 表示 force）   from:https://blog.csdn.net/jwl_willon/article/details/81054978

vue 安装遇到权限问题 解决

解决方案： npm config set user 0 npm config set unsafe-perm true   报错： Unable to save binary /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permission denied, mkdir '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' at Object.mkdirSync (fs.js:753:3) at sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:71:13) at Function.sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:77:24) at checkAndDownloadBinary (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:114:11) at Object.<anonymous> (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:157:1) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) errno: -13, syscall: 'mkdir', code: 'EACCES', path: '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' } > node-sass@4.11.0 postinstall /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass > node scripts/build.js ———————————————— 版权声明：本文为CSDN博主「T&amp;K」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/sinat_41780498/article/details/88737365

Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: (newVal, oldVal) => {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

  箭头函数要改为function的形式，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: function(newVal, oldVal) {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

    from:https://blog.csdn.net/liubangbo/article/details/115242420

html直接引用vue和element-ui的方法

代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button round @click="visible = true">圆角按钮</el-button>
        <br>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <br>
        <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"
            active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <br>
        <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
            placeholder="选择时间范围">
        </el-time-picker>
        <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" placeholder="选择时间范围">
        </el-time-picker>
        <br>
        <el-progress type="circle" :percentage="0"></el-progress>
        <el-progress type="circle" :percentage="25"></el-progress>
        <el-progress type="circle" :percentage="100" status="success"></el-progress>
        <el-progress type="circle" :percentage="70" status="warning"></el-progress>
        <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        <br>
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
        <br>
        <el-steps :active="1" finish-status="success">
            <el-step title="已付款"></el-step>
            <el-step title="退款中"></el-step>
            <el-step title="已退款"></el-step>
            <el-step title="待结算"></el-step>
            <el-step title="已结算"></el-step>
        </el-steps>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>
</html>

效果如图： 总结 到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！   from:https://www.jb51.net/web/743299.html

说说 vue 父子组件加载顺序

面试提问：说说 vue 父子组件加载顺序 这我知道答案 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted 父 mounted 子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子。 父 beforeUpdate 子 beforeUpdate 子 updated 父 updated 父组件更新顺序是 父 beforeUpdate 子 deactivated 父 updated 销毁过程是 父 beforeDestroy 子 beforeDestroy 子 destroyed 父 destroyed 再问，如果有多个子组件呢？我不太能确定。 加载多个子元素 回头写了一个简单的vue视图，父调用子，以下代码复制可用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <title>Form Demo</title>
</head>
<body>
    <div id="app">
        <input-group :forms="forms" v-for="(forms, index) in options" :key="index"></input-group>
    </div>
 
    <!-- Vue.js v2.6.11 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('input-group', {
            props: ['forms'],
            beforeCreate() {
              console.log('child beforeCreate');
            },
            created() {
              console.log('child created');
            },
            beforeMount() {
              console.log('child beforeMount');
            },
            mounted() {
              console.log('child mounted');
            },
            template: `<div>
                <template v-for="item in forms">
                    <input type="text" v-model="item.data">
                </template>
            </div>`
        })
 
        let options = []
        for (let i = 0; i < 2; i++) {
            for (let j = 0; j < 2; j++) {
                options[i] = options[i] || [];
                options[i].push({
                    data: '',
                })
            }
            
        }
        var app = new Vue({
            el: '#app',
            beforeCreate() {
              console.log('parent beforeCreate');
            },
            created() {
              console.log('parent created');
            },
            beforeMount() {
              console.log('parent beforeMount');
            },
            mounted() {
              console.log('parent mounted');
            },
            data: {
                options: options,
            },
        })
        window.app = app;
        console.log(app);
    </script>
</body>
</html>

  控制台打印结果如下

1
2
3
4
5
6
7
8
9
10
11
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child beforeCreate
child created
child beforeMount
(2) child mounted
parent mounted

  能得出结论，第一个子元素在 beforeMount 后不会直接 mounted，而是进入下一个子元素的 beforCreate。   from:https://www.cnblogs.com/everlose/p/12538472.html

npm ERR! Unexpected end of JSON input while parsing near

You are trying to create a new angular, react, vue app, and you end up with an error message saying: npm ERR! Unexpected end of JSON input while parsing near There’s a high chance that your npm cache been damaged. Try:

1
npm cache clean --force

  If you are a windows user, try deleting all files in this folder:

1
C:\Users{{your-username}}\AppData\Roaming\npm-cache

  Then…

1
npm cache verify

  If that doesn’t work, try updating to the lastest (understand the risks)

1
npm i npm@latest -g

  I hope this helps!   from:https://dev.to/rishiabee/npm-err-unexpected-end-of-json-input-while-parsing-near-743

Vue 魔法师 —— 将 API “类化”

前言 【类】和【接口】是 JavaScript 未来的方向，我们的 API 调用也将如此，朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师，如何将 API “类化”？ 万物皆模块，万物可归类。闲言少叙，直接正题。 分类 API 环境： Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建

1
vue create vue-api-module

得到如下目录

1
2
3
4
5
--src
----store
------index.js
----App.vue
----main.js

  然后新建文件 api.js 如下，

1
2
3
4
5
6
7
--src
----services
------api.js
----store
------index.js
----App.vue
----main.js

  基础类 API 我们先创建一个基础类如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class BaseApiService {
  baseUrl = "https://jsonplaceholder.typicode.com";
  resource;
 
  constructor(resource) {
    if (!resource) throw new Error("Resource is not provided");
    this.resource = resource;
  }
 
  getUrl(id = "") {
    return `${this.baseUrl}/${this.resource}/${id}`;
  }
 
  handleErrors(err) {
    // 处理错误：
    console.log({ message: "Errors is handled here", err });
  }
}

  baseUrl：设置请求根路径； resource：来源； getUrl：获取链接函数，包含 baseUrl、resource、id； handleErrors：处理错误函数； 只读类 API 然后，我们再创建一个子类：包含 fetch、get 只读方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class ReadOnlyApiService extends BaseApiService {
  constructor(resource) {
    super(resource);
  }
  async fetch(config = {}) {
    try {
      const response = await fetch(this.getUrl(), config);
      return await response.json();
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async get(id) {
    try {
      if (!id) throw Error("Id 不合法");
      const response = await fetch(this.getUrl(id));
      return await response.json();
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  fetch：获取数据； get：通过 id 获取数据； 写入类 API 接着，我们再创建一个包含可读写方法的子类：post、put、delete

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class ModelApiService extends ReadOnlyApiService {
  constructor(resource) {
    super(resource);
  }
  async post(data = {}) {
    try {
      const response = await fetch(this.getUrl(), {
        method: "POST",
        body: JSON.stringify(data)
      });
      const { id } = response.json();
      return id;
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async put(id, data = {}) {
    if (!id) throw Error("Id 不合法");
    try {
      const response = await fetch(this.getUrl(id), {
        method: "PUT",
        body: JSON.stringify(data)
      });
      const { id: responseId } = response.json();
      return responseId;
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async delete(id) {
    if (!id) throw Error("Id 不合法");
    try {
      await fetch(this.getUrl(id), {
        method: "DELETE"
      });
      return true;
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  post：创建数据； put：更新数据； delete：删除数据； 继承 让我们看看两个简单的继承示例：

1
2
3
4
5
class UsersApiService extends ReadOnlyApiService {
  constructor() {
    super("users");
  }
}

 

1
2
3
4
5
class PostsApiService extends ModelApiService {
  constructor() {
    super("posts");
  }
}

  【UsersApiService 类】继承了只读类 API —— ReadOnlyApiService，可以使用 fetch、get 两种方法。而 【PostsApiService 类】继承了读写类 API —— ModelApiService，可以使用 fetch、get、post、put、delete 五种方法。 我们也可以根据业务来写继承 API 类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class AlbumsApiService extends ModelApiService {
  constructor() {
    super("albums");
  }
  async uploadImage() {
    /*
    这里可以写你的上传图片逻辑
     */
    console.log({ message: "图片上传成功！" });
    return true;
  }
 
  async triggerError() {
    try {
      throw Error(" API 模块调用错误！");
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  导出 我们在 api.js 导出这些 API：

1
2
3
4
5
export const $api = {
  users: new UsersApiService(),
  posts: new PostsApiService(),
  albums: new AlbumsApiService()
};

  分类 API 实践 在 Vue 项目中如何调用以上的 API 类？我们主要在 Vuex 和 components 中调用它： storePlugins 先创建一个 storePlugins.js：

1
2
3
4
5
6
7
8
9
--src
----plugins
------storePlugins.js
----services
------api.js
----store
------index.js
----App.vue
----main.js

  在 storePlugins.js 中引入 api.js：

1
2
3
4
5
6
7
8
9
import { $api } from "@/services/api";
 
export default function(store) {
  try {
    store.$api = $api;
  } catch (e) {
    console.error(e);
  }
}

  在 src/store/index.js 中引入该插件：

1
2
3
4
5
6
7
8
...
import storePlugins from "@/plugins/storePlugins";
...
export default new Vuex.Store({
  plugins: [storePlugins],
  state: {
  ...
});

  mixins 创建 mixins.js 在如下位置：

1
2
3
4
5
6
7
8
9
10
--src
----plugins
------mixins.js
------storePlugins.js
----services
------api.js
----store
------index.js
----App.vue
----main.js

  mixin.js：

1
2
3
4
5
6
7
8
import Vue from "vue";
import { $api } from "@/services/api";
 
Vue.mixin({
  computed: {
    $api: () => $api
  }
});

  main.js 全局引入 mixins：

1
2
3
...
import "@/plugins/mixins";
...

  调用 OK！现在你就可以在 store 和 components 中调用了，例如：

1
2
3
4
5
6
7
8
9
this.$api.{resource}.{method}
------
this.$api.users.fetch({})
this.$api.users.get(1)
this.$api.posts.post(post)
this.$api.posts.put(post)
this.$api.posts.delete(1)
this.$api.albums.uploadImage()
this.$api.albums.triggerError()

  示例 可本地调试~ components 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div id="app">
    <h1>Vue API “类化” 示例</h1>
    <p>请打开控制台</p>
    <p>检查 Vuex store</p>
  </div>
</template>
 
<script>
export default {
  name: "App",
  async created() {
    // 获取用户资料
    await this.$store.dispatch("fetchUsers");
    const users = await this.$api.users.fetch({});
    console.log({ message: "Users from the component", users });
    // 根据 id 获取用户资料
    const user = await this.$api.users.get(1);
    console.log({ message: "User with id: 1", user });
    // 创建新文章
    let post = {
      userId: 1,
      title: "测试文章",
      body:
        "这是一篇测试文章"
    };
    await this.$store.dispatch("createPost", post);
    // 更新文章
    post = { ...post, id: 1 };
    await this.$store.dispatch("updatePost", post);
    // 删除文章
    await this.$api.posts.delete(post.id);
    console.log({ message: "成功删除文章！" });
    // 执行自定义方法
    await this.$api.albums.uploadImage();
    // 执行自定义方法
    await this.$api.albums.triggerError();
  }
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  store 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vue from "vue";
import Vuex from "vuex";
import storePlugins from "@/plugins/storePlugins";
 
Vue.use(Vuex);
 
const ADD_USERS = "ADD_USERS";
const ADD_POST = "ADD_POST";
const UPDATE_POST = "UPDATE_POST";
 
export default new Vuex.Store({
  plugins: [storePlugins],
  state: {
    users: [],
    posts: []
  },
  mutations: {
    [ADD_USERS](state, users) {
      state.users = users;
    },
    [ADD_POST](state, post) {
      state.posts = [...state.posts, post];
    },
    [UPDATE_POST](state, post) {
      const index = state.posts.findIndex(({ id }) => id === post.id);
      if (!~index) state.posts.splice(index, 1, post);
    }
  },
  actions: {
    async fetchUsers({ commit }, config) {
      const users = await this.$api.users.fetch(config);
      commit(ADD_USERS, users);
      console.log({ message: "Vuex 中的用户数据", users });
    },
 
    async createPost({ commit }, post) {
      const id = await this.$api.posts.post(post);
      commit(ADD_POST, { ...post, id });
      console.log({ message: "创建文章", post: { ...post, id } });
    },
 
    async updatePost({ commit }, post) {
      const id = await this.$api.posts.put(post.id, post);
      commit(UPDATE_POST, post);
      console.log({ message: "更新文章", post: { post, id } });
    }
  }
});

  结语 为什么要这么写？ 本瓜以为：如果你的业务是按照这种类的方式有作区分，那么 API 也应该同步如此。一是思路清晰，跟着业务走；二是扩展性和复用性都更好；三是看起来就很高级……😀😀😀 普通

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取文章
export const getPost = params => {
  return axios.get(`/interface/getPost/`)
}
 
// 新增文章
export const addPost = params => {
  return axios.post(`/interface/addPost`, params)
}
 
// 修改文章
export const updatePost = params => {
  return axios.post(`/interface/updatePost/`, params)
}
 
......

 

1
import {getPost,addPost,updatePost} from '@/services/api'

  高级

1
2
3
4
5
class PostsApiService extends ModelApiService {
  constructor() {
    super("posts");
  }
}

 

1
this.$api.posts.post(param)

  本次就到这里，我是掘金安东尼，人不狠，话也多！公众号【掘金安东尼】。 点赞小手动一动，你我一起向前冲~ 再会~ 作者：掘金安东尼 链接：https://juejin.cn/post/6920422878500519950 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。