vue3+vite搭建项目

vite优势（与webpack比较）

vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite可按需动态编译缩减时间。当项目越复杂、模块越多的情况下，vite明显优于webpack。vite打包速度更快（底层用go语言）。
vite开箱即用，更加简单，基于浏览器esm，使得hmr更加优秀，达到极速的效果；webpack更加灵活，api以及插件生态更加丰富。

创建项目步骤

前提

• vue版本需要安装3.x以上版本 ，查看版本 vue --version，安装最新版本 npm install -g @vue/cli
• node版本 需要Node.js 8.9或更高版本，查看安装的所有版本 nvm ls，查看当前版本nvm current，切换版本 nvm use xxx
  

安装vite

命令npm i vite -g

建项目

在要建项目的文件位置输入命令 npm create vite@latest，根据提示输入名字以及选择要用的框架直至完成

得到下面的所有文件

安装依赖

用开发工具打开项目后，在终端输入 npm install安装依赖，得到上面的node_modules

配置

vite.config.js

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

export default defineConfig({
    
    
  base: './',  // 开发或生产环境服务的公共基础路径
  outDir: 'dist',
  port: 8080,//端口
  // 反向代理
  proxy: {
    
    
    '/api': {
    
    
      target: '',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  },
  plugins: [vue()],
  resolve: {
    
    
    alias: {
    
      // 配置路径别名
      '@': resolve('src')
    },
  },
  pluginOptions:{
    
    
    'style-resources-loader':{
    
    
      preProcessor:'scss',
      patterns:[]
    }
  }
})

main.js

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"
import store from "./store"

const app = createApp(App)
app.use(router)
    .use(store)
// mount必须放后面
app.mount('#app')