创建vite项目全流程

创建vue3项目有两种方式，vite和vue cli,本文主要介绍vite项目的创建流程。

可惜的是vite没有脚手架，router、vuex、axios、element-plus、eslint等全要自己手动一个个引入，还各种报错，分分钟让你吐血，费了九牛二虎之力终于搭建成功。想图省事还是建议vue cli。

---

一、创建vite

1）执行命令：cnpm create vite@latest

按提示一步步操作下去

2）用开发者工具（webStorm或vsCode）打开项目得到如下目录

创建后要install一下 

执行命令：cnpm install

3）执行命令：cnpm run dev

浏览器输入网址看到如下内容证明启动成功

4） 打开vite.config.js，按如下代码配置启动端口和代理

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': { // 请求接口中要替换的标识
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允许跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
}

这样就成功创建了vite项目，可惜连个路由跳转都没有。下面介绍怎样配置“路由”、“vuex”、“axios”、“element-plus”、“eslint”等，不然还是没法用

二、项目配置

1.vue-router 配置

1）执行命令：cnpm install vue