当前位置： 代码网 > it编程>前端脚本>Vue.js > vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

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

2024年07月28日 • Vue.js •我要评论
搭建vue3+vite+element项目基础框架构建

一、项目安装

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: () =>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. 新增文件夹

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

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

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.封装请求

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方法

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

5. 使用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>
赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com