vue 开发常用工具及配置二

LIYI

发布于 2020-02-11 15:40:54

1.1K0

发布于 2020-02-11 15:40:54

文章被收录于专栏：艺述论专栏

1，代理后端接口，关于 /api/ping
2，storybook
3，源码

1，代理后端接口，关于 /api/ping

作者在个人工作中喜欢用go语言，因为它简单方便。先安装go语言环境，然后于终端执行如下命令：

go get github.com/kataras/iris/v12@latest

编辑main.go，主要内容如下：

func main() {
  app := iris.New()
  app.Get("/ping", func(ctx iris.Context) {
    ctx.WriteString("pong")
  })
  app.Run(iris.Addr(":8080"), iris.WithoutServerError(iris.ErrServerClosed))
}

然后通过go run main.go启动项目。在浏览器中访问http://0.0.0.0:8080/ping，可以看到接口有返回。

以下是在准备后端接口，以便测试。在上一篇“vue 开发常用工具及配置一”中，作者通过vue.config.js/devServer.proxy配置一个后端接口代理，主要配置如下：

devServer: {
  proxy: {
    "/api": {
      target: 'http://127.0.0.1:8080',
      pathRewrite: {
        "^/api": "/" 
      }
    }
  }
}

有了这个配置，当访问接口/api/ping时，会定向到http://127.0.0.1:8080/ping。接下来做个验证。

通过yarn add axios添加网络类库插件，然后修改src/components/HelloWorld.vue/created周期函数，主要代码如下：

const axios = require('axios');
...
    axios.get('/api/ping')
      .then(function (response) {
        console.log("result",response);
      })
      .catch(function (error) {
        console.error("error",error);
      })
      .finally(function () {
        console.log('finally');
      });

在上面的代码中，接口地址是“/api/ping”。但是这个代码在运行时出现了一个bug：

error: Unexpected console statement

这是由于项目使用了ESLint造成的。在 package.json/eslintConfig/rules 添加一行：

"rules": {
  "no-console": "off"
},

重启项目，问题解决。可以看到接口调用的成功输出：

result {data: "pong", status: 200, statusText: "OK", headers: {…}, config: {…}, …}

这标志着接口调用成功了，即接口地址代理成功了。devServer.proxy配置在本地调试接口时特别有用，因为在多数情况下，开发环境的接口地址与正式环境是不一致的。

2，storybook

一个组件的配置可能很多，为了让学习者直观查看，可以利用storybook写很多story，在左侧的每一项点击打开后，都是组件的一个不同的状态，这个不同的状态，就是一个story。多个story合在一起像一本书，storybook名字由此而来。

效果大概如下所示：

如何使用它？

先安装storybook：

yarn add @storybook/cli

接下来，直接来个快速配置吧：

npx -p @storybook/cli sb init

然后通过yarn storybook运行，效果如下：

storybook插件init操作，修改了package.json，添加了两个task：

"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"

并且添加了.storybook、stories目录。

通过示例代码可以发现，每个story都是一个独立的用例组件：

export const text = () => ({
  components: { MyButton },
  template: '<my-button @click="action">Hello Button</my-button>',
  methods: { action: action('clicked') },
});

export const jsx = () => ({
  components: { MyButton },
  render(h) {
    return <my-button onClick={this.action}>With JSX</my-button>;
  },
  methods: { action: linkTo('clicked') },
});

export const emoji = () => ({
  components: { MyButton },
  template: '<my-button @click="action">? ? ? ?</my-button>',
  methods: { action: action('clicked') },
});

通过storybook，方便开发者进行类库组件的开发与调试工作

3，源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20191229

参考链接

https://www.jianshu.com/p/c2e44de0ddfd

storybook 介绍和使用比较火的响应式UI开发及测试环境

https://airbnb.io/react-dates

airbnb公司实现的一个react的datepicker组件

https://storybook.js.org/docs/guides/guide-vue/

Storybook for Vue

基于 vue+go 如何快速进行业务迭代？

如何选择一个 vue ui 框架？