项目搭建和启动实操

目录结构

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

使用方法

首先，确保您已经安装了Node.js和npm。
创建一个新的项目文件夹，并在终端中导航到该文件夹。
执行以下命令来初始化一个新的Vue项目：

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

进入项目文件夹：

cd my-vue-project

安装所需的依赖：

npm install

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

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


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

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

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

在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 }
}

在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>

在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>

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

<template>
  <div id="app">
    <router-view />
  </div>
</template>


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

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

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

createApp(App).use(router).mount('#app')

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

npm run dev

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

vite+vue3.4x 实战演练

项目搭建和启动实操

目录结构

使用方法