Vue Cli项目重构为Vite的方法步骤

Vue Cli项目重构为Vite的方法步骤：

1. 安装Vite

首先，需要通过npm或yarn来全局安装Vite。可以使用以下命令来安装：

npm install -g vite

或

yarn global add vite

1. 创建新的Vite项目

使用Vite创建新项目时，可以选择手动创建或使用预设模板。推荐使用预设模板来快速创建新项目。可用的预设模板包括React、Vue和Preact。

使用以下命令来在当前目录下创建一个基于Vue3的Vite项目：

vite create my-vite-project --template vue

1. 迁移Vue Cli项目的代码和依赖

将Vue Cli项目文件夹中的src、public和package.json文件复制到新创建的Vite项目中。注意将package.json文件中的依赖转移到新项目中。若依赖项在新的Vite项目中有描述，则可以将它们从package.json文件中删除。否则，需要手动添加这些依赖项。

1. 修改Vite配置文件vite.config.js

Vite使用vite.config.js文件来配置Vite的构建和运行时行为。默认情况下，Vite使用Vue Cli-plugin-vue来处理Vue项目。因此，需要在Vite的配置文件中手动添加一些配置来兼容旧Vue Cli项目。以下是一些推荐的配置和插件：

• vueTemplates：将.vue文件中的<template>模板编译为render函数
• vueJsx：支持Vue3的JSX语法
• alias：配置别名，Vite自身未能处理的Vue Cli别名处理
• terser：使用Terser来压缩代码，压缩速度较快

以下是一个例子：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  build: {
    terser: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  server:{
      port:8090
  },
  optimizeDeps: {
    include: ['@ant-design/icons-vue', 'ant-design-vue/lib/locale-provider/zh_CN', 'ant-design-vue', '@antv/g2', 'xlsx', 'moment', 'js-cookie']
  }
})

1. 修改Vue Cli项目代码

在新项目的src/main.js文件中用Vite的方式引入Vue组件和样式库的代码需要稍作修改。例如，在Vue Cli项目中可以使用以下代码引入element-ui：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

而在Vite项目中，可以使用以下代码引入：

import 'element-plus/lib/theme-chalk/index.css'
import { ElButton } from 'element-plus'
createApp(App).use(ElButton).mount('#app')

1. 运行新Vite项目

运行Vite项目的命令为：

vite

然后在浏览器中打开http://localhost:3000，即可查看运行效果。

示例1：使用Vite重构Vue Cli项目

在Vue Cli项目中，创建如下Vue组件（位于src/components/HelloWorld.vue文件中）：

<template>
  <div class="hello-world">
    <p>{{ message }}</p>
    <button @click="onClick">Click</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  },
  methods: {
    onClick () {
      console.log('Clicked!')
    }
  }
}
</script>

<style scoped>
.hello-world {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在Vue Cli项目的src/App.vue文件中，使用<HelloWorld>组件：

<template>
  <div id="app">
    <HelloWorld :message="message" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

需要修改Vite项目的src/App.vue文件，以按照Vite的方式引入组件：

<template>
  <div id="app">
    <ElButton>{{ message }}</ElButton>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElButton } from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default defineComponent({
  components: {
    ElButton
  },
  setup () {
    const message = ref('Hello World!')
    return {
      message
    }
  }
})
</script>

示例2：使用Vite重构含TypeScript的Vue Cli项目

在Vue Cli项目中，创建如下带有TypeScript支持的Vue组件（位于src/components/HelloWorld.ts文件中）：

<template>
  <div class="hello-world">
    <p>{{ message }}</p>
    <button @click="onClick">Click</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  methods: {
    onClick (): void {
      console.log('Clicked!')
    }
  }
})
</script>

<style scoped>
.hello-world {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在Vue Cli项目中，创建如下带有TypeScript支持的main.ts文件：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

需要修改Vite项目的src/main.ts文件，以按照Vite的方式引入组件：

import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from '@/components/HelloWorld.vue'

createApp(App).use(HelloWorld).mount('#app')

要注意的问题：

1. 别名问题：Vite默认情况下只有3个别名：@、~和vue。如果在Vue Cli中使用了其他别名，则需要在Vite的配置文件vite.config.js中添加别名的配置。

2. 插件问题：由于Vue Cli和Vite的构建和运行环境不同，一些Vue Cli插件可能无法在Vite中正常工作，需要针对Vite重新寻找对应的插件。

3. 其他问题：在迁移Vue Cli项目的过程中，还需要根据项目的具体情况进行一些其他的调整，例如处理Vue Cli项目中的路由、状态管理以及代码的编写风格等等。