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