vue3-后台管理项目-v3项目搭建

黑爱紫秀

已于 2023-02-16 17:26:13 修改

阅读量1k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-02-16 17:25:44 首次发布

本文链接：https://blog.csdn.net/weixin_62228315/article/details/129050144

版权

vue2后台管理之vue3项目迭代（前言）

先搭建v3项目

先搭建v3项目

1.新建项目，确定脚手架版本

创建3.0项目（这里版本号是"@vue/cli": “^4.5.15”）

				1. 1:  vue-cli : 安装并执行  npm init vue@latest

           		选择项目功能时： 除了第一项的项目名字外，其他可以暂时No
   						   cd <your-project-name>
   			               npm install
   						   npm run dev ：运行
   				 		  npm run build: 打包 (生成一个dist文件夹)

   		          1. 2 : vite:  使用vite 体验更快速
   						   npm init vite-app <project-name>
   							cd <your-project-name>
   			               npm install
   						   npm run dev

2.项目整体迁移（以及报错整改方法）

1.1项目整体迁移（看目录）
[(https://img-u4blog.csdnimg.cn1c2a5dd02d54bce2ce3bb9ef67663b745.pngag.cn/d1c2a5dd02d54bce9ef62ce3bb53b945.png)]

1.2重构路由axios,element-plus等项目所需的依赖
1.2.1安装这些cnpm i element-plus axios vue-router@4 echarts@4 -s后在main.js引入

import {
    createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 国际版(翻译)
import locale from 'element-plus/es/locale/lang/zh-cn'
import router from './router'
import service from './api/service'

const app=createApp(App)
app.config.globalProperties.$https=axios;
app.config.globalProperties.service=service

app.use(ElementPlus,{
   locale})
app.use(router)
app.mount('#app')

1.2.2安装成功在pack.josn看
在这里插入图片描述

1.3迁移登录and菜单组件，保证登录功能正常进行
1.3.1当时写登录功能的时候遇到了一点小bug，就是登录跳不到登录页，那是因为vue2和vue3的文件和内容分别是vue.config.js和vite.config.js出了一点小问题，一改就ok啦，login页面时登录页，没有什么太大的变动。

//v2的配置
module.exports = {
    devServer: {
        // 运行时自动打开
        open: true,
        // 大部分时间不需要使用
        // host: 'localhost',
        proxy: {
            '/api': {
                target: 'http://1.116.64.64:5004/api2',
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

//v3的配置
import {
    fileURLToPath, URL } from 'node:url'


import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  resolve: {
   
    alias: {
   
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //服务
  server: {
   
    // 默认打开的端口和本地
    // host: '0.0.0.0',
    port: 3000,
    // https: false, // 不支持https
    proxy: {
   
      '/api': {
   
        target: 'http://1.116.64.64:5004/api2/',	// 实际请求地址
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配
      },
    }
  }
})