說明
記錄一次Vue3的專案建置流程。文章基於 vue3.2.6 和 vite2.51 版本,使用了ui庫 Element plus,vue-router4,Layout佈局封裝,axios請求封裝,別名配置等。
開始
1. 使用 vscode 開發工具安裝vue3的外掛程式 Volar ,在vue2中我們使用的是Vetur。
2. 執行初始化及安裝指令:
npm init vite
初始化vite此過程可以輸入專案名稱、選擇vue/react專案及js/ts環境選擇,vue3已經完全支援ts,這篇文章使用的是js。 npm install
安裝依賴。最後執行npm run dev
運行項目。

執行過程時如果出現上圖的報錯訊息,可以手動執行node node_modules/esbuild/install.js
,然後再執行 npm run dev
3. 安裝vue-router
執行npm install vue-router@4
, vue3對應的vue- router和vuex的版本都是4.0。執行指令安裝完成之後,在目錄下建立src/router/index.js 寫入下面的設定:
1 2 3 4 5 6 7 8 9 | import { createRouter, createWebHistory } from 'vue-router'
const routes = [
]
export default createRouter({
history: createWebHistory(),
routes,
})
|
登入後複製
main.js中使用
1 2 3 | import router from './router/index'
createApp(App). use (router).mount('#app')
|
登入後複製
vue-router4寫法和先前的有些區別hash模式createWebHashHistory
history模式createWebHistory
,可檢視官網。
4. 全域樣式及sass安裝(使用@路徑需要設定別名,後文有對應的說明)
執行指令npm i sass -D
,然後在目錄下建立src/styles/index.scss:
在mian.js 中引入
1 | import '@/styles/index.scss'
|
登入後複製
tips: vue3中樣式穿透使用::deep(.className) 或deep(.className)
5. Element plus按需引入和全域引入
執行npm i element3 -S
指令安裝,如果你能用到裡面的大多數元件,就用全域引入方式,如下:
1 2 3 4 | import element3 from "element3" ;
import "element3/lib/theme-chalk/index.css" ;
createApp(App). use (router). use (element3).mount('#app')
|
登入後複製
如果你只用到幾個元件,就可以按需載入最佳化效能,創建src/plugins/element3.js,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { ElButton, ElMenu, ElMenuItem } from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/menu.css'
import 'element3/lib/theme-chalk/menu-item.css'
export default function (app) {
app. use (ElButton)
app. use (ElMenu)
app. use (ElMenuItem)
}
import element3 from '@/plugins/element3.js'
createApp(App). use (router). use (element3).mount('#app')
|
登入後複製
6. Layout佈局,建立檔案src/layout/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template>
<!-- 顶部导航 -->
<Navbar />
<!-- 页面内容部分、路由出口 -->
<AppMain />
<!-- 底部内容 -->
<Footer />
</template>
<script setup>
import Navbar from './Navbar.vue'
import AppMain from './AppMain.vue'
import Footer from './Footer.vue'
</script>
|
登入後複製
根據自己的需求設計佈局,使用Layout佈局時,需要注意Layout.vue作為父路由,路由設計大概像下面這樣:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
import Home from '@/views/home/Home.vue'
import Test from '@/views/test/Test.vue'
const routes = [
{
path: '/',
component: Layout,
children: [{ path: '', component: Home }],
},
{
path: '/test',
component: Layout,
children: [{ path: '', component: Test }],
},
]
export default createRouter({
history: createWebHistory(),
routes,
})
|
登入後複製
7. axios請求封裝
執行指令npm i axios
安裝axios
新src/utils/request.js,在此檔案中進行封裝axios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import axios from 'axios'
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASEURL,
timeout: 30 * 1000,
})
service.interceptors.request. use (
(config) => {
return config
},
(error) => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response. use (
(response) => {
const res = response.data
if (res.code !== 200) {
if (res.code === 50000) {
alert('服务器内部出现异常,请稍后再试')
}
return Promise.reject( new Error(res.msg || 'Error'))
} else {
return Promise.resolve(res)
}
},
(error) => {
console.log('err' + error)
return Promise.reject(error)
}
)
export default service
|
登入後複製
為了方便管理和維護API,你可以在src/ api 目錄下為每個模組或每個頁面單獨建立一個JS檔案。這裡提供範例,建立一個名為src/api/home.js 的文件,並將程式碼寫入其中
1 2 3 4 5 6 7 8 9 10 | import request from '@/utils/request'
export function getList(query) {
return request({
url: '/list',
method: 'get',
params: query,
})
}
|
登入後複製
在home.vue 中使用
1 2 3 4 5 6 7 8 9 10 11 | <script setup>
import { getList } from '@/api/home.js'
const query = { pagenum: 1 }
getList(query)
.then((res) => {
console.log(res)
})
.error((err) => {
console.log(err)
})
</script>
|
登入後複製
8. 環境變數相關
專案根目錄下建立三個檔案.env.production
生產環境.env.development
開發環境.env. staging
測試環境,分別加入下面的程式碼,在不同的編譯環境下,打包時自動執行目前環境下的程式碼
1 2 | # .env.production
VITE_APP_BASEURL=https:
|
登入後複製
1 2 | # .env.development
VITE_APP_BASEURL=https:
|
登入後複製
1 2 | # .env.staging
VITE_APP_BASEURL=https:
|
登入後複製
使用:
1 2 | console.log(import.meta.env.VITE_APP_BASEURL)
|
登入後複製
在package .json
中透過傳遞 --mode
選項標誌來覆寫指令使用的預設模式
1 2 3 4 5 6 | "scripts" : {
"dev" : "vite" ,
"build:stage" : "vite build --mode staging" ,
"build:prod" : "vite build --mode production" ,
"serve" : "vite preview"
},
|
登入後複製
這樣,生產環境打包執行npm run build:prod
,測試/預發布環境打包npm run build:stage
#9. vite中別名配置
根目錄下vite.config.js檔案添加代碼
1 2 3 4 5 6 7 8 9 10 11 12 | import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
},
base: './',
})
|
登入後複製
以上是如何從零開始建構vue3項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!