vite+vue3.4x 实战演练

vite+vue3.4x项目搭建和启动实操

目录结构

- src
  - api
    - index.js
  - components
    - HelloWorld.vue
  - hooks
    - useFetch.js
  - views
    - Home.vue
  - App.vue
  - main.js
- vite.config.js
- package.json

使用方法

1. 首先，确保您已经安装了Node.js和npm。

2. 创建一个新的项目文件夹，并在终端中导航到该文件夹。

3. 执行以下命令来初始化一个新的Vue项目：

npm init @vitejs/app my-vue-project --template vue

4. 进入项目文件夹：

cd my-vue-project

5. 安装所需的依赖：

npm install

6. 在项目根目录下创建一个vite.config.js文件，并添加以下内容：

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

7. 在src文件夹下创建一个api文件夹，并在其中创建一个index.js文件。在该文件中，您可以定义您的接口调用方法，例如：

export const fetchData = async () => {
  // 调用您的接口，并返回数据
}

8. 在src文件夹下创建一个hooks文件夹，并在其中创建一个useFetch.js文件。在该文件中，您可以封装一个自定义的Hooks，用于调用接口并处理数据，例如：

import { ref } from 'vue'
import { fetchData } from '../api'
export const useFetch = () => {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  const fetchDataFromApi = async () => {
    try {
      loading.value = true
      data.value = await fetchData()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  return { data, loading, error, fetchDataFromApi }
}

9. 在src文件夹下创建一个components文件夹，并在其中创建一个HelloWorld.vue文件。在该文件中，您可以定义一个简单的Vue组件，例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>{{ data }}</p>
    <button @click="fetchDataFromApi">Fetch Data</button>
  </div>
</template>
<script>
import { useFetch } from '../hooks/useFetch'
export default {
  name: 'HelloWorld',
  setup() {
    const { data, loading, error, fetchDataFromApi } = useFetch()
    return {
      title: 'Hello World',
      data,
      loading,
      error,
      fetchDataFromApi
    }
  }
}
</script>

10. 在src文件夹下创建一个views文件夹，并在其中创建一个Home.vue文件。在该文件中，您可以定义一个包含刚刚创建的组件的视图，例如：

<template>
  <div>
    <h2>Home</h2>
    <HelloWorld />
  </div>
</template>
<script>
import HelloWorld from '../components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

11. 在src文件夹下创建一个App.vue文件。在该文件中，您可以定义应用程序的根组件，例如：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

12. 在src文件夹下创建一个main.js文件。在该文件中，您可以创建Vue应用程序的实例，并将其挂载到DOM上，例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

13. 最后，您可以运行以下命令来启动开发服务器：

npm run dev

现在，您可以在浏览器中访问http://localhost:3000，并查看您的Vue应用程序。