vite构建项目

官网地址
vite官网
构建项目

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

上面代码失败的话，执行下面的

npm init @vitejs/app

安装依赖并启动

cd my-vue-app
npm install
npm run dev

配置ip端口号
vite配置项

// vite.config.js中
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: 'localhost', //ip
    port: 8080, //端口号
    strictPort: false, //true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
  }
})

安装依赖

cnpm i -S vue-router@next element-plus

配置路径别名

// vue.config.js中
// __dirname报错的话  可以执行cnpm i @types/node --save-dev
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path');

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 使用 alias 配置可以将文件打包的识别路径用别名进行替换，避免在文件引入别的组件的时候使用很长的相对路径
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    host: 'localhost', //ip
    port: 8080, //端口号
    strictPort: false, //true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口

  }
})

配置element-plus按需引入

npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

配置scss

cnpm i -D sass sass-loader