创建项目
npm init vite my-vite
cd my-vite
npm install
配置项目
1、修改tsconfig.json, 新增compilerOptions.baseUrl、compilerOptions.paths
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": [
"ESNext",
"DOM"
],
"skipLibCheck": true,
"baseUrl": "./", // 新增
"paths": { // 新增
"@": [
"./src"
],
"@/*": [
"./src/*"
],
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
2、修改vite.config.ts, 新增resolve.alias、server
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 新增
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: { // 新增
//设置别名
alias: {
'@': resolve(__dirname, './src'),
},
},
server: { // 新增
port: 8080, //启动端口
hmr: {
host: '127.0.0.1',
port: 8080,
},
// 设置 https 代理
proxy: {
'/api': {
target: 'http://localhost:3000', // 后端 api 地址
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/api/, ''),
},
},
},
})
安装全家桶(vue-router、axios、pinia)
集成vue-router
1、安装
npm install vue-router@4
2、新建/src/view文件夹,在view文件夹下新建Main.vue、Home.vue、Admin.vue文件
Main.vue内容:
<template>
<router-link to="/home">home</router-link>
<router-link to="/admin">admin</router-link>
<router-view></router-view>
</template>
<script setup lang="ts"></script>
Home.vue内容:
<template>
home
</template>
<script setup lang="ts"></script>
Admin.vue内容:
<template>
admin
</template>
<script setup lang="ts"></script>
3、修改App.vue内容为:
<template>
<Main></Main>
</template>
<script setup lang="ts">
import Main from './view/Main.vue'
</script>
<style scoped>
</style>
新建/src/router/index.ts文件
import { createRouter, createWebHashHistory } from "vue-router"
import Main from '@/view/Main.vue'
import Home from '@/view/Home.vue'
import Admin from '@/view/Admin.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/main',
component: Main,
},
{
path: '/home',
component: Home,
},
{
path: '/admin',
component: Admin,
}
]
})
export default router
4、在main.ts中引入vue-router
import { createApp } from 'vue'
import './style.css'//全局样式设置,先删掉其中的内容
import App from './App.vue'
import router from '@/router'//引入vue-router
const app = createApp(App)
app.use(router as any)//引入vue-router
app.mount('#app')
删除style.css中的内容,清除示例工程中的全局样式
集成axios
1、安装:
npm install axios
2、在src目录下新建request/index.ts文件:
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
const service = axios.create({
// baseURL: 'http://localhost:3000',
withCredentials: true,
});
// Request interceptors
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// do something
return config;
},
(error: any) => {
Promise.reject(error);
}
);
// Response interceptors
service.interceptors.response.use(
async (response: AxiosResponse) => {
// do something
return response.data;
},
(error: any) => {
// do something
return Promise.reject(error);
}
);
export default service;
3、在src目录下新建apis/sysAuth.ts文件:
import httpRequest from '@/request/index'
interface LoginParam {
loginName: string,
password: string
}
export function apiAuthLogin(param: LoginParam) {
return httpRequest({
url: '/api/auth/login',//因为配置了代理,所以接口必须以/api开头
method: 'post',
data: JSON.stringify(param),
})
}
这里注意接口地址必须以“/api”开头,和 vite.config.ts中proxy中的配置一样
4、在Home.vue中使用:
<template>
home
<button @click="handleLogin">登录</button>
</template>
<script setup lang="ts">
import { apiAuthLogin } from '@/apis/sysAuth';
const handleLogin = () => {
apiAuthLogin({ loginName: 'name', password: '123' }).then((res) => {
console.log(res)
})
}
</script>
集成pinia
1、安装:
npm install pinia
2、在src下创建store/index.ts、store/user.ts文件
index.ts:
import { createPinia } from 'pinia';
const store = createPinia();
export default store;
user.ts:
import { defineStore } from 'pinia';
export const useUserStore = defineStore({
id: 'user', // 必填且唯一
state: () => {
return {
name: 'nouser',
};
},
actions: {
updateName(name: string) {
this.name = name;
},
},
});
3、在main.ts中引入:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入element-plus-icon图标
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina
const app = createApp(App)
//引入element-plus-icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')
4、在Admin.vue中使用:
<template>
admin::{{userStore.name}}
<button @click="handleGetUser">获取用户</button>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const handleGetUser = () => {
//通过actions修改state
userStore.updateName("user01")
}
</script>
至此,全家桶装完,接下来安装element-plus
element-plus
1、安装:
npm install element-plus
2、全局引入element-plus和样式文件:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina
const app = createApp(App)
app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')
element-plus-icon图标
1、安装:
npm install @element-plus/icons-vue
2、修改main.ts文件:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入element-plus
import 'element-plus/dist/index.css'//引入element-plus样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入element-plus-icon图标
import './style.css'
import App from './App.vue'
import router from '@/router'//引入vue-router
import store from '@/store'//引入pinina
const app = createApp(App)
//引入element-plus-icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)//引入element-plus
app.use(router as any)//引入vue-router
app.use(store)
app.mount('#app')
完