了解了lavas基础之后，下面我们就需要创建一个基础的lavas项目了。

环境要求

一台可以正常联网的计算机并已安装较新版本的 Node.js (≥ 6.9) 和 npm (≥ 3.0)
一个方便调试并支持 Service Worker 的浏览器，推荐使用 Google Chrome
一个自己习惯的文本编辑器，如 Sublime Text, Web Storm 等等

安装步骤

安装/升级 Lavas 命令行工具

1

npm install lavas -g
在合适的目录新建项目并命名（此处有坑，在文章后面再说）

1

lavas init
进入目录并安装依赖

1

npm install
启动开发服务器，访问 localhost:3000 将看到初始页面。

1

lavas dev

之前第2步的时候也说了，此处有坑，现在就来说一下，我刚开始接触Lavas时，根据官方文档一步步创建项目，全局安装完Lavas之后，查看lavas版本

到此为止，安装成功。

开始创建项目，执行第二步操作，发现提示和图例不同，显示报错（一脸懵逼，出师未捷身先死啊），各种查阅，但是并没有什么有用的信息，突然灵光一闪（在其他地方遇到过类似问题），第一步只是全局安装成功，需要退出再次启动终端才可以继续执行项目的创建，（不管如何，试一下了），成功了，至此这个非常简单的坑，填了。

初始目录结构

通过 lavas init 初始化项目完成之后，我们应该能够看到如下的文件结构：

lavas-project├── assets/├── components/├── core/├── middlewares/├── node_modules/├── pages/├── static/├── store/├── lavas.config.js├── server.dev.js, server.prod.js├── .babelrc, .editorconfig, .fecsignore, .fecsrc, .gitignore└── LINCENSE, package.json, README.md

assets, static

把这两个目录放在一起，是因为这两个目录都是存放外部静态资源的，例如 iconfont(用字体实现矢量小图标的库), icons(用于添加到手机桌面时使用的各种尺寸的图标), manifest.json(同样用于添加到桌面时使用)等。

这些静态资源在构建时会一并被放入生成目录中(/dist)，但两者也有差别：

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

components

/components 存放 Vue 的组件，供其他页面复用。在 Lavas 中，初始状态下提供了三个组件，均在一些页面框架中使用，因此会作用于整个项目的所有页面。

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

如果开发者有其他多个页面需要复用的组件，也可以放在 /components 目录中。

core

/core 目录中存放一些散落但必须的文件，作用也相对复杂，包括 webpack entry, 全局样式框架，Vue app 启动器等等。详细可以参考 core 目录文档进行详细查看。

middlewares

之前在 /core/middlewares.js 中有提过，用户可以在这个目录编写自定义中间件，用来获取或者修改每次到达服务器的网络请求。关于中间件的具体写法及其包含的能力可以参考文档的中间件部分。

pages

/pages/ 目录存放每个页面的 vue 组件。我们在开发实际站点的时候，可能大部分的工作都在这个目录中进行。每个页面组件都是一个标准的 Vue 组件，包含 <template>, <script> 和 <style> 三部分，开发方式也和 Vue 一模一样，这里就不再多做介绍了。

值得注意的是，/pages/ 目录中的所有页面都会自动生成一条路由规则，无需用户再行配置。举例来说，在初始项目中我们看到一个 /pages/Appshell.vue，则 Lavas 自动生成的路由将会是 /appshell。更多生成规则可以参考本文下半部分的“ Lavas 自动路由生成方法” 部分。

当然如果开发者对自动生成的路由并不满意，或者有其他特殊需求需要自定义路由规则的，也可以通过 router 配置项进行修改，这部分将在文档的路由部分进行说明。

store

之前在 /core/store.js 中有提及，所有位于 /store 目录的 js 文件都会以 Vuex 模块 (module) 进行加载。因此开发者只需要提供一个完整的 Vuex 模块就可以在 vue 中使用它。一般来说，一个完整的 Vuex 模块需要包含以下内容：

// someStore.js with path: /store/namespace/someStore.js// state MUST be a function to support SSRexport const state = () => { // define states};export const mutations = { // define functions to change states};export const actions = { // send async requests and commit changes};

这样就可以在 /pages/ 目录中的 vue 中使用它了，例如

// ...computed: mapState('namespace/someStore', [ 'state1', 'state2'])// ...

更多 store 相关的写法可以参见文档的 store 部分。

lavas.config.js

Lavas 提供了许多配置项，方便开发者进行各种自定义的灵活配置。所有的配置项都集中在 lavas.config.js 中，并提供一套默认配置，适用于大部分普通开发者快速上手。配置总共分为以下几个部分，您都可以在文档的进阶部分找到对应的章节进行详述：

build 构建相关，详见这里
errorHandler 错误处理相关，详见这里
middleware 中间件相关，详见这里
router 路由规则相关，详见这里
serviceWorker Service Worker 相关，详见这里
在此，再次提醒一下，Lavas并不是一个新的框架，而是VUE和PWA的结合体，一些基本的使用和项目的构建和VUE是大致相同的，如果你有VUE的基础，再加上熟悉一下PWA的原理和技术，入手会更简单。

Lavas 安装和项目构建相关推荐

前端框架vue3的node安装及项目构建的4种方法
前端框架vue3的node安装及项目构建的4种方法 C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm install ...
Vue相关软件安装及其项目构建
一 webpack的安装 1.查看是否有node node -v 2.查看是否有webpack --version 表示没有webpack,此时需要安装webpack 全局安装npm install ...
Maven Web项目构建
1.环境说明系统环境:win7 Eclipse: Eclipse Java EE IDE for Web Developers. Version: Mars Release (4.5.0),此版本是 ...
Java项目构建管理Maven的安装与配置
1.下载安装首先安装配置好jdk[指路:jdk的安装和配置],然后下载安装maven(现在多数使用maven3,版本号3.x.x,可以去官网下载https://maven.apache.org/do ...
项目构建之maven篇:2.HelloWorld项目构建过程
文件结构说明: 项目构建生命周期: 清理编译測试打包执行部署清理与编译 hello\pom.xml POM:Project Object Model,项目对象模型 pom.xml与ant的 ...
ReSharper“无法解析符号”，即使在项目构建时
本文翻译自:ReSharper "Cannot resolve symbol" even when project builds My Tools: 我的工具: Visual St ...
Maven学习总结（2）——Maven项目构建过程练习
Maven学习总结(二)--Maven项目构建过程练习上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程一.创建Maven项目 1.1.建 ...
Maven学习总结(二)——Maven项目构建过程练习
2019独角兽企业重金招聘Python工程师标准>>> Maven学习总结(二)--Maven项目构建过程练习上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验 ...
Android Studio的gradle项目构建
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
Android Studio下项目构建的Gradle配置及打包应用变体
Gradle简介 Gradle是一个自动化构建工具,采用Groovy的Domain Specific Language(领域特定语言)来描述和控制构建逻辑.具有语法简洁.可读性强.配置灵活等特点. ...

Lavas 安装和项目构建