打造Vue3+TS项目神器：一键整合ElementPlus、Axios、Pinia、Less、Vue-router

2023-08-16 14:49:19

构建一个全功能的 Vue3 + TypeScript 项目

在当今快节奏的网络开发领域，构建一个功能齐全且技术先进的应用程序至关重要。借助Vue3和TypeScript的强大功能，您可以轻松创建满足现代Web需求的应用程序。本文将引导您完成构建一个集成了ElementPlus、Axios、Pinia、Less和Vue-router的Vue3+TS项目的逐步指南。

一、准备工作

1. 安装 Node.js 和 npm

首先，确保已安装Node.js和npm。它们是Vue3和TypeScript项目的先决条件。

2. 安装 Vite

Vite是一个用于开发和构建现代Web应用程序的高性能框架。使用以下命令安装它：

npm install --global @vitejs/cli

3. 安装 Vue CLI

Vue CLI是一个用于快速创建和管理Vue.js项目的命令行界面。使用以下命令安装它：

npm install --global @vue/cli

二、创建项目

通过Vue CLI创建一个新的Vue3+TS项目：

vue create vite-vue3-ts

三、安装依赖项

接下来，安装项目所需的关键依赖项：

cd vite-vue3-ts
npm install element-plus axios pinia less vue-router

四、配置项目

1. 配置 Vite

在package.json文件中添加以下Vite配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "vite": {
    "define": {
      "process.env": process.env
    },
    "plugins": [
      [
        "import-analysis",
        {
          "analysis": true
        }
      ]
    ]
  }
}

2. 配置 Less

在vite.config.ts文件中添加Less配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import less from 'less'

export default defineConfig({
  plugins: [
    vue(),
    less()
  ]
})

五、使用组件或插件

1. 使用 ElementPlus 组件

在.vue文件中使用ElementPlus组件：

<template>
  <el-button>按钮</el-button>
</template>

<script>
import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton
  }
}
</script>

2. 使用 Axios

在.ts文件中使用Axios：

import axios from 'axios'

export default {
  methods: {
    getData() {
      axios.get('/api/data').then(response => {
        console.log(response.data)
      })
    }
  }
}

3. 使用 Pinia

在.ts文件中使用Pinia：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

4. 使用 Vue-router

在.vue文件中使用Vue-router：

<template>
  <router-view />
</template>

<script>
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default {
  router
}
</script>