返回

5分钟搭建vite+vue3工程，简单好用！

前端

前言

Vite 是一个轻量级的前端构建工具，可以快速构建现代化的前端应用程序。Vue 3 是 Vue.js 的最新版本，它带来了许多新特性和改进。Vue-router4 是 Vue.js 的官方路由库，它可以帮助你轻松管理你的应用程序中的路由。Vuex4 是 Vue.js 的官方状态管理库，它可以帮助你管理你的应用程序中的状态。Ant-design-vue2 是一个基于 Vue.js 的 UI 库，它提供了许多常用的 UI 组件。Axios 是一个基于 Promise 的 HTTP 库，它可以帮助你轻松地发送 HTTP 请求。Mockjs 是一个模拟数据生成器，它可以帮助你快速生成模拟数据。

搭建步骤

  1. 安装必要的依赖包
npm install vite vue vue-router vuex ant-design-vue2 axios mockjs
  1. 创建一个新的 Vue 3 项目
vue create vite-vue3-project
  1. 进入项目目录
cd vite-vue3-project

  1. 在项目根目录下创建一个名为 src 的文件夹

  2. 在 src 文件夹下创建一个名为 main.js 的文件，并添加以下代码：

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

createApp(App).use(router).use(store).mount('#app')
  1. 在 src 文件夹下创建一个名为 App.vue 的文件，并添加以下代码：
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  1. 在 src 文件夹下创建一个名为 router 的文件夹

  2. 在 router 文件夹下创建一个名为 index.js 的文件，并添加以下代码：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
})

export default router

  1. 在 src 文件夹下创建一个名为 store 的文件夹

  2. 在 store 文件夹下创建一个名为 index.js 的文件，并添加以下代码：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
})

export default store

  1. 在 src 文件夹下创建一个名为 views 的文件夹

  2. 在 views 文件夹下创建一个名为 Home.vue 的文件，并添加以下代码：

<template>
  <div>
    <h1>Home</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
  },
}
</script>
  1. 在 public 文件夹下创建一个名为 index.html 的文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  
  <link
    href="https://unpkg.com/ant-design-vue2/dist/antd.css"
    rel="stylesheet"
  />
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>
  1. 运行 npm run dev 命令

结语

按照以上步骤，你就可以快速搭建一个vite+vue3+vue-router4+vuex4+ant-design-vue2+axios+mockjs的工程。这个工程非常适合用于快速开发和原型设计。