环境搭建

npm install lavas -g

基本命令

lavas init

lavas build

lavas dev –port 8000

lavas start // 启动服务端渲染项目

github

https://github.com/lavas-project/lavas-template-vue
https://github.com/lavas-project/lavas-config

npm run dev/build

项目结构

/assets 里的内容会被 webpack 构建到生成目录的文件中，不再会单独以文件形式存在。因此 iconfont 放置在 /assets 中
/static 里的内容会被原样复制到生成目录中，会以独立的文件形式存在。因此 PWA 用到的 manifest.json 和一系列图标等都放置在 /static 中

components

存放 vue 组件，默认组件

UpdateToast.vue 也在 /core/App.vue 中被引用，用于 Service Worker 更新时提示用户
ProgressBar.vue 在 /core/entry-client.js 中被引用，在页面切换时在顶部展示加载的进度条

core

webpack entry、全局样式框架、vue app 启动器等

/core/middlewares.js

中间件，可选项

pages

存放页面文件，lavas 会自动生成路由

store

存放状态管理

lavas.config.js

build 构建相关
errorHandler 错误处理相关
middleware 中间件相关
router 路由规则相关
serviceWorker Service Worker 相关

.lavas

自动路由生成方法

普通情况

根据 /pages/ 中的 vue 文件层级生成对应的路由规则，vue 文件都会命名为首字母大写，路由规则一般均采用小写，Lavas 会将 vue 文件名的首字母改为小写处理，但不会处理中间目录的大小写

Index.vue 特殊处理

动态参数

在需要传参的页面目录新增：_参数名.vue (下划线开头表示动态参数)

访问方式：this.$route.params.id、

嵌套路由

在需要嵌套的路由页面目录，新建同名目录（首字母小写），目录下新建需要嵌套的路由页面文件

1234567lavas-project
└── pages/
    ├── Detail.vue // 父路由
    └── detail/  // 嵌套路由
        ├── Product.vue // 子路由
        ├── Service.vue
        └── Mixed.vue

构建配置

Lavas 构建配置

中间件

使用方式

  1. 将编写的中间件放在项目根目录 /middlewares 文件夹下
  2. 声明所要使用的中间件名称

编写说明

1
2
3
export default function (context) {
    console.log('This is my first middleware.');
}
context