1：首先 檢視node 版本

node -v

npm install stable

　3:初始化 vitejs　然後就會叫你選擇 語言直接選 vue-ts 然後cd 進入專案 初始化即可

 npm init  @vitejs/app   專案名稱：vite-vue3-ts

cd vite-vue3-ts

npm install

npm run dev

開啟成功這個頁面就說明成功了

　4：開啟專案 開啟 vite-config.ts 檔案，修改指向目錄

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 
 
'path'
console.log(resolve,'resolve')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 設定 `@` 指向 `src` 目錄
    }
  },
  base: './', // 設定打包路徑
  server: {
    port: 4000, // 設定服務啟動埠號
    open: true, // 設定服務啟動時是否自動開啟瀏覽器
    cors: true
 
, // 允許跨域
    // 設定代理，根據我們專案實際情況配置
    proxy: {
      '/api': {  
        target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api/', '/')
      }
    }
  }
})

5：專案的結構

src
 |- assets   //靜態檔案目錄
 |- common   //通用元件類庫
 |- components   //
 
公共元件類庫
 |- plugins          // element -plus  UI 資料夾（我習慣這樣寫）
 |- router         //路由配置
 |- store         //狀態管理
 |- utils         //工具函式目錄
 |- views       //頁面元件
 |- App.vue
 |-main.ts  

6： 安裝vue3支援的路由

npm i vue-router@4

1：建立src/router/index.ts檔案

 └── src/
     ├── router/
         ├── index.ts  // 路由配置檔案

2開啟 index.ts

import {
    createRouter,
    createWebHashHistory,
    RouteRecordRaw
  } from 'vue-router'
  const routes:Array<RouteRecordRaw>=[
      {
          path:'/',
          name: 'Login',
          component: ()=>import('@/views/userLogin/login.vue')  //懶載入引進來
      }
  ]
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  export default router

4：安裝 axios

 npm i axios

1:在 utils/https.ts 新增檔案

 
 

import Axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = 'https://api.github.com'
const axios = Axios.create({
  baseURL,
  timeout: 20000 // 請求超時 20s
})
// 前置攔截器（發起請求之前的攔截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根據你的專案實際情況來對 config 做處理
     * 這裡對 config 不做任何處理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 後置攔截器（獲取到響應時的攔截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根據你的專案實際情況來對 response 和 error 做處理
     * 這裡對 response 和 error 不做任何處理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      ElMessage.error(`Code: ${code}, Message: ${msg}`)
      console.error(`[Axios Error]`, error.response)
    } else {
      ElMessage.error(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios

 

5：　安裝vue3支援的狀態管理 （vuex）

npm i vuex@next

1：建立src/store/index.ts檔案

store/
   |-index.ts  //檔案入口配置檔案
   |-getters.ts
   |-modules/    //狀態管理的一些 常用的放法函式
　　　　　|-user.ts    //登入的時候所做的操作 儲存使用者名稱 token等　
   |-mutation-types.ts

　2：下面就是index.ts 檔案內容

import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
 export default  new Vuex.Store({
    modules: {
        user,
      },
      state: {
            fileUrl: null
      },
      mutations: {
    
      },
      actions: {
    
      },
      getters:getters
 })

6：安裝支援 Vue3 的 UI 框架 Element Plus

npm i element-plus

　1:然後在 src/plugins/element.ts

  src/
   |-plugins/
          |-element.ts

　引進來UI

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app: any) => {
  app.use(ElementPlus)
}

　7：上面的都做好之後，就在main.ts 引進來掛起

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import installElementPlus  from './plugins/element'
const app = createApp(App);
installElementPlus(app)
import  Https  from './utils/https'
app.use(
    router,
    store,
    installElementPlus,
    Https
    ).
mount('#app')

　然後用一下這個UI

<el-button type="primary">el-button</el-button>

　9：到這裡就可以開發專案了。vue3的基本框架就搭好了