VUE3+TS+elementPlus项目基础搭建学习

搭建一个使用 Vue 3, TypeScript 和 Element Plus 的项目

1. 安装 Node.js 和 npm

• 确保你的系统已经安装了 Node.js 和 npm。你可以在 Node.js 官方网站下载并安装最新稳定版本的 Node.js，npm
  会随同安装。
• 需要注意vue3项目需要Node.js的版本最低是node14.18版本，目前最新是node16的版本（奇数版本一般不用），所以在开发vue3项目之前首先需要安装对应的nodeJS环境。

2. 全局安装 Vue CLI

如果还没有安装 Vue CLI，通过以下命令全局安装：

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

3. 创建 Vue 3 + TypeScript 项目

使用 Vue CLI 创建一个新的 Vue 3 + TypeScript 项目。在命令行中运行以下命令：

vue create my-project

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

• 选择 Manually select features
• 选中 TypeScript
• 确保 Vue 3 被选中（这应该是默认选项）
• 你可以选择其他你需要的特性，如 Router, Vuex 等
• 选择一个预设配置，或者继续手动配置

4. 安装 Element Plus

在你的项目中安装 Element Plus，这是一个为 Vue 3 设计的 UI 组件库。

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

在Vue项目中，TypeScript可以用于增强代码的类型安全性、提供自动补全和更好的重构工具。要配置TypeScript，你需要：

• tsconfig.json：这是一个配置文件，用于告诉TypeScript编译器如何编译你的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。
• 在这个文件中定义路由规则，创建路由器实例，并将其导出。

例如：

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
• 创建一个Vuex store，通常是在src/store/index.ts或src/store/index.js。
• 在这个文件中定义你的状态、mutations、actions、getters等。

例如：

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 store from './store'

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

这样，你就可以在Vue组件中通过this.$store来访问和操作状态了。

9. 编写基础示例页面

在 src/components 目录下创建一个新的 Vue 组件，例如 HelloWorld.vue：

<template>
  <el-button type="primary">Hello Element Plus</el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld'
})
</script>

然后在 src/App.vue 中使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue 3 + TypeScript + Element Plus Project!" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

10. 运行项目

现在你可以运行你的项目，并在浏览器中查看效果：

npm run serve

完成以上步骤后，就成功搭建了一个使用 Vue 3, TypeScript 和 Element Plus 的项目，并创建了一个基础示例页面。