搭建一个使用 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 的项目,并创建了一个基础示例页面。