VUE备忘

1.脚手架：

安装Node,换国内的。

$ npm install -g npm --registry=https://registry.npm.taobao.org

输入完后回车:

$ npm config set registry https://registry.npm.taobao.org

运行 cnpm install -g @vue/cli

创建项目：1. vue ui

        2.cd mydir

               vue create mydir

               npm run serve

       也可以IDEA打开，新建运行配置，+选npm ,脚本里输入 serve ，之后在package.json 里改写：

"serve": "vue-cli-service serve --open",

即可运行

改 0.0.0.0 方法：在serve.js中，可以搜索 关键字

const defaults = {
  host: '127.0.0.1',
  port: 8080,
  https: false
}

2.安装element插件：npm install element-plus --save

文件引入：在main.js 中：

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import  'element-plus/dist/index.css'

3.安装axios: 在vue项目中执行：npm i axios -S

4.跨域问题：

在项目中加/util/request.js

import axios from "axios";

const request = axios.create({
    baseURL: '/api',  //  注意!!  这里是全局统一加上了  '/api'  前缀,也就是说所有的接口都会加上'/api'前缀名
    timeout: 5000
})

// request( 请求拦截器 )
// 可以在( 请求发送前 )  对请求做一些处理( 比如加上token，对一些参数统一加密 )   箭头函数：config =>{},error =>{}
request.interceptors.request.use( config => {
        return config;
    }, error => {
        return Promise.reject(error);
    }
);

// response( 响应拦截器 )
// 可以在( 响应后 )  统一处理结果    箭头函数：response =>{},error =>{}
request.interceptors.response.use( response => {
        let res = response.data

        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }

        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res
    }, error => {
        console.log('err' + error)  // for debug
        return Promise.reject(error);
    }
);

export default request;

vue.config.js

module.exports = {
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    //port: 9876,
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:8090',     //代理的目标地址,后台地址端口
        changeOrigin: true,               //是否允许跨越
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

5.一个SpringBoot API项目和一个Vue前端项目需要跨域设置：

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:888")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }

6:Vue使用AntDesignVue:   文档：http://antdv.com

其中Smart融合hutools时做列表代码

<template>
  <a-table :data-source="dataSource" :loading="tableLoading"
           size="small"
           bordered
           :pagination="false">
    <a-table-column title="出发" data-index="depcity"/>
    <a-table-column title="到达" data-index="arrcity"/>
  </a-table>
  <div class="smart-query-table-page">
    <a-pagination
        showSizeChanger
                  v-model:current="queryForm.pageNum"
                  v-model:pageSize="queryForm.pageSize"
                  :total="total"
                  @change="queryList"
                  @showSizeChange="queryList"
                  :show-total="(total) => `共${total}条`"
    />
  </div>
</template>

分页前面的v-model一定要带上，否则页码带不过去。

7.使用echart

npm install --save vue-echarts echarts