vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

一、项目安装

npm init vite@latest test

二、安装router

1. 安装

npminstall vue-router@4 -S

2. 创建目录

![![[Pasted image 20230407090936.png | 400]]](https://img-blog.csdnimg.cn/eb72ff2d03894463b6085d8c8eca2482.png)

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,});exportdefault router;

4.修改main.ts

// 新增引入import router from'./router'// 使用routercreateApp(App).use(router).mount('#app')

三、新增views页面

1. 新增文件夹

![![[Pasted image 20230407091417.png | 400]]](https://img-blog.csdnimg.cn/a59d58d8cd304dbe9b5fbd6238df7185.png)

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';exportdefaultdefineConfig({plugins:[vue(),//配置插件AutoImport({imports:['vue','vue-router']})],resolve:{// 配置路径别名alias:{'@':resolve(__dirname,'./src'),},},});

六、安装element

1.安装element-ui

npminstall element-plus --save

2. 按需导入

npminstall -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';exportdefaultdefineConfig({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><scriptsetup>import{ Search }from'@element-plus/icons-vue'</script>

![![[Pasted image 20230407104400.png | 200]]](https://img-blog.csdnimg.cn/31978bc0b03d4404ad4af75f7e1c1037.png)

5.如果报错

[vite] Internal server error: Failed to resolve import"@element-plus/icons-vue" from "src/views/Home.vue". Does the file exist?

## 安装扩展npminstall @element-plus/icons-vue

七、引入reset.csss

1. 网上下载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. 安装

npminstall axios -S

2.设置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'exportdefaultdefineConfig({plugins:[vue(),//配置插件AutoImport({resolvers:[ElementPlusResolver()],imports:['vue','vue-router']}),Components({resolvers:[ElementPlusResolver()],}),],resolve:{// 配置路径别名alias:{'@':resolve(__dirname,'./src'),},},// 设置api代理server:{proxy:{'/api':'http://***'// 替换成你的域名}}});

3.封装请求

在src下新建utils目录，新增request.js文件，添加下面的代码

import axios from'axios';//1. 创建axios对象const service = axios.create();//2. 请求拦截器
service.interceptors.request.use(config=>{return config;},error=>{
Promise.reject(error);});//3. 响应拦截器
service.interceptors.response.use(response=>{//判断code码return response.data;},error=>{return Promise.reject(error);});exportdefault service;

4. 构建自己的api方法

在utils目录下新建api文件夹，并建一个banner.js

import request from'@/utils/request'exportfunctiongetBanner(){returnrequest({url:'/api/getBanner',// 这里填写你自己的api地址method:'get',// get方法可以省略不写})}

5. 使用banner.js

在你使用的界面中引入banner.js的方法

<scriptsetup>import{ getBanner }from'@/utils/api/banner'// 使用api// 定义一个变量接收let bannerList =ref([])onBeforeMount(()=>{getBanner().then(res=>{
            bannerList.value = res.data //  这里是接口返回值
            console.log(res)})})</script>