vue.js typescript 前端框架 vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

一、项目安装

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

// About.vue

四、修改app.vue

1. 修改app.vue

五、引入自动引入插件

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.测试是否引入成功

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

八、安装插件 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的方法

相关链接

 您阅读本篇文章共花了：