一、项目安装
npm init vite@latest test
二、安装router
1. 安装
npm install vue-router@4 -S
2. 创建目录
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. 按需导入
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?
## 安装扩展
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>
原文地址:https://blog.csdn.net/csdn_8023/article/details/130022960
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_6987.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。