了解 Vue3
Vue3是Vue.js最新的主要版本，它已經(jīng)于2020年9月18日發(fā)布。它提供了許多新功能和性能改進，這些改進使得Vue更易于使用和更具可擴展性。
以下是Vue3的一些主要特性：
-
更快的渲染：Vue3使用重寫的響應式系統(tǒng)，它使用Proxy對象來解決Vue2中的性能瓶頸問題。這使得Vue3的渲染速度比Vue2快許多倍。
-
更小的包：Vue3采用了Tree shaking的技術，只打包用到的模塊，從而減少了Vue的文件大小。
-
更好的TypeScript支持：Vue3完全支持TypeScript，并提供了更好的類型推斷和更智能的代碼補全。
-
新的組合式API：Vue3提供了一組新的API，稱為“組合式API”，它允許開發(fā)人員更好地組織和復用組件邏輯。這些API與Vue2中的Options API不同，使得代碼更整潔且更易于維護。
-
更好的可擴展性：Vue3使用了模塊化架構，使得開發(fā)人員可以更方便地擴展Vue。這使得Vue更易于集成到現(xiàn)有的應用程序中，并使得Vue更好地支持團隊協(xié)作。
總之，Vue3是一個更快、更小、更易于擴展和更易于使用的Vue版本。如果您正在使用Vue，那么Vue3絕對值得一試。
初始化項目
創(chuàng)建項目
本地目錄下，打開 cmd，在終端上運行命令創(chuàng)建一個 Vue3 項目，并選擇 Router、Pinia、ESLint 配置：
npm init vue@latest
使用 VSCode IDE 打開項目，如果不會安裝，可以查看文章 Visual Studio Code 下載安裝教程（含必備插件）進行安裝：
啟動項目
在終端運行命令啟動項目：
npm install
npm run dev
訪問鏈接：http://127.0.0.1:5173/
添加目錄
在 src 目錄下添加文件夾用于區(qū)分指定文件：
Git 管理項目
-
創(chuàng)建遠程倉庫 vue-rabbit：
-
在本地終端執(zhí)行以下命令：
git init # git 初始化 git remote add origin git@github.com:ShiJieCloud/vue-rabbit.git # 添加遠程倉庫地址 git branch -M main # 切換分支 git add . # 添加文件 git commit -m "init" # 提交 git push origin main # 推送遠程倉庫
jsconfig.json 配置別名路徑
在編寫代碼的過程中，一旦輸入 @/，VSCode 會立刻聯(lián)想出 src 下的所有子目錄和文件，統(tǒng)一文件路徑訪問不容易出錯：
配置別名路徑可以在寫代碼時聯(lián)想提示路徑：
{
"compilerOptions" : {
"baseUrl" : "./",
"paths" : {
"@/*":["src/*"]
}
}
}
ElementPlus 引入
Element-plus 官網(wǎng)：https://element-plus.org/
安裝
在終端執(zhí)行命令，選擇 npm 的方式進行安裝：
npm install element-plus --save
配置按需導入
首先我們需要安裝 unplugin-vue-components 和 unplugin-auto-import 這兩款插件才能實現(xiàn)按需導入。
-
安裝自動導入插件
npm install -D unplugin-vue-components unplugin-auto-import
-
把下列代碼插入到
vite.config.ts配置文件中，即可實現(xiàn)自動按需導入。
// vite.config.ts
import { defineConfig } from 'vite'
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: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
測試組件
修改 Vue.app 中的代碼：
<script setup>
</script>
<template>
<el-button type="primary">Primary</el-button>
</template>
啟動項目，訪問：http://127.0.0.1:5173/
定制 elementPlus 主題
小兔鮮主題色和 elementPlus 默認的主題色存在沖突，通過定制主題讓 elementPlus 的主題色和小兔鮮項目保持一致。采用 Scss 變量替換方案定制主題。
安裝sass
基于vite的項目默認不支持css預處理器，需要開發(fā)者單獨安裝
npm install sass -D
準備定制化的樣式文件
新建文件 styles/element/index.scss：
/* 只需要重寫你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
// 主色
'base': #27ba9b,
),
'success': (
// 成功色
'base': #1dc779,
),
'warning': (
// 警告色
'base': #ffb302,
),
'danger': (
// 危險色
'base': #e26237,
),
'error': (
// 錯誤色
'base': #cf4444,
),
)
)
自動導入配置
這里自動導入需要深入到 elementPlus 的組件中，按照官方的配置文檔來：
- 自動導入定制化樣式文件進行樣式覆蓋
- 按需定制主題配置 （需要安裝 unplugin-element-plus）
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
// 1.配置 elementPlus 采用 sass 樣式配色系統(tǒng)
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
// 2.自動導入定制化樣式文件進行樣式覆蓋
additionalData: `
@use "@/styles/element/index.scss" as *;
`,
}
}
}
})
Axios 安裝并簡單封裝
安裝 Axios
在終端執(zhí)行命令安裝 Axios：
npm install axios
基礎配置
官方文檔地址：https://axios-http.com/zh/docs/intro
基礎配置通常包括：
- 實例化：baseURL + timeout
- 攔截器：攜帶 token、401 攔截等
在 utils 包下創(chuàng)建一個 http.js 文件，添加以下內(nèi)容：
import axios from 'axios'
// 創(chuàng)建axios實例
const http = axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
timeout: 5000
})
// axios請求攔截器
http.interceptors.request.use(config => {
return config
}, e => Promise.reject(e))
// axios響應式攔截器
http.interceptors.response.use(res => res.data, e => {
return Promise.reject(e)
})
export default http
封裝請求函數(shù)并測試
在 apis 目錄下創(chuàng)建 testAPI.js 文件：
import http from '@/utils/http'
export function getCategoryAPI () {
return http({
url: 'home/category/head'
})
}
在 main.js 中調(diào)用方法測試：
//測試接口函數(shù)
import { getCategoryAPI } from './apis/testAPI'
getCategoryAPI().then(res=>{
console.log(res);
})
啟動項目，打開控制臺：
路由整體設計
路由設計原則：找頁面的切換方式，如果是整體切換，則為一級路由，如果是在一級路由的內(nèi)部進行的內(nèi)容切換，則為二級路由。
一級路由
首頁
-
在 src/views/ 目錄下創(chuàng)建 Layout 目錄，再在該目錄下新建 index.vue 文件：
-
在 index.vue 文件中添加內(nèi)容：
<template> <div>我是首頁</div> </template> -
在 src/router/index.js 文件中添加：
import Layout from '@/views/Layout/index.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // path 和 component 對應關系的位置 routes: [ { path: '/', component: Layout } ] }) export default router -
在 app.vue 中添加一級路由出口組件：
<template> <!--一級路由出口組件--> <RouterView/> </template> -
啟動項目，訪問頁面：http://127.0.0.1:5173/
登錄頁
-
在 src/views/ 目錄下創(chuàng)建 Login 目錄，再在該目錄下新建 index.vue 文件：
-
在 index.vue 文件中添加內(nèi)容：
<template> <div>我是登錄頁</div> </template> -
在 src/router/index.js 文件中添加：
import Login from '@/views/Login/index.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // path 和 component 對應關系的位置 routes: [ { path: '/login', component: Login } ] }) export default router -
在 App.vue 中添加一級路由出口組件：
<template> <!--一級路由出口組件--> <RouterView/> </template> -
啟動項目，訪問頁面：http://127.0.0.1:5173/login
二級路由
Home 頁
-
在 src/views/ 目錄下創(chuàng)建 Home 目錄，再在該目錄下新建 index.vue 文件：
-
在 index.vue 文件中添加內(nèi)容：
<template> 我是 Home 頁 </template> -
在 src/router/index.js 文件中添加：
import Layout from '@/views/Layout/index.vue' import Home from '@/views/Home/index.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 因為 Home 頁是首頁下的二級路由，所以配置在首頁路徑下 routes: [ { path: '/', component: Layout, children: [ { // Home 頁默認在首頁顯示，所以 path 為空 path: '', component: Home, } ] } ] }) export default router -
在 Layout/index.vue 中添加二級路由出口組件：
<template> <div>我是首頁 <!--二級路由出口組件--> <RouterView/> </div> </template> -
啟動項目，訪問頁面：http://127.0.0.1:5173/
分類頁
-
在 src/views/ 目錄下創(chuàng)建 Home 目錄，再在該目錄下新建 index.vue 文件：
-
在 index.vue 文件中添加內(nèi)容：
<template> 我是分類頁 </template> -
在 src/router/index.js 文件中添加：
import Layout from '@/views/Layout/index.vue' import Home from '@/views/Home/index.vue' import Category from '@/views/Category/index.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 因為 Home 頁是首頁下的二級路由，所以配置在首頁路徑下 routes: [ { path: '/', component: Layout, children: [ { // Home 頁默認在首頁顯示，所以二級路由的 path 置空 path: '', component: Home, }, { path: 'category', component: Category, } ] } ] }) export default router -
在 Layout/index.vue 中添加二級路由出口組件：
<template> <div>我是首頁 <!--二級路由出口組件--> <RouterView/> </div> </template> -
啟動項目，訪問頁面：http://127.0.0.1:5173/category
靜態(tài)資源引入
-
圖片資源：把 images 文件夾放到 assets 目錄下；
-
樣式資源：把 common.scss 文件放到 styles 目錄下；
在 main.js 中導入初始化樣式文件：
// 引入common.scss import '@/styles/common.scss'
scss變量自動導入
在項目里一些組件共享的色值會以 scss 變量的方式統(tǒng)一放到一個名為 var.scss 的文件中，正常組件中使用，需要先導入 scss 文件，再使用內(nèi)部的變量，比較繁瑣，自動導入可以免去手動導入的步驟，直接使用內(nèi)部的變量。自動導入配置步驟如下：
-
新增一個 var.scss 文件，存入色值變量：文章來源：http://www.zghlxwxcb.cn/news/detail-500798.html
$xtxColor: #27ba9b; $helpColor: #e26237; $sucColor: #1dc779; $warnColor: #ffb302; $priceColor: #cf4444; -
通過 vite.config.js 配置自動導入文件：文章來源地址http://www.zghlxwxcb.cn/news/detail-500798.html
css: { preprocessorOptions: { scss: { // 自動導入scss文件 additionalData: ` @use "@/styles/element/index.scss" as *; @use "@/styles/var.scss" as *; `, } } }
到了這里，關于黑馬程序員前端 Vue3 小兔鮮電商項目——（二）初始化項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
