vue 开发常用工具及配置二
目录
- 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 如何快速进行业务迭代？
梳理 50 年人机交互界面发展史，得出这个规律，开发框架的选择不再迷茫
腾讯云开发者
