第一步 初始化项目
npm init vite@latest
接下来按照提示进入项目juejin,初始化和运行就可以在浏览器里查看效果了
运行后在终端提示:Network: use `--host` to expose,意思是需要把本机ip和端口暴露出来,要不然只能通过localhost本机访问,修改vite.config.js即可。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' //引用解决别名
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//下面解决暴露本地地址和端口:Network: use `--host` to expose
server: {
host: '0.0.0.0',
port: 8079, //可以指定新的端口访问
open: true
},
//解决暴露地址
//下面别名,可以使用‘@’来代替src目录了
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
注意:在vscode中禁用Vetur,安装Volar,vue-devtools需要安装beta版本,我的目前是6.0.0 beta 20
第二步 添加路由
安装
npm install vue-router@next --save
在src目录下,创建router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
import Login from '../views/login/index.vue'
import Main from '../views/main/index.vue'
const routes: RouteRecordRaw[] = [
{
path: "/login",
// component: () => import("../views/login/index.vue")
component: Login
},
{
path: '/',
component: Main
}
]
const router=createRouter({
history:createWebHistory(),
routes
})
export default router
在main.ts中挂载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //引入路由
createApp(App).use(router).mount('#app') //路由挂载
在app.vue页面中添加
<router-view />
访问http://localhost:8079/login就可以到达login页面了
第三步 添加 element-plus
安装
npm install element-plus --save
配置按需导入,需要额外安装unplugin-vue-components,而无需在main.ts中导入了
npm install unplugin-vue-components
打开vite配置文件vite.config.ts
//引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//添加
export default defineConfig({
plugins: [vue(),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
直接在vue页面使用plus组件即可,例如在App.vue中使用按钮:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<el-button>ElButton</el-button>
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>
第四步 添加axios
安装
npm install axios --save
npm install qs --save //qs 模块,用来系列化数据
在src文件夹下,创建axios/request.ts
import axios,{AxiosRequestConfig,AxiosResponse,AxiosError} from "axios";
参考: