使用 LeanCloud 快速搭建一个网站

LeanCloud → 后端服务器
Vue → 前端框架
Express → 后端框架

使用 LeanCloud 搭建网站的好处在于：

1. 省钱，流量低的情况下，每个月只需要60元的云引擎费用
2. 方便，不用维护服务器和数据库的各种状态
3. LeanCloud SDK 支持多种语言，易于开发和上手

1. 使用终端，登录 LeanCloud 帐号

lean login

2. 初始化项目

lean init

3. 按照提示选择即可，这里我使用的是 Node.js 的 Express 作为后端框架

4. 安装桥接库，帮助运行前端项目的

npm install connect-history-api-fallback

在 app.js 中添加：

const history = require('connect-history-api-fallback')
app.use(express.static('dist'))
app.use(history())

5. 一切就绪后，运行下面这个命令即可启动后端

lean up

这个时候只是启动了后端服务器，但是网站的代码还没有部署进来，采用前后端分离的模式，所以接下来创建网站的项目。

1. 使用终端，执行下面的命令

vue create 项目名称

接下来按照提示选择即可，唯一注意的点是，UI 建议选择 element ui，我感觉好用。

2. 项目创建成功后，进入项目，安装 vue-router，Vue Router 是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

npm install vue-router

Vue 结构和路由相关

• main.js 文件设置路由相关代码

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import './plugins/element.js'

Vue.config.productionTip = false
Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  mode: 'hash',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
        return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

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

• page 文件夹下则是你的各种页面代码了，具体如何编写页面可以阅读 Vue.js 官网的教程。
• 创建 router 文件夹，再文件夹下创建 router.js 文件

import App from '../App'

const ItemList = r => require.ensure([], () => r(require('../page/itemList/ItemList')), 'ItemList')
const Home = r => require.ensure([], () => r(require('../page/home/Home')), 'Home')
const Item = r => require.ensure([], () => r(require('../page/item/Item')), 'Item')
//这里 require 的是page页面路径，讲所有页面都引用在这里和下面都结构中

export default [{
    path: '/',
    component: App, //顶层路由，对应index.html
    children: [
        {
            path: '',
            redirect: '/home'
        }, {
            path: '/itemList/:id', // 这种写法是 域名/itemList/1234，之后可以通过 vue params 读取 id 获得 1234
            name: 'itemList',
            component: ItemList
        }, {
            path: '/home',
            name: 'home',
            component: Home,
        }, {
            path: '/item/:id',
            name: 'item',
            component: Item,
        }
    ]
}]

1. 启动前端项目

npm run serve

2. 打包项目

npm run build

前端代码编写完成后，运行 npm run build，将打包好的 dist 文件夹复制到 LeanCloud 项目所在的文件夹内。

在 LeanCloud 项目目录下执行

lean delopy

部署完成后，试着访问下你的主页吧。

访问的域名可以去 LeanCloud 控制台，进入应用-设置后找到

若没有付费，默认使用的体验版云引擎，会有个休眠期，有时候访问会很慢，代表从休眠才启动，之后就后正常速度，长时间不访问又回进入休眠的