vite创建vue项目

一、为什么使用vite

vite是项目的构建工具，使用vue create deom创建项目是基于webpack的

对比webpack和vite，webpack只修改某个页面，所有的页面都重新进行加载，每次修改后加载速度慢，而vite只加载修改的页面，可以大大提升开发效率

二、基于vite搭建vue3项目

创建项目

yarn create vite <项目名称>
cd <项目名称>
yarn 安装依赖
yarn dev 启动项目

安装router

yarn add vue-router@4 -S

配置router

// 1、新建router目录

//2、在router目录中新建index文件夹
import { createRouter, createWebHistory } from 'vue-router'
import HelloWord from '../components/HelloWorld.vue'
const routes = [
  {
    path: '/',
    name: 'Hello',
    component: HelloWord
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

// main.js中挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 挂载路由
import router from './router'
createApp(App).use(router).mount('#app')

vue3的升级做了向下兼容，支持大部分vue2的写法，但是vue2使用的是选项式API，虽然代码分为data，methods等，但是代码过长时将变得难以阅读，所以使用了vue3的组合式API

三、vite.config.js

vite中默认不支持@路径写法，需要自行配置

import { defineConfig } from 'vite'
import vue form '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname,'./src')
    }
  }
})

四、vite中设置代理

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

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports:['vue','vue-router']//自动导入vue和vue-router相关函数
    })
  ],
  server:{
    proxy:{
      '/api':'http://test.cn'
    }
  }
})