一、初始化个人简历项目

简介

使用 Vue 3 + TypeScript + Vite 开发一个，展示个人简历信息的，静态的，单页面应用。博客文档将持续更新。⭐️ 欢迎访问个人的简历网站预览效果

一、Vue.js 3简介

Vue.js 3相较于之前的版本，在性能和功能上都有所提升。它继续采用了响应式数据绑定的设计，并通过组合API、更具灵活性的组件系统以及更高效的渲染层，使得开发大型单页应用成为可能。此外，Vue.js 3还提供了更好的TypeScript支持，使得开发者能够更方便地使用TypeScript进行开发。

二、初始化步骤

确保已安装了node环境，安装的node版本尽量16及16以上。

node -v // 查询版本
1

现在使用vite初始化项目

npm init vite@latest resume // resume 为项目名称，可自定义
1

选择 Vue >> TypeScript>> 完成项目创建

使用VScode打开新建的项目，可以看到项目的结构

打开终端初始化依赖

npm i 
// 初始化依赖后
npm run dev
// 浏览器打开 http://127.0.0.1:5173/
1
2
3
4

### 三、安装element UI

安装配合Vue3使用的element-ui

npm install element-plus --save
1

安装成功后，在 main.ts文件中引入 element-plus

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)


app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11

tsconfig.json文件中加入

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}
1
2
3
4
5
6
7

再将moduleResolution 模式改为 node

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"],
      /* Bundler mode */
    "moduleResolution": "node",
  }
}
1
2
3
4
5
6
7
8
9

这样项目就创建完成了。

---

点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏