為什么是必要的，就是這100個(gè)知識(shí)點(diǎn)學(xué)完后，能獨(dú)立完成一個(gè)小項(xiàng)目。最終能得到一個(gè)解決方案。也算是前端知識(shí)的積累。如果后面有需要的地方可以回來(lái)查。100個(gè)其實(shí)比較多，我會(huì)按新手老鳥(niǎo)，大神來(lái)分成3個(gè)等級(jí)，話不多說(shuō)，讓我們開(kāi)始吧。
?
?
目錄
1、一些常用的依賴。?
2、創(chuàng)建一個(gè)Vue空項(xiàng)目
3、Vite設(shè)置@Src別名
4、設(shè)置run dev自動(dòng)打開(kāi)新頁(yè)面。
5、安裝sass版本的 reset.scss
6、全局組件top,bottom
7、處理一個(gè)經(jīng)典的上中下布局
8、創(chuàng)建一個(gè)版本控制。
9、加裝路由,設(shè)置切換路由會(huì)頂部
10、安裝ElementUI，添加輪播圖
11、安裝Element-Icon圖標(biāo)。
12、深度選擇器應(yīng)用,制作搜索框
13、分頁(yè)器和ElementUI國(guó)際化
14、Axios二次封裝和跨域配置
15、使用這些知識(shí)做一個(gè)俄羅斯方塊。
1、一些常用的依賴。?
? 這些版本最好固定，無(wú)需更新。除非你想使用一些新的功能，需要升級(jí)。新手一般不用修改。
{
"name": "project_demo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.4.0",
"element-plus": "^2.3.5",
"nprogress": "^0.2.0",
"pinia": "2.0.36",
"qrcode": "^1.5.3",
"sass": "^1.62.1",
"vue": "^3.2.47",
"vue-router": "^4.2.1"
},
"devDependencies": {
"@types/node": "^20.2.3",
"@vitejs/plugin-vue": "^4.1.0",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}
2、創(chuàng)建一個(gè)Vue空項(xiàng)目
pnpm create vite
// 名字，vue, ts
pnpm install
pnpm run dev
打開(kāi)瀏覽器，輸入網(wǎng)址或點(diǎn)擊允許的網(wǎng)址，看到下面的項(xiàng)目就建好了。
3、Vite設(shè)置@Src別名
當(dāng)修改@為根目錄。會(huì)提示錯(cuò)誤。這里需要安裝types/node,和2處設(shè)置。
pnpm i @types/node -D
vite.config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//配置src目錄別名
resolve: {
alias: {
'@': join(__dirname, "src"),
}
}
})
ts.config
"compilerOptions": {
......
// 讓vscode認(rèn)識(shí)@
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
},
......
看錯(cuò)誤提示消失了。@可以代表src了。
4、設(shè)置run dev自動(dòng)打開(kāi)新頁(yè)面。
這個(gè)很簡(jiǎn)單只需在package里dev后面添加--open就可以
5、安裝sass版本的 reset.scss
記住一個(gè)網(wǎng)站npmjs.com,然后搜索reset.點(diǎn)擊進(jìn)去復(fù)制
復(fù)制reset.scss到src/style/下。然后在main.ts里引入，方法是直接import,(去掉自動(dòng)生成的全局css.)
可以修改app.vue，查看下效果：當(dāng)reset掉所有樣式后，app就頂格到左上角。這個(gè)就是reset的效果。
6、全局組件top,bottom
組件一般放在com里，先創(chuàng)建兩個(gè)文件。
--@/components/hospital_bottom/index.vue
<template>
<div>
bottom
</div>
</template>
--@app.vue
<template>
<div class="container">
<HospitalTop />
<div>正文</div>
<HospitalBottom />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.container{
background-color: black;
height: 100px;
color: #ffffff;
}
</style>
-- main.ts
import HospitalTop from "@/components/hospital_top/index.vue";
import HospitalBottom from "@/components/hospital_bottom/index.vue";
const app = createApp(App);
app.component('HospitalTop', HospitalTop);
app.component('HospitalBottom', HospitalBottom);
app.component用來(lái)注冊(cè)全局組件，這樣在合適的地方就可以直接使用。
7、處理一個(gè)經(jīng)典的上中下布局
<template>
<div class="top">
<div class="content">
內(nèi)容區(qū)域
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.top{
width: 100%;
height: 70px;
background: #fff;
.content{
width: 1200px;
}
}
</style>
代碼下載(選基礎(chǔ)設(shè)置這個(gè)版本下載。下載后需要pnpm i 一下)：syt: 商易通項(xiàng)目
8、創(chuàng)建一個(gè)版本控制。
如果是新開(kāi)始的，可以直接clone一個(gè)倉(cāng)庫(kù)。
這里選commit+push。
9、加裝路由,設(shè)置切換路由會(huì)頂部
--@/router/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({
//設(shè)置為history模式
history: createWebHashHistory(),
routes: [
{
path: "/home", //配置默認(rèn)路由
name: "home", //路由名
component: () => import("@/pages/home/index.vue"), //引入該路由使用的組件
},
{
path: "/", //配置默認(rèn)路由
redirect: "/home",
},
{
path: "/error", //配置默認(rèn)路由
name: "error", //路由名
component: () => import("@/pages/error/index.vue"), //引入該路由使用的組件
},
],
//切換路由后回到頂部
scrollBehavior() {
return { left: 0, top: 0 };
},
});--index.ts
import { createApp } from "vue";
import App from "@/App.vue";
import "@/style/reset.scss";
import router from "@/router/index.ts";
const app = createApp(App);
app.use(router);
app.mount("#app");當(dāng)訪問(wèn)/的時(shí)候，會(huì)自動(dòng)跳到/home。app.vue里要寫(xiě)個(gè)RouterView。
--app.vue
<template>
<div class="container">
<HospitalTop />
<div class="content">
<RouterView/>
</div>
<HospitalBottom />
</div>
</template>
--home/index.vue
<template>
<div>
homes
</div>
</template>
10、安裝ElementUI，添加輪播圖
首先應(yīng)該收藏 https://element-plus.gitee.io/zh-CN/guide/quickstart.html，
命令行運(yùn)行安裝依賴。
pnpm i element-plus
在main.ts里添加引用。
?
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
測(cè)試是否安裝好，我們放幾個(gè)按鈕看下。修改home/index.vue
<template>
<div>
homes
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</div>
</template>
<template>
<!-- 輪播圖 -->
<el-carousel class="carousel" height="350px" :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<img src="../../assets/images/web-banner-1.png" alt="">
</el-carousel-item>
</el-carousel>
</template>
<style scoped>
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
.carousel{
img{
width: 100%;
height: 350px;
}
}
</style>
然后提交版本。
需要資源的可在這里下載（記得是下知識(shí)點(diǎn)-10的版本）?syt: 商易通項(xiàng)目。syt: 商易通項(xiàng)目
11、安裝Element-Icon圖標(biāo)。
pnpm install @element-plus/icons-vue
不推薦全局注冊(cè)。還是在頁(yè)面上按需注冊(cè)好了。在home/index.vue里引用
import {Search,Edit,Plus} from "@element-plus/icons-vue"
<p>用法1</p>
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Edit" circle />
<p>用法2</p> <el-icon>
<Plus />
</el-icon>
<p>用法3</p>
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
12、深度選擇器應(yīng)用,制作搜索框
在輪播圖下面放置一個(gè)搜索框，如圖。這里的需求是這個(gè)input框太短需要長(zhǎng)一點(diǎn)。
<!-- 輪播圖 -->
<el-carousel class="carousel" height="350px" :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<img src="../../assets/images/web-banner-1.png" alt="">
</el-carousel-item>
</el-carousel>
<div class="search">
<el-autocomplete placeholder="請(qǐng)輸入內(nèi)容" />
<el-button type="primary" size="default" :icon="Search">搜索</el-button>
</div>
接下來(lái)在調(diào)試器里嘗試，修改寬度，是可以的。但頁(yè)面上是沒(méi)有這個(gè)el-input的。
.search {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0px;
::v-deep(.el-input){
width: 600px;
margin-right: 5px;
}
}
13、分頁(yè)器和ElementUI國(guó)際化
Element Plus 組件?默認(rèn)?使用英語(yǔ)，如果你希望使用其他語(yǔ)言，你可以修改main.ts里
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
app.use(ElementPlus, { locale: zhCn });
--home/index.vue
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}
源碼下載注意要下相應(yīng)的版本：syt: 商易通項(xiàng)目?
14、Axios二次封裝和跨域配置
pnpm i axios
創(chuàng)建src/util/request.ts
//對(duì)于axios函數(shù)庫(kù)進(jìn)行二次封裝?
//你工作的時(shí)候是否axios進(jìn)行二次封裝?二次封裝的目的是什么那?
//目的:1,利用axios請(qǐng)求、響應(yīng)攔截器功能
//目的2:請(qǐng)求攔截器,一般可以在請(qǐng)求頭中攜帶公共的參數(shù):token
//目的3:響應(yīng)攔截器,可以簡(jiǎn)化服務(wù)器返回的數(shù)據(jù),處理http網(wǎng)絡(luò)錯(cuò)誤
import axios from 'axios';
//引入用戶相關(guān)的倉(cāng)庫(kù)
// import useUserStore from '@/store/modules/user';
//@ts-ignore
import { ElMessage } from 'element-plus';
//利用axios.create方法創(chuàng)建一個(gè)axios實(shí)例:可以設(shè)置基礎(chǔ)路徑、超時(shí)的時(shí)間的設(shè)置
const request = axios.create({
baseURL: '/api',//請(qǐng)求的基礎(chǔ)路徑的設(shè)置
timeout: 5000//超時(shí)的時(shí)間的設(shè)置,超出五秒請(qǐng)求就是失敗的
});
//請(qǐng)求攔截器
request.interceptors.request.use((config) => {
// //獲取用戶倉(cāng)庫(kù)
// let userStore = useUserStore();
// //token:公共參數(shù),如果用戶登錄了需要攜帶
// if (userStore.userInfo.token) {
// config.headers.token = userStore.userInfo.token;
// }
//config:請(qǐng)求攔截器回調(diào)注入的對(duì)象(配置對(duì)象),配置對(duì)象的身上最終要的一件事情headers屬性
//可以通過(guò)請(qǐng)求頭攜帶公共參數(shù)-token
return config;
});
//響應(yīng)攔截器
request.interceptors.response.use((response) => {
//響應(yīng)攔截器成功的回調(diào),一般會(huì)進(jìn)行簡(jiǎn)化數(shù)據(jù)
return response.data;
}, (error) => {
//處理http網(wǎng)絡(luò)錯(cuò)誤
let status = error.response.status;
switch (status) {
case 404:
//錯(cuò)誤提示信息
ElMessage({
type: 'error',
message: '請(qǐng)求失敗路徑出現(xiàn)問(wèn)題'
})
break;
case 500 | 501 | 502 | 503 | 504 | 505:
ElMessage({
type: 'error',
message: '服務(wù)器掛了'
})
break;
case 401:
ElMessage({
type: 'error',
message: '參數(shù)有誤'
})
break;
}
return Promise.reject(new Error(error.message))
});
//務(wù)必對(duì)外暴露axios
export default request;
修改vite.config.ts,
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入node提供內(nèi)置模塊path:可以獲取絕對(duì)路徑
import path from 'path';
export default defineConfig({
plugins: [vue()],
//src文件夾配置別名
resolve: {
alias: {
"@": path.resolve(__dirname, 'src')
}
},
//配置代理跨域
server: {
proxy: {
'/api': {
target: 'http://syt.yourdomain.cn',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
}
})
設(shè)置好后，我們可以測(cè)試下是否能正常發(fā)出請(qǐng)求了。在app.vue里添加
<script setup lang="ts">
import request from "@/utils/request";
import { onMounted } from "vue";
onMounted(() => {
request.get("/lottery/types?appCode=").then((res: any) => {
console.log(res);
})
})
</script>
及時(shí)提交代碼。有興趣的可以下載這個(gè)版本。syt: 商易通項(xiàng)目
.
15、使用這些知識(shí)做一個(gè)俄羅斯方塊。
首頁(yè)做一個(gè)這樣的簡(jiǎn)單頁(yè)面。我們來(lái)實(shí)現(xiàn)一些邏輯功能。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-737430.html
詳細(xì)功能點(diǎn)這里。編寫(xiě)一個(gè)俄羅斯方塊-CSDN博客文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-737430.html
到了這里，關(guān)于Vue3前端100個(gè)必要的知識(shí)點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
