介绍
Origin.js 于2021年11月17日发布了 1.0.0 版本，它集成了实用的插件和开发工具，支持如下特性，使得编码和开发更加容易：
- 基于 Vue3 & Vite2
- 集成 Vue i18n & Vuex
- 自动导入使用 css、sass、less 或 stylus 定义的全局样式
- 自动引入 Vue 组件
- 基于项目文件的路由配置和布局渲染
- 支持读取
yaml/xml/xlsx/...文件作为 ES 模块 - Markdown 支持
- 集成 Webpack 到 Vite 的转换工具
- 集成 Vue2 升 Vue3 的迁移工具
同时，Origin.js 提供了项目脚手架，让我们能够轻松搭建 Origin.js 项目，并使用这些特性。
安装 CLI
Origin.js CLI 在 Node.js 环境下运行（请保证已完成 Node.js 环境配置），可以使用 npm 安装：
npm install -g @originjs/cli
或者使用 yarn 安装：
yarn global add @originjs/cli
初始化项目
安装成功之后，我们使用 Origin.js CLI 创建一个名称为my-app的项目：
ori init my-app
命令行弹出如下提示，让你配置项目的版本号、证书和使用的 Vite 插件。你可以通过手动输入进行自定义配置，也可以直接按回车键使用默认配置。
在这里我们前两项使用默认配置，选择引入除了ModuleFederation以外的所有插件（关于 Module Federation 请查看文档）。
CLI 将创建my-app文件夹，基于 Vue 3 初始化目录文件，并安装依赖。初始化完成后的项目目录如下图所示：
查看 package.json、vite.config.ts、src/main.ts 文件，可以看到我们刚刚选择的插件已经配置完成，并且默认引入了 vuex 和 vue-i18n 插件。
注意我们没有使用 vue-router 插件，项目中 pages 目录下的文件会自动生成路径配置。
启动项目
进入项目根目录，输入指令启动 Server：
cd my-app
npm run dev
目前 Origin.js 基于 Vite 打包和启动项目，控制台输出以下内容，说明 Vite Server 已经成功启动。
并且浏览器会打开一个页面，展示项目内容（如果没有，在浏览器中输入控制台Local后的地址），按照图中的说明，就可以试用我们刚才所配置的 Vite 插件的效果。
如需构建项目，运行以下指令即可：
npm run build
特性
在初始化项目时，我们选择引入了其中的 5 个插件。Origin.js CLI 共提供了 6 个 Vite 插件，它们配合项目目录运作，你也可以通过手动引入的方式在任意 Vite 项目中使用它们。
assets
assets 目录用来存放项目使用到的资源，同时 vite-plugin-global-style 插件支持自动引入该目录下以 global- 开头命名的样式文件作为全局样式，并且支持 CSS、SASS、LESS和Stylus。
例如初始化项目中的 global-theme.css 文件里定义了 dark 和 light 样式，点击运行页面上的 dark mode 按钮时，便切换到了 dark 样式。
你可以尝试修改这个样式文件，或者创建你自己的样式文件。
关于插件的更多配置请查看文档。
components
components 目录下存放你的自定义组件。当项目引入了 unplugin-vue-components 插件时，该目录下的组件会自动引入，无需 import 就可以自由使用。
感谢 antfu 提供该插件，更多配置请查看文档。
layouts & pages
vite-plugin-pages 插件为 pages 目录中的 Vue 组件自动生成路由配置，同时支持布局。
例如在 pages 目录下创建一个新的文件 test.vue，然后在浏览器的地址最后输入 /test，就可以看到我们刚刚创建的新页面了，省去了配置路径的繁琐步骤！
在 layouts 目录下的文件也会被作为布局组件自动引入。想要在一个组件中使用布局组件，只需在那个组件的最后添加如下定义：
<layout>
layout: layoutName
</layout>
查看 pages 目录下的文件，也可以看到 layouts 文件是如何被引用的。
关于插件的更多配置请查看文档。
content
vite-plugin-content 插件支持将 yaml、xml、xlsx、ini、toml、csv、plist 和 properties 文件转换成 ES6 modules 。
例如在 src/pages/content.vue 文件中，可以看到直接引入了 yaml 文件并作为一个 js 对象使用：
关于插件的更多配置请查看文档。
markdown
vite-plugin-md 插件支持在页面中加载 Markdown 文件。
例如在 src/pages/markdown.vue 文件中，可以看到直接引入了 markdown 文件并作为一个 Vue 组件使用：
感谢 antfu 提供该插件，更多配置请查看文档。
module federation
vite-plugin-federation 插件支持在当前应用中加载远程模块。
关于插件的更多配置请查看文档。
升级工具
此外，Origin.js CLI 支持使用指令对你的 Vue2 项目迁移到 Vue3，或者将你的 Webpack 项目一键转换为 Vite 项目。
具体的使用方法请查看文档。
结语
总而言之，Origin.js 是一个简单而强大的 Web 应用框架，提供一套基于 Vue.js 的完整 Web 项目解决方案，让开发者更加专注于业务逻辑的开发。
Origin.js 是一个开源项目，如在使用中遇到问题，可以在 Github 社区中向作者反馈，也欢迎各位优秀的开发者提交 PR 贡献，更多特性等你来发掘~
