罗锐原数据分享

一、项目创建

1.更换库，下载不卡可以不更换

2.项目创建

3.进入项目文件夹安装依赖

4.控制台方式打开vs code

5.目录结构

6.启动项目

7.语法糖支持name属性

安装插件：

npm i vite-plugin-vue-setup-extend -D

配置插件:

写法：

8.创建文件夹

types：定义接口来规范数据结构

hooks：统一功能放到hooks里面，文件名以useXxx形式

一般组件，路由规则，路由页面

数据管理

工具类

9.网络请求

请求工具类

import axios from 'axios'
import { ElMessage } from 'element-plus';

import { setActivePinia, createPinia } from 'pinia';
const pinia = createPinia();
setActivePinia(pinia);

//请求信息
const instance=axios.create({
    baseURL:"/vue-api"
});

import {useLoadingStore} from '@/store/loadingStore'

//请求拦截器
instance.interceptors.request.use(
    function(config){

        const uloadingStore=useLoadingStore();
        uloadingStore.loading=true;

        //请求参数统一处理
        config.headers['Content-Type']="application/json";

        return config;
    },
    function(err){
        //弹出提示
        const message=err?err:'System error. Please try again later.';
        ElMessage.error(message);

        //请求错误回调
        Promise.reject(message)
    }
);

//响应拦截器
instance.interceptors.response.use(
    function(result:any){

        const uloadingStore=useLoadingStore();
        uloadingStore.loading=false;

        //判断业务
        if(result.data.success){
            return result.data;
        }

        //操作失败
        const message=result.data.message?result.data.message:'The request failed. Please try again later.';
        //弹出提示
        ElMessage.error(message);


        //异步操作状态转换为失败
        return Promise.reject(message);
    },
    function(err){

        const uloadingStore=useLoadingStore();
        uloadingStore.loading=false;

        if (err.response?.status === 302) {
            window.location.replace(err.response.headers.location)
        }


        if (err && err.message=="Network Error") {
            //弹出提示
            ElMessage.warning("The current status is inaccessible. Please log in first.");
        }else{
            //操作失败
            const message=err?err:'System error. Please try again later.';
            //弹出提示
            ElMessage.warning(message);
        }

        //异步操作状态转换为失败
        return Promise.reject(err);
    }
)

export default instance;

解决跨域问题

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    vueSetupExtend(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server:{
    //配置代理，解决跨域问题
    proxy:{
      //获取路径中包含/vue-api的请求
      '/vue-api':{
        //后台服务器所在的源
        target:'http://127.0.0.1:9801',
        //修改源
        changeOrigin:true,
        //vue-api替换为''
        rewrite:(path)=>path.replace(/^\/vue-api/,''),
      },
    }
  }
})

这部分配置只能在开发环境生效，正式环境配置NGINX

        location /vue-api/ {
            rewrite ^.+vue-api/?(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:9801;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
        }

10.Element Plus使用

官网：https://element-plus.sxtxhy.com/zh-CN/

main.ts

//样式引入
import "@/assets/css/main.css";
import "@/assets/css/common.css";
//引入createApp用于创建应用
import { createApp } from "vue";
//引入App根组件
import App from "@/App.vue";
//自定义工具类
import commonUtil from '@/utils/commonUtil'
//公共请求
import {setParamMap} from '@/api/common';
//pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

//引入路由组件
import router from "@/router";
//Element UI组件
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

//Element UI多语言控制
import zhCN from 'element-plus/es/locale/lang/zh-cn';
import enUS from 'element-plus/es/locale/lang/en';
import zhTW from 'element-plus/es/locale/lang/zh-tw';
import etEE from 'element-plus/es/locale/lang/et';
import ruRU from 'element-plus/es/locale/lang/ru';
const language=commonUtil().fetchParams("language");
let locale:any=enUS;
if(language){
  if(language.toLocaleLowerCase()=="zh_cn"){
    locale=zhCN;
  }
  if(language.toLocaleLowerCase()=="zh_tw"){
    locale=zhTW;
  }
  if(language.toLocaleLowerCase()=="et_ee"){
    locale=etEE;
  }
  if(language.toLocaleLowerCase()=="ru_ru"){
    locale=ruRU;
  }
}

const  setParam=async function() {
  //URL参数设置
  await setParamMap({gid:commonUtil().fetchParams("gid"),language:language,cloud_time_zone:commonUtil().fetchParams("cloud_time_zone")});
}
setParam();



//创建一个应用
const app = createApp(App);
//使用路由器
app.use(router);
//使用Element UI组件
app.use(ElementPlus, {
  locale: locale,
})
//pinia
app.use(pinia);
//挂载整个引用到App容器中
app.mount("#app");

11.部署

执行打包命令：

npm run build

复制dist文件到服务器

修改ngixn配置

worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        root F:/Workspace/Company/IDEA/MC/vspc_auto_provisioning/vspc_auto_provisioning_web/dist;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location /vue-api/ {
            rewrite ^.+vue-api/?(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:9801;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
        }

    }


}