認識腳手架

腳手架就是為了快速生成可復用代碼的工具，幫你配置好開發過程中要用到的工具和環境，更快更方便地做開發寫業務

vite和cli腳手架區別

可參考博主文章：

Vue腳手架（cli和vite詳解）_vite和vuecli-CSDN博客

安裝生成項目

設置相關配置

vue3項目vite.config.js配置端口

在vite.config.js中加入以下代碼

//配置代理端口和代理轉發
  server: {
    host: 'localhost',
    port: 8086, // 端口
    proxy: {
      '/api': { // 請求接口中要替換的標識
        //target: 'http://117.62.22.235:17009', // 代理地址
        changeOrigin: true, // 是否允許跨域
        secure: true,
        rewrite: (path) => path.replace(/^\/api/, '') // api標志替換為''
        
      }
    },
//使用@
resolve: {
  alias: {
    '@':resolve(__dirname, './src')
  }
}

參考：vue3項目vite.config.js配置“代理”、“端口”、“打包名”、“圖片壓縮”_vite代理配置-CSDN博客

vite2.0+vue3.0項目引入Element-Ui

一、全局引用（不推薦但好使）

1、安裝Element-Plus

npm install element-plus  --save

2、配置main.js

//新增
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus)

3、頁面使用

<el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

4、展示

二、按需引入

?1、安裝Element-Plus

npm install element-plus  --save

2、按需導入需要再繼續安裝兩個插件

npm install -D unplugin-vue-components unplugin-auto-import

?

3、在vite.config.js中配置plugin

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4、頁面使用

<el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

5、展示

小白一個，多多指教 ??！