创建Vue 3 + TypeScript + Vite + Element Plus项目

目录

前提条件

步骤

前提条件

在开始之前，请确保你的开发环境中已经安装了以下工具和软件：

• Node.js（推荐使用最新稳定版本）
• npm（通常随Node.js一起安装）

步骤

1. 打开终端并创建一个新的项目目录：

   mkdir my-vue-project
   cd my-vue-project
   

2. 初始化一个新的npm项目，在终端中执行以下命令并按照提示进行初始化：

   npm init
   

3. 安装Vite作为开发服务器和构建工具：

   npm install -D create-vite
   npx create-vite .
   

4. 在安装Vite时，你可以选择Vue 3作为项目模板。选择"vue-ts"作为模板选项，并等待初始化完成。

5. 安装Vue Router和Vuex（可选）：

   npm install vue-router@next vuex@next
   

6. 安装Element Plus作为UI库：

   npm install element-plus
   

7. 创建一个vite.config.ts文件来配置Vite和TypeScript。在项目根目录下创建一个vite.config.ts文件，并添加以下配置：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         '@': '/src',
       },
     },
   });
   

8. 创建src目录，然后在其中创建main.ts文件作为应用程序的入口点：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   import 'element-plus/dist/index.css';
   
   const app = createApp(App);
   app.use(router);
   app.use(store);
   app.mount('#app');
   

9. 创建Vue组件和页面。在src目录下创建一个components目录和views目录，并创建一些组件和页面文件。

10. 如果需要使用Vue Router和Vuex，就需要在根目录下创建相关的配置文件（可选）：

    • 创建src/router/index.ts文件并配置Vue Router路由。
    • 创建src/store/index.ts文件并配置Vuex状态管理。

11. 在App.vue中引入Element Plus组件并使用它们：

    <template>
      <div>
        <el-button>Element Plus Button</el-button>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      name: 'App',
    });
    </script>
    

12. 运行开发服务器，并查看项目是否正常运行：

    npm run dev