您的位置: 首页  >  文章  >  Lavas 安装和项目构建

Lavas 安装和项目构建

分类: 文章 • 2023-02-17 00:25:49

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

环境要求

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

安装步骤

  1. 安装/升级 Lavas 命令行工具

    

    1
    
npm install lavas -g

    2. 

  2. 

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

    

    1
    
lavas init
    Lavas 安装和项目构建
    

    3. 

  3. 

    进入目录并安装依赖
    

    

    1
    
npm install

    4. 

  4. 

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

    

    1
    
lavas dev

    5. 





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


Lavas 安装和项目构建


到此为止，安装成功。


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




初始目录结构


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






1


2


3


4


5


6


7


8


9


10


11


12


13



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 中，初始状态下提供了三个组件，均在一些页面框架中使用，因此会作用于整个项目的所有页面。


    

  1. UpdateToast.vue 也在 /core/App.vue 中被引用，用于 Service Worker 更新时提示用户
    2. 

  2. ProgressBar.vue 在 /core/entry-client.js 中被引用，在页面切换时在顶部展示加载的进度条
    3. 



如果开发者有其他多个页面需要复用的组件，也可以放在 /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 模块需要包含以下内容：






1


2


3


4


5


6


7


8


9


10


11


12


13


14



// 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 中使用它了，例如






1


2


3


4


5


6



// ...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的原理和技术，入手会更简单。
    • 

															

																					

								

									相关推荐