前端项目初始化搭建（二）

一、使用 Vite 创建 Vue 3 + TypeScript 项目

PS E:\web\cursor-project\web> npm create vite@latest yf-blog -- --template vue-ts> npx
> create-vite yf-blog --template vue-tsScaffolding project in E:\web\cursor-project\web\yf-blog...Done. Now run:cd yf-blognpm installnpm run devPS E:\web\cursor-project\web> cd yf-blog
PS E:\web\cursor-project\web\yf-blog> npm installadded 47 packages in 7s5 packages are looking for fundingrun `npm fund` for details
PS E:\web\cursor-project\web\yf-blog> npm run dev> yf-blog@0.0.0 dev
> viteVITE v6.0.3  ready in 594 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

二、安装生产必要依赖

PS E:\web\cursor-project\web\yf-blog> npm install vue-router@4 pinia element-plus @element-plus/icons-vue axios marked highlight.jsadded 16 packages in 4s9 packages are looking for fundingrun `npm fund` for details

三、安装开发依赖

PS E:\web\cursor-project\web\yf-blog> npm install -D sass sass-loader mockjs @types/mockjs vite-plugin-mock cross-env unplugin-auto-import unplugin-vue-componentsadded 87 packages in 8s26 packages are looking for fundingrun `npm fund` for details

四、配置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src')}},plugins: [vue()],
})

在src下的vite-env.d.ts文件增加模块定义,否则别名引用会报错找不到模块

npm i @types/node --D

declare module "*.vue" {import type { DefineComponent } from "vue";const component: DefineComponent<typeof DefineComponent>;export default component;
}

在tsconfig.app.json添加

{"compilerOptions": {"paths": {"@": ["./src"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

五、依赖的功能和使用方法

1. vue-router@4

功能: Vue.js的官方路由管理器
安装: npm install vue-router@4

使用步骤:

1、新建src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/article/:id',name: 'Article',component: () => import('@/views/Article.vue')}]
})export default router

2、main.ts引入router

import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

3、在组件中使用:

<script setup lang="ts">
const router = useRouter()
const route = useRoute()// 编程式导航
const goToArticle = (id: number) => {router.push(`/article/${id}`)
}// 获取路由参数
const articleId = route.params.id
</script>

2. element-plus

功能: 基于 Vue 3的UI组件库
安装: npm install element-plus

使用步骤:

1、main.ts引入 element-plus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/index'
import ElementPlus from 'element-plus'// 样式导入
import 'element-plus/dist/index.css'
// 创建应用实例
const app = createApp(App)app.use(router)
app.use(ElementPlus, {size: 'default',zIndex: 3000
})
app.mount('#app')

2、路由layout组件化处理

3、新建layout模块

3.1、src/layout/index.vue内容如下

<template><el-container class="common-layout"><el-aside class="aside"><Aside/></el-aside><el-container><el-header class="header"><Header/></el-header><el-main><router-view></router-view></el-main><el-footer class="footer">Footer</el-footer></el-container></el-container>
</template><script setup lang="ts">
import Aside from './components/aside.vue'
import Header from './components/header.vue'</script><style lang="scss" scoped>
.common-layout{width: 100%;height: 100vh;.aside{height: 100vh;width: 200px;background-color: #ccc;}.header{height: 50px;background-color: #c9c1c1;border-bottom: 1px solid #c9c6c6;}.footer{height: 50px;background-color: #c9c1c1;}
}</style>

3.2、aside.vue、header.vue、home.vue内容相似如下

<template><div class="home"><span>侧边/头部/博客首页</span></div>
</template><script setup lang="ts"></script><style lang="scss" scoped></style> 

最终页面效果如下

2. element-plus/icons-vue

未完待续。。。