yarn add element-plus
yarn add @element-plus/icons-vue
修改main.ts
import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)app.use(ElementPlus, {locale: zhCn,
})
app.mount('#app')
在使用 Element-Plus ，配置国际化时可能会出现Could not find a declaration file for module 'element-plus/dist/locale/zh-cn.mjs的报错。
解决方案：
在 vite-env.d.ts 配置 declare module “*.mjs” 即可。
此外，如果其他因为 ts 类型检测出现报错，导致打包失败，可以添加 // @ts-ignore 的代码注释，则会直接忽略当前文件 ts 类型的检测。
配置src别名
安装
yarn add @types/node --save-dev
修改vite.config.ts
import path from 'path'
resolve: { alias: { '@': path.resolve('./src') } },
修改tsconfig.json，这样以后的路径都可以写@/了
//compilerOptions节点下
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": {//路径映射，相对于baseUrl"@/*": ["src/*"]
},
配置项目中的环境变量
新建.env.development
# 变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = '/api'
VITE_SERVE = 'http://sph-api.atguigu.cn'
新建.env.production
NODE_ENV = 'production'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = 'http://sph-api.atguigu.cn'
VITE_SERVE = 'http://sph-api.atguigu.cn'
新建.env.test
NODE_ENV = 'test'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://sph-api.atguigu.cn'
配置项目中的环境变量
新建.env.development
# 变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = '/api'
VITE_SERVE = 'http://sph-api.atguigu.cn'
新建.env.production
NODE_ENV = 'production'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = 'http://sph-api.atguigu.cn'
VITE_SERVE = 'http://sph-api.atguigu.cn'
新建.env.test
NODE_ENV = 'test'
VITE_APP_TITLE = 'vue-admin'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://sph-api.atguigu.cn'
package.json新增两个命令
"build:test": "vue-tsc && vite build --mode test",
"build:pro": "vue-tsc && vite build --mode production",
获取环境变量
// import.meta.env里面就有
console.log(import.meta.env)
开发环境的配置
{"VITE_APP_TITLE": "vue-admin","VITE_APP_BASE_API": "/api","VITE_SERVE": "http://sph-api.atguigu.cn","VITE_USER_NODE_ENV": "development","BASE_URL": "/","MODE": "development","DEV": true,"PROD": false,"SSR": false
}
自带属性介绍
import.meta.env.MODE: 当前构建模式，可以是"development"、"production"或"test"之一。
import.meta.env.BASE_URL: 当前项目的基准URL。
import.meta.env.PROD: 一个布尔值，表示当前是否处于生产模式。
import.meta.env.DEV: 一个布尔值，表示当前是否处于开发模式
vue-router
添加路由
yarn add vue-router
src下新建views文件夹，该文件夹下新建404、home、login文件夹，这些文件夹下新建index.vue
<template><div>我是404</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>
src下新建router文件夹，该文件夹下新建index.ts和routers.ts
index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routers'const router = createRouter({history: createWebHashHistory(),routes: constantRoute,// 滚动行为scrollBehavior() {return {left: 0,top: 0,}},
})export default router
routers.ts
export const constantRoute = [{path: '/login',component: () => import('@/views/login/index.vue'),name: 'login',},{path: '/',component: () => import('@/views/home/index.vue'),name: 'layout',},{path: '/404',component: () => import('@/views/404/index.vue'),name: '404',},
]
//任意路由
export const anyRoute = {path: '/:pathMatch(.*)*',redirect: '/404',name: 'Any',
}
app.vue
<router-view></router-view>
main.ts
import router from '@/router/index'app.use(router)
pinia
yarn add pinia
新建stores文件夹，该文件下新建index.ts
// https://pinia.vuejs.org/
import { createPinia } from 'pinia';
// 创建
const pinia = createPinia();
// 导出
export default pinia;使用
import pinia from '/@/stores/index';app.use(pinia)
