0927 测试平台前端构建实战

知识点

vue.js

https://cn.vuejs.org/v2/guide/

vue-cli

#安装
npm install -g @vue/cli
#如果速度慢可以使用cnpm
#cnpm install -g @vue/cli
#如果提示python报错,可以指定python2
#npm --python=/usr/local/bin/python2 install -g @vue/cli
#创建项目
vue create hello-world
cd hello-world
vue ui
#安装插件
vue add eslint
#添加vuetify ui组件
vue add vuetify
#启动服务
npm install -g @vue/cli-service-global
vue serve
#构建打包
vue build 

VS Code IDE

vue router

axios

npm install axios
import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://127.0.0.1:5000/',
    timeout: 10000,
    headers: { 'X-Custom-Header': 'foobar' }
});

instance.interceptors.request.use(function (config) {
    // Do something before request is sent
    let token = localStorage.getItem("token")
    if (token) {
        config.headers.common["Authorization"] = "Bearer " + localStorage.getItem("token")
    }
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

export default instance


演练代码

https://github.com/ceshiren/frontend_service_python_14
https://github.com/ceshiren/backend_service_python_14

相关链接

https://vuetifyjs.com/en/getting-started/quick-start/