前端项目初始化搭建(二)

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

javascript 复制代码
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

> [email protected] 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

二、安装生产必要依赖

javascript 复制代码
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

三、安装开发依赖

javascript 复制代码
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

四、配置别名

javascript 复制代码
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文件增加模块定义,否则别名引用会报错找不到模块

javascript 复制代码
npm i @types/node --D
javascript 复制代码
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<typeof DefineComponent>;
  export default component;
}

在tsconfig.app.json添加

javascript 复制代码
{
  "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

javascript 复制代码
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

javascript 复制代码
import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

3、在组件中使用:

javascript 复制代码
<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

javascript 复制代码
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内容如下

javascript 复制代码
<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内容相似如下

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

</style> 

最终页面效果如下

2. element-plus/icons-vue

未完待续。。。

相关推荐
Bruce_Liuxiaowei1 小时前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Python私教1 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA2 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手2 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农2 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2762 小时前
Android 通知用法详解
前端
陈随易2 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员
uhakadotcom2 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom2 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH2763 小时前
Android Bitmap.createBitmap() 用法全解析
前端·设计