一、項(xiàng)目安裝
npm init vite@latest test
二、安裝router
1. 安裝
npm install vue-router@4 -S
2. 創(chuàng)建目錄
3. 在router下新增index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4.修改main.ts
// 新增引入
import router from './router'
// 使用router
createApp(App).use(router).mount('#app')
三、新增views頁面
1. 新增文件夾
2. 新增Home.vue和About.vue
// Home.vue
<template>
這是home頁
</template>
// About.vue
<template>
這是About頁
</template>
四、修改app.vue
1. 修改app.vue
<template>
<router-view />
</template>
五、引入自動引入插件
1.unplugin-auto-import
npm i unplugin-auto-import -D
2. 在vite.config.js中引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
vue(),
//配置插件
AutoImport({
imports: ['vue', 'vue-router']
})
],
resolve: {
// 配置路徑別名
alias: {
'@': resolve(__dirname, './src'),
},
},
});
六、安裝element
1.安裝element-ui
npm install element-plus --save
2. 按需導(dǎo)入
npm install -D unplugin-vue-components unplugin-auto-import
3.在vite.config.js新增插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
vue(),
//配置插件
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router']
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
// 配置路徑別名
alias: {
'@': resolve(__dirname, './src'),
},
},
});
4.測試是否引入成功
<template>
這是home頁
<el-button :icon="Search" circle />
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
</script>
5.如果報錯
[vite] Internal server error: Failed to resolve import "@element-plus/icons-vue" from "src/views/Home.vue". Does the file exist?
## 安裝擴(kuò)展
npm install @element-plus/icons-vue
七、引入reset.csss
1. 網(wǎng)上下載reset.css
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}
2.在assets中新增css文件夾
3.將reset.css放入css文件夾
4.在App.vue中引入reset.css
<style>
@import '@/assets/css/reset.css';
</style>
八、安裝插件 axios
1. 安裝
npm install axios -S
2.設(shè)置api代理
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
//引入插件
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()],
imports: ['vue', 'vue-router']
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
// 配置路徑別名
alias: {
'@': resolve(__dirname, './src'),
},
},
// 設(shè)置api代理
server:{
proxy:{
'/api':'http://***' // 替換成你的域名
}
}
});
3.封裝請求
在src下新建utils目錄，新增request.js文件，添加下面的代碼
import axios from 'axios';
//1. 創(chuàng)建axios對象
const service = axios.create();
//2. 請求攔截器
service.interceptors.request.use(config => {
return config;
}, error => {
Promise.reject(error);
});
//3. 響應(yīng)攔截器
service.interceptors.response.use(response => {
//判斷code碼
return response.data;
},error => {
return Promise.reject(error);
});
export default service;
4. 構(gòu)建自己的api方法
在utils目錄下新建api文件夾，并建一個banner.js文章來源：http://www.zghlxwxcb.cn/news/detail-564867.html
import request from '@/utils/request'
export function getBanner(){
return request({
url:'/api/getBanner', // 這里填寫你自己的api地址
method:'get', // get方法可以省略不寫
})
}
5. 使用banner.js
在你使用的界面中引入banner.js的方法文章來源地址http://www.zghlxwxcb.cn/news/detail-564867.html
<script setup>
import { getBanner } from '@/utils/api/banner'
// 使用api
// 定義一個變量接收
let bannerList = ref([])
onBeforeMount(()=>{
getBanner().then(res=>{
bannerList.value = res.data // 這里是接口返回值
console.log(res)
})
})
</script>
到了這里，關(guān)于vue3初始搭建項(xiàng)目完整教程 vue3 + vite + element-ui + axios的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
