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

一、使用 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-ts


Scaffolding project in E:\web\cursor-project\web\yf-blog...

Done. Now run:

  cd yf-blog
  npm install
  npm run dev

PS E:\web\cursor-project\web> cd yf-blog
PS E:\web\cursor-project\web\yf-blog> npm install

added 47 packages in 7s

5 packages are looking for funding
  run `npm fund` for details
PS E:\web\cursor-project\web\yf-blog> npm run dev

> yf-blog@0.0.0 dev
> vite


  VITE 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.js

added 16 packages in 4s

9 packages are looking for funding
  run `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-components

added 87 packages in 8s

26 packages are looking for funding
  run `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>