一、使用Vue命令创建项目

vue create pub-search-manage （ pub-search-manage ：项目名）

二、进入项目，并运行项目

cd  pub-search-manage  
npm run serve

三、引入依赖

1、引入需要用的依赖

npm install -g axios //引入axios 
npm install --save element-plus   //引入element-plus库 
npm i vform3-builds  //引入VForm3库 
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save -D
npm install vue-router@4  // 引入router 

2、在main.js中进行引入全局配置

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios' //如果需要axios，请引入

import ElementPlus from 'element-plus'  //引入element-plus库
import VForm3 from 'vform3-builds'  //引入VForm3库
import 'element-plus/dist/index.css'  //引入element-plus样式
import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
//element-plus 的中文化
import locale from 'element-plus/lib/locale/lang/zh-cn' 
//element-plus 的icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入css公共样式
import './css/index.css' 
import router from './router' // 引入router

import {postRequest} from './utils/https'
import {putRequest} from './utils/https'
import {getRequest} from './utils/https'
import {deleteRequest} from './utils/https'

const app = createApp(App);
app.prototype.getRequest =getRequest
app.prototype.postRequest =postRequest
app.prototype.putRequest =putRequest
app.prototype.deleteRequest =deleteRequest

// 给 axios 设置请求根路径
axios.defaults.baseURL = '/'

/* 挂载全局对象 */
app.config.globalProperties.$axios = axios;
// 全局注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.provide(axios)
app.use(ElementPlus,{locale})
app.use(router)
app.use(VForm3)  //全局注册VForm3(同时注册了v-form-designe、v-form-render等组件)
app.mount('#app')

3、在src下创建utils文件夹，在utils文件夹中创建https.js，封装get、post、put请求

import axios from 'axios'
import {Message} from 'element-ui';
import router from '../router'
import {mymessage} from '@/utils/mymessage';

axios.interceptors.response.use(success => {
    if (success.status && success.status == 200 && success.data.status == 500) {
        Message.error({message: success.data.msg})
        return;
    }
    if (success.data.msg) {
        Message.success({message: success.data.msg})
    }
    return success.data;
}, error => {
    if (error.response.status == 504 || error.response.status == 404) {
        Message.error({message: '服务器被吃了( ╯□╰ )'})
    } else if (error.response.status == 403) {
        Message.error({message: '权限不足，请联系管理员'})
    } else if (error.response.status == 401) {
        mymessage.error({message: error.response.data.msg ? error.response.data.msg : '尚未登录，请登录'})
        router.replace('/');
    } else {
        if (error.response.data.msg) {
            Message.error({message: error.response.data.msg})
        } else {
            Message.error({message: '未知错误!'})
        }
    }
    return;
})

let base = '';

export const postKeyValueRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let i in data) {
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
            }
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params
    })
}
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        params: params
    })
}

4、在src目录下创建router文件夹，创建index.js

// 配置多个页面对应的路径
import {createRouter,createWebHistory} from "vue-router"
import HelloWorld from "../components/HelloWorld"

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'search',
            component: HelloWorld,
            hidden: 'true'
        }
    ]
})

export default router;

5、配置全局样式，在src下创建css文件夹，

// 创建index.css样式配置
.titleDiv {
    width:800px;
    text-shadow: 2px 2px 5px #777;
    line-height: 22px;
    font-size: 22px;
    color: rgb(90, 90, 90);
    margin-top: 20px;
}

.mainDiv {
    width:800px;
    margin: auto;
}

.panel {
    border-color:#eeeeee;
    border-radius:10px;
    border-style:solid;
    border-width:1px;
    width:800px;
    background:rgb(250,250,250);
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 10px;
}