1. 安装 Node.js 和 npm

确保你的系统已经安装了 Node.js 和 npm。你可以在 Node.js 官方网站下载并安装最新稳定版本的 Node.js，npm会随同安装。
注意: vue3项目需要Node.js的版本最低是node14.18版本

2. 全局安装 Vue CLI

npm install -g @vue/cli
# 或者使用 yarn
# yarn global add @vue/cli

3. 创建 Vue 3 + TypeScript 项目

vue create my-project

在创建项目的过程中，CLI 会询问你一些问题来定制项目配置。你需要选择以下选项：

• 选择 Manually select features
• 选中 TypeScript
• 你可以选择其他你需要的特性，如 Router, Vuex 等，以下选择供参考
• 选择一个预设配置，或者继续手动配置

4. 安装 Element Plus

cd my-project
npm install element-plus --save
# 或者使用 yarn
# yarn add element-plus

5. 配置 Element Plus

在你的 main.ts 文件中引入 Element Plus 并将其添加到 Vue 应用中：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

6. 配置TypeScript

tsconfig.json配置示例

{
  "compilerOptions": {
    "target": "esnext", /* 指定ECMAScript目标版本 */
    "module": "esnext", /* 指定模块系统 */
    "strict": true, /* 启用所有严格的类型检查选项 */
    "jsx": "preserve", /* 保留JSX语法，不转换为表达式 */
    "importHelpers": true, /* 导入辅助函数从tslib */
    "moduleResolution": "node", /* 模块解析策略 */
    "esModuleInterop": true, /* 允许默认导入与CommonJS模块互操作 */
    "experimentalDecorators": true, /* 启用装饰器 */
    "skipLibCheck": true, /* 跳过所有声明文件的类型检查 */
    "forceConsistentCasingInFileNames": true /* 强制文件名大小写一致 */
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

7. 配置路由 (使用Vue Router)

Vue Router是Vue.js的官方路由器。要配置路由，你需要：

安装Vue Router：npm install vue-router
创建一个路由配置文件，比如src/router/index.ts或src/router/index.js。
在这个文件中定义路由规则，创建路由器实例，并将其导出。

src/router/index.ts或src/router/index.js

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 添加更多路由规则
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

需要在main.ts文件中使用这个路由器实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

8. 配置状态管理 (使用Vuex)
Vuex是Vue.js的状态管理模式。要配置Vuex，你需要安装Vuex：

npm install vuex

src/store/index.ts或src/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在main.ts文件中使用这个store实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import ElementPlus from 'element-plus';

import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(store);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

9. 编写你的基础示例页面

10. 运行项目

npm run serve