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

一、项目 安装

npm init vite@latest test

二、安装 router

1. 安装

npm install vue-router@4 -S

2. 创建 目录

![[Pasted image 20230407090936.png | 400]]

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: () =&gt;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')

三、新增view s 页面

1. 新增文件夹

![[Pasted image 20230407091417.png | 400]]

2. 新增Home.vue和About.vue

// Home.vue
<template>
	这是home页
</template>

// About.vue
<template>
	这是About页
</template>

四、修改 app.v ue

1. 修改 app.v ue

<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. 按需导入

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>

![[Pasted image 20230407104400.png | 200]]

5.如果报错

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

## 安装扩展
npm install @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. 安装

npm install 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'
export default defineConfig({
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);
});
export default service;

4. 构建自己的api 方法

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

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

5. 使用 banner.js

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

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