创建项目
我们先搭建一个vite+vue3+ts的项目。
在开始前我们先查看一下自己 node.js 的版本，在cmd命令行输入命令：node -v
node.js版本低于18+的话建议升级你的 Node 版本。
打开 node.js 官方下载页面，下载最新的长期支持版本即可，安装的时候一路 Next 下去就行，注意别安装到C盘。
安装完后我们再查看一下当前的 Node 版本，可以看到已经是 20+ 的版本了
在安装node.js的时候已经把 npm 同时安装好了，继续回到vite官网，我们用 npm 创建一个vite项目，在你项目目录下，输入cmd
输入命令如下：
npm create vue@latest
也可以用yarn进行创建，命令如下：
yarn create vue
选择如下：
启动项目
使用 VScode 打开刚刚创建的项目，在终端输入命令如下，如果你vscode本来就是开着的，然后升级了Node，需要重启下Vscode：
npm install
npm run dev
当你npm install很慢的时候，你可尝试使用淘宝镜像来加速，下面是临时使用一次淘宝镜像的命令：
npm --registry https://registry.npmmirror.com install
启动后我们打开http://localhost:5173/ 可以看到以下页面：
开发准备
首先，我们先安装一下Less，我习惯用Less，你也可以选择使用Sass，在终端输入命令如下：
npm install less --save-dev
接着，我们在vscode 的扩展应用商店搜索 Vue - Official 并安装重启Vscode。
打包配置
我们修改一下打包配置，不然npm run build后的文件无法打开，打开vite.config.ts文件，增加如下代码：
plugins: [
vue(),
],
base: './', // 增加的部分
再打开src\router\index.ts页面，修改代码如下：
import { createRouter, createWebHashHistory } from 'vue-router' // 修改的部分
const router = createRouter({
history: createWebHashHistory(), // 修改的部分
此时我们再在终端输入命令npm run build后，点击打包后的index.html文件就可以正常打开页面了。
引入axios
首先，我们配置一下开发环境和生产环境，用于开发时（npm run dev）和打包时（npm run build）调用不同的接口API地址，我们在项目根目录下新增以下两个文件（.env.development和.env.production），并编写代码如下：
VITE_API_URL=http://localhost:8080/
VITE_API_URL=http://localhost:8080/
我这里只是做个示例，实际开发过程中，你需要将地址改成你本地和线上的接口地址。
接着，就是axios的安装，在终端输入以下命令：
npm install axios
接着，在最外层新建一个utils文件夹，在文件夹内新建一个storage.ts文件，输入代码如下：
export const getToken = () => localStorage.getItem("auth_token");
export const setToken = (val: string) => localStorage.setItem("auth_token", val);
export const removeToken = () => localStorage.removeItem("auth_token");
export const getUserInfo = () => localStorage.getItem("user_info");
export const setUserInfo = (val: string) => localStorage.setItem("user_info", val);
export const removeUserInfo = () => localStorage.removeItem("user_info");
然后，在最外层新建一个api文件夹，在文件夹内新建一个request.ts文件，输入代码如下：
import axios from 'axios'
import {
getToken,
removeToken
} from "../../utils/storage";
// 创建axios实例
const service = axios.create({
baseURL: import.meta.env.VITE_API_URL as any,
timeout: 6000,
headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})
// http request 请求拦截器
service.interceptors.request.use(
(config: any) => {
if (getToken()) {
config.headers.Authorization = "Bearer " + getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)
// http response 响应拦截器
service.interceptors.response.use(
(response:any) => {
if (!response.data.code) {
return response;
}
switch (response.data.code) {
case 401: {
if (getToken()) {
removeToken()
}
break
}
case 403: {
if (getToken()) {
removeToken()
}
break
}
case 500: {
// Message.error(response.data.msg)
break
}
case 201: {
return response;
}
case 200: {
return response;
}
case 1: {
return response;
}
default: {
// Message.error(response.data.msg)
}
}
},
error => {
return Promise.reject(error)
}
)
export default service
此时} from "../../utils/storage";处会出现报错信息，我们需要修改tsconfig.app.json文件下的代码：
"include": [
"env.d.ts",
"src/**/*",
"src/**/*.vue",
"src/**/*.ts", //增加的部分
"utils/**/*.ts", //增加的部分
],
修改后报错信息就没了
引入element-plus
在终端输入以下命令：
npm install element-plus --save
我对打包后的文件大小不在乎，所以我就全局引入了，打开src\main.ts文件，增加代码如下：
import router from './router'
import ElementPlus from 'element-plus'//增加的代码
import 'element-plus/dist/index.css'//增加的代码
app.use(ElementPlus)//增加的代码
引入pinia
上面创建项目的时候选了否，我这里还是用上，在终端输入命令如下：
npm install pinia
首先，在src目录下新建一个store文件夹，在该文件夹下新增index.ts文件，输入代码如下：
import { webStore } from './modules/web'
import { tabsStore } from './modules/tabs'
const store: any = {}
export const registerStore = () => {
store.webStore = webStore()
store.tabsStore = tabsStore()
}
export default store
然后在store文件夹下再新增一个modules文件夹，在该文件夹下新增两个文件（tabs.ts和web.ts），代码如下：
import { defineStore } from 'pinia'
import router from '@/router/index'
export const tabsStore = defineStore('tabsStore', {
state: () => ({
tabList: [{
title: '导航页',
path: "/Dashboard",
name: 'Dashboard',
}] as any[],
}),
actions: {
// 关闭单个标签
closeTab(tabIndex: any, curRoute: any) {
const delItem = this.tabList.splice(tabIndex, 1)[0];
const item = this.tabList[tabIndex]
? this.tabList[tabIndex]
: this.tabList[tabIndex - 1];
if (item) {
console.log('item', item)
console.log('delItem.name', delItem.name)
console.log('curRoute.name', curRoute.name)
if (delItem.name === curRoute.name) {
router.push(item.path)
}
} else {
router.push("/");
}
},
// 关闭所有标签
closeAllTabs() {
this.tabList = [{
title: '导航页',
path: "/Dashboard",
name: 'Dashboard',
}]
router.push("/");
},
// 关闭其他标签
closeOtherTab(curRoute: any) {
const curItem = this.tabList.filter((item) => item.path === curRoute.fullPath);
this.tabList = curItem;
},
// 添加标签
addTab(route: any) {
const isExist = this.tabList.some((item) => item.path === route.fullPath);
if (!isExist) {
this.tabList.push({
title: route.meta.title,
path: route.fullPath,
name: route.name,
});
}
}
}
})
import { defineStore } from 'pinia'
export const webStore = defineStore('webStore', {
state: () => ({
collapse: false as boolean,
}),
actions: {
toggleCollapse() {
this.collapse = !this.collapse
},
}
})
同时，需要在src\main.ts文件中引入，增加代码如下：
import { createPinia } from 'pinia' // 增加的代码
import { registerStore } from './store' // 增加的代码
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(createPinia()) // 增加的代码
registerStore() // 注册 Pinia // 增加的代码
到此，我们整一个项目就搭建完成了，接下来就是正式开发了。
