【vue3】vue3的一般项目结构、成功显示自己的vue3页面

**Vue3项目结构**

在开始构建 Vue3项目之前，我们需要了解一个标准的 Vue3项目结构。下面是我们将使用的基本结构：

bashmy-vue-app/
public/
index.htmlsrc/
main.jsApp.vuecomponents/
HelloWorld.vueviews/
Home.vuerouter/
index.jsstore/
index.jsutils/
axios.jspackage.json

**项目依赖**

在开始构建 Vue3项目之前，我们需要安装必要的依赖。我们将使用以下依赖：

bashnpm install vue@next vue-router@4 vuex@4 axios

**main.js**

这是我们的应用程序入口点。在这里，我们会创建一个 Vue 应用实例，并配置路由和状态管理。

javascript// src/main.jsimport { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'

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

**App.vue**

这是我们的应用程序的顶级组件。在这里，我们会定义一个基本的布局和导航菜单。

vue<!-- src/App.vue -->

<template>
 <div id="app">
 <nav>
 <router-link to="/">Home</router-link>
 <!-- <router-link to="/about">About</router-link> -->
 </nav>
 <router-view />
 </div>
</template>

<script setup>
import { ref } from 'vue'
// import HelloWorld from './components/HelloWorld.vue'

const count = ref(0)
</script>

<style scoped>
#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>

**HelloWorld.vue**

这是一个简单的组件，用于测试 Vue 的基本功能。

vue<!-- src/components/HelloWorld.vue -->

<template>
 <div>
 <h1>Hello World!</h1>
 <p>{{ msg }}</p>
 <button @click="count++">count is {{ count }}</button>
 </div>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('Hello Vue!')
const count = ref(0)
</script>

<style scoped>
#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>

**views/Home.vue**

这是我们的应用程序的主页组件。在这里，我们会定义一个基本的布局和内容。

vue<!-- src/views/Home.vue -->

<template>
 <div>
 <h1>Home Page</h1>
 <p>This is the home page of our application.</p>
 </div>
</template>

<script setup>
// import HelloWorld from '../components/HelloWorld.vue'
</script>

<style scoped>
#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>

**router/index.js**

这是我们的应用程序的路由配置。在这里，我们会定义一个基本的路由结构。

javascript// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

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

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes})

export default router

**store/index.js**

这是我们的应用程序的状态管理配置。在这里，我们会定义一个基本的状态结构。

javascript// src/store/index.jsimport { createStore } from 'vuex'

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

export default store

**utils/axios.js**

这是一个基本的 Axios 配置文件。

javascript// src/utils/axios.jsimport axios from 'axios'

const instance = axios.create({
 baseURL: ' /> timeout:10000,
 headers: {
 'Content-Type': 'application/json'
 }
})

export default instance

**package.json**

这是我们的应用程序的依赖配置文件。

json{
 "name": "my-vue-app",
 "version": "1.0.0",
 "description": "",
 "scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build"
 },
 "dependencies": {
 "axios": "^0.21.1",
 "vue": "^3.2.31",
 "vue-router": "^4.0.13",
 "vuex": "^4.0.2"
 }
}

**成功显示自己的Vue3页面**

现在，我们可以在浏览器中访问我们的应用程序了。我们需要启动一个开发服务器，并打开一个浏览器窗口。

bashnpm run serve

然后，我们可以在浏览器中访问我们的应用程序：

/>
我们应该能够看到我们的应用程序的主页页面。

**总结**

在本文中，我们学习了如何构建一个基本的 Vue3项目结构，包括路由和状态管理。我们还学习了如何使用 Axios 进行网络请求。最后，我们成功地显示了自己的 Vue3 页面。