什么是 vitreum？
vitreum 是一个前端的开发工具，可以帮助你快速创建基于 React.js 的应用程序。
安装
在使用 vitreum 前，需要先安装 Node.js。安装方法可以到 Node.js 的官网上查看。
安装 vitreum 只需要在终端里输入以下命令：
npm install vitreum -g
-g参数表示全局安装。如果想要安装在当前项目下，则不需要这个参数。
创建项目
在终端里输入以下命令可以创建一个新的 vitreum 项目：
vitreum init my-project
这会在当前文件夹下创建一个名为 my-project 的文件夹。在这个文件夹下，你将会看到以下的目录结构：
-- -------------------- ---- ------- ---------- --- ------ - --- -------- --- --- - --- --------- - --- -------- - --- --------- - --- --------- - --- ---------- --- ------------ --- ---------
public文件夹：存放前端页面相关的文件，比如 HTML、CSS 或者是静态资源。src文件夹：存放前端开发的源代码。其中，client.js 是前端应用程序的入口。model.js 是前端应用程序的数据模型。routes.js 则是前端应用程序的路由信息。server.js 则是基于 Node.js 运行的服务器端代码。package.json：项目的配置文件。
开发环境
进入 my-project 文件夹，在终端里输入以下命令：
npm install
这会安装项目所需的依赖。
接着，在终端里输入以下命令以启动 vitreum：
npm start
这个命令将会启动一个开发服务器。你可以在浏览器中访问 http://localhost:8080 以查看应用程序。
生产环境
在部署到生产环境之前，需要先将应用程序打包。在终端里输入以下命令：
npm run build
这会生成一个打包好的应用程序到 public 文件夹下的 build 子文件夹中。
接着，在终端里输入以下命令以启动生产服务器：
npm run serve
这个命令将会启动生产服务器。你可以在浏览器中访问 http://localhost:8000 以查看生产应用程序。
示例代码
可以在 src/client.js 中加入以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<h1>Hello, World!</h1>
);
ReactDOM.render(<App />, document.getElementById('app'));经过以上步骤，你可以在浏览器中看到页面上显示了 "Hello, World!"。
总结
vitruem 是一个优秀的前端开发工具，可以帮助你快速创建基于 React.js 的应用程序。通过本文的介绍，相信读者对 vitreum 的使用已经有了更深刻的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67488