vue项目常用组件和框架结构介绍

下面我将为你详细讲解"vue项目常用组件和框架结构介绍"的攻略。

1. 常用组件

在Vue项目开发中，常用的组件有：

(1) vue-router

路由是Vue应用中最重要的一部分，它可以帮助我们实现单页应用页面之间的跳转。vue-router是Vue官方提供的路由器，它能轻松地与Vue应用进行整合，可以实现前端路由的效果。

(2) vuex

Vuex是一种专为Vue.js设计的状态管理模式，可以让你轻松地管理Vue应用的状态。使用Vuex可以对应用程序的数据进行中央化管理，方便进行状态共享和管理。

(3) element UI

Element UI是基于Vue.js 2.0框架开发的一套UI框架，具有易用性、高可定制性和美观性。它提供了一系列基础组件和高级组件，方便快速构建一个好看、易用、高性能的Web应用。

2. 框架结构介绍

Vue项目的框架结构可以根据实际需要进行调整。这里提供一种常见的Vue项目框架结构。

(1) src目录

src目录中包含了所有的项目源代码，一般会按照以下方式组织目录结构：

├── assets // 静态资源目录，如图片、字体等
├── components //组件目录，包含了所有的Vue组件
├── router // 路由配置文件夹
│   └── index.js // 定义路由
├── store // vuex状态管理文件夹
│   ├── index.js // vuex状态管理入口文件
├── App.vue // 根组件文件
└── main.js // 项目入口文件

(2) public目录

public目录包含了一些公共的静态资源，如index.html文件、favicon.ico等。

3. 示例说明

下面就编写一个简单的Vue项目实现一个Todo-List，来说明如何使用Vue常用组件和框架结构。

(1) 创建一个Vue项目

首先，我们要使用Vue CLI快速创建一个Vue项目，执行如下命令：

vue create todo-list

(2) 安装组件

安装router和vuex组件，执行如下命令：

npm install vue-router vuex --save

(3) 创建目录结构

在src目录下创建如下目录结构：

├── assets
│   └── logo.png
├── components
│   ├── TodoList.vue
│   └── TodoItem.vue
├── router
│   └── index.js
├── store
│   ├── index.js
│   ├── actions.js
│   ├── mutations.js
│   └── getters.js
├── App.vue
└── main.js

(4) 编写代码

App.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Welcome to Todo List'
    }
  }
}
</script>

TodoList.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <input type="text" v-model="newTodo" @keyup.enter="addTodo">
    <ol>
      <todo-item v-for="(todo, index) in todos" :key="index" :todo="todo"></todo-item>
    </ol>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  computed: {
    ...mapState([
      'todos'
    ]),
    title() {
      return `Todo List (${this.todos.length})`
    }
  },
  methods: {
    ...mapActions([
      'addTodo'
    ])
  },
  data() {
    return {
      newTodo: ''
    }
  }
}
</script>

TodoItem.vue

<template>
  <li>{{ todo.title }}</li>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: Object
  }
}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import TodoList from '../components/TodoList.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList
    }
  ]
})

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo: (state, todo) => state.todos.push(todo)
  },
  actions: {
    addTodo: ({ commit }, todo) => commit('addTodo', todo)
  },
  getters: {}
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

(5) 运行项目

运行命令：

npm run serve

打开浏览器，即可在http://localhost:8080/看到Todo-List效果。

以上是示例说明，介绍了Vue项目常用组件和框架结构的基本用法。