Vue 3 项目详细教程

1. 安装与项目初始化

1.1 安装Node.js和npm

首先需要安装Node.js和npm，可以从Node.js官网下载安装。

1.2 使用Vue CLI创建项目

Vue CLI是一个官方提供的标准化工具，可以帮助我们快速创建和管理Vue项目。安装Vue CLI：

npm install -g @vue/cli

创建一个新项目：

vue create my-vue3-project

选择默认配置或者根据自己的需求进行定制配置。

1.3 项目结构

创建好的项目目录结构如下：

my-vue3-project
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   ├── main.js
│   ├── router
│   ├── store
│   └── views
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

2. 项目结构说明

  • public：静态资源目录，index.html是入口文件。
  • src：源码目录，包含主要的开发文件。
  • assets：存放静态资源，如图片、样式等。
  • components：存放Vue组件。
  • views：存放视图组件。
  • router：存放路由配置。
  • store：存放状态管理文件。
  • App.vue：根组件。
  • main.js：入口文件，初始化Vue实例。

3. 基本功能实现

3.1 创建组件

在src/components目录下创建一个名为HelloWorld.vue的组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>
3.2 使用组件

在App.vue中使用HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>
3.3 路由配置

在src/router目录下创建一个路由文件index.js：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  }
]

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

export default router

然后在main.js中引入路由：

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

createApp(App).use(router).mount('#app')
3.4 状态管理

在src/store目录下创建一个状态管理文件index.js：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: state => state.count
  }
})

然后在main.js中引入store：

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

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

4. 常用功能示例

4.1 表单处理

在src/components目录下创建一个表单组件FormComponent.vue：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="name">Name:</label>
      <input type="text" v-model="name" id="name" />

      <label for="email">Email:</label>
      <input type="email" v-model="email" id="email" />

      <button type="submit">Submit</button>
    </form>

    <p>Name: {{ name }}</p>
    <p>Email: {{ email }}</p>
  </div>
</template>

<script>
export default {
  name: 'FormComponent',
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    submitForm() {
      alert(`Name: ${this.name}, Email: ${this.email}`);
    }
  }
}
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
}

label {
  margin: 5px 0;
}

input {
  margin-bottom: 10px;
}

button {
  width: 100px;
}
</style>
4.2 与后台交互

安装axios用于HTTP请求：

npm install axios

在src目录下创建一个api目录，并在其中创建一个index.js文件：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  getPosts() {
    return apiClient.get('/posts')
  }
}

在src/views目录下创建一个名为PostsView.vue的视图组件：

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'PostsView',
  data() {
    return {
      posts: []
    }
  },
  created() {
    api.getPosts().then(response => {
      this.posts = response.data
    })
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

将此视图添加到路由配置中：

import PostsView from '../views/PostsView.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/posts',
    name: 'Posts',
    component: PostsView
  }
]

5. 部署项目

构建项目：

npm run build

将生成的dist目录下的文件部署到Web服务器上即可。

这样就完成了一个简单的Vue 3项目的搭建和基本功能实现。如果有更多需要深入的功能或详细的教程，可以进一步定制和扩展。

版权声明：如无特殊说明，文章均为本站原创，转载请注明出处

本文链接：http://example.com/subject/article/75/

许可协议：署名-非商业性使用 4.0 国际许可协议