使用 Vue 和 Lumen 构建个人清单应用：前端篇

## 前言

在前面的文章中，我们已经完成了用户模块和清单模块的后台接口开发和测试。现在，我们开始前端项目的创建和部分模块的开发。

## 创建 Vue 项目

首先，我们需要创建一个 Vue 项目。我们可以使用 Vue CLI 来快速创建项目。

npm install -g @vue/cli
vue create my-list-app

## 安装依赖

我们需要安装一些依赖才能使用 Vue 和 Lumen。

npm install vue-router vuex axios

## 创建组件

接下来，我们需要创建一些组件。组件是 Vue 中的可重用代码块。

// App.vue

// List.vue

// Add.vue

## 创建路由

我们需要创建一些路由来定义组件如何映射到 URL。

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from './components/List.vue'
import Add from './components/Add.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'List',
component: List
},
{
path: '/add',
name: 'Add',
component: Add
}
]

const router = new VueRouter({
routes
})

export default router

## 创建 Vuex 存储

我们需要创建一个 Vuex 存储来管理组件之间的状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
state: {
lists: []
},
mutations: {
addList(state, list) {
state.lists.push(list)
}
},
actions: {
addListAsync({ commit }, list) {
axios.post('/api/lists', list).then(() => {
commit('addList', list)
})
}
}
})

export default store

## 部署应用

现在，我们可以将我们的应用部署到服务器上。我们可以使用 Nginx 来部署我们的应用。

server {
listen 80;
server_name example.com;

root /var/www/my-list-app/public;

location / {
try_files uri uri/ /index.html;
}
}

## 结语

在本教程中，我们学习了如何使用 Vue 和 Lumen 构建一个简单的个人清单应用。我们还学习了如何使用 Vue CLI 创建项目、如何使用 Vuex 管理状态，以及如何使用 Nginx 部署应用。