使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

下面是使用Vite+Vue3+Vant全家桶快速构建项目步骤详解的完整攻略。

准备工作

1. 安装Node.js：https://nodejs.org/en/download/，推荐使用Node.js 12以上版本。
2. 安装Vue CLI：打开命令行工具，执行npm install -g @vue/cli。
3. 创建一个空白的Vue项目：打开命令行工具，执行vue create my-project，其中my-project为项目名称，等待命令行工具自动安装依赖包。如果要使用TypeScript，可以执行vue create my-project --default --inlinePreset "{\"useConfigFiles\":true,\"plugins\":{\"@vue/cli-plugin-typescript\":{\"classComponent\":true}}}"。

安装Vant

1. 打开命令行工具，进入项目目录，执行npm install vant安装Vant。
2. 在main.js中引入Vant并注册组件：

import { createApp } from 'vue'
import App from './App.vue'
import vant from 'vant'
import 'vant/lib/index.css'

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

安装Vite

1. 打开命令行工具，进入项目目录，执行npm install vite --save-dev安装Vite。
2. 创建vite.config.js文件，配置Vite。

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

export default defineConfig({
  plugins: [vue()],
  // 其他配置
})

配置Vite

// 省略其他配置
  resolve: {
    alias: {
      // 修改为项目路径
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 8080,
    proxy: {
      // 接口代理
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    // 输出目录
    outDir: 'dist',
    // 打包模式，可选：esm、cjs、umd
    lib: {
      entry: './src/index.js',
      name: 'my-library'
    },
  }

示例说明1：使用Vant组件

<template>
  <div>
    <van-button type="primary">按钮</van-button>
  </div>
</template>

示例说明2：使用Axios访问接口

1. 安装axios和@types/axios，执行npm install axios @types/axios --save。
2. 在main.js中引入Axios并设置默认配置：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api/'
axios.defaults.headers.post['Content-Type'] = 'application/json'

1. 在组件中使用Axios：

<template>
  <div>
    <van-button type="primary" @click="getData()">获取数据</van-button>
    <van-list>
      <van-cell v-for="(item, index) in dataList" :key="index">
        {{ item }}
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    getData() {
      axios.get('data').then(res => {
        this.dataList = res.data
      })
    }
  }
}
</script>

至此，使用Vite+Vue3+Vant全家桶快速构建项目步骤详解已经讲解完毕。