introduce

Document | warehouse project

Origine.js was released in version 1.0.0 on November 17, 2021. It integrates useful plug-ins and development tools and supports the following features to make coding and development easier:

  • Based on Vue3 & Vite2
  • Integrate Vue I18N & Vuex
  • Automatic import of global styles defined using CSS, SASS, LESS, or stylus
  • Automatically import Vue components
  • Route configuration and layout rendering based on project files
  • Support to readyaml/xml/xlsx/...File as ES module
  • Markdown support
  • Integrate Webpack to Vite conversion tools
  • Integrate Vue2 and Vue3 migration tools

At the same time, Origin.js provides project scaffolding, making it easy to build an Origin.js project and use these features.

Install the CLI

The Origin. Js CLI runs in node. js environment (please ensure that the Node.js environment configuration is complete) and can be installed using NPM:

npm install -g @originjs/cli
Copy the code

Or use YARN to install:

yarn global add @originjs/cli
Copy the code

Initialize the project

After the installation is successful, we use the origine.js CLI to create a project named my-app:

ori init my-app
Copy the code

The command line prompts you to configure the version number of the project, the certificate, and the Vite plug-in to use. You can customize the configuration by typing it manually, or you can press Enter to use the default configuration.

Here we use the default configuration for the first two items and choose to import all plug-ins except for ModuleFederation (see the documentation for ModuleFederation).

CLI will create the my-app folder, initialize the directory files based on Vue 3, and install the dependencies. The project directory after initialization is as follows:

Looking at the package.json, viet.config. ts, SRC /main.ts files, you can see that the plug-in we just selected has been configured and vuex and VUE-i18N plug-ins have been introduced by default.

Note that we did not use the vue-router plug-in; the files in the Pages directory in the project automatically generate the path configuration.

Start the project

Go to the project root directory and enter the command to start the Server:

cd my-app
npm run dev
Copy the code

At present, Origin.js is packaged and started based on Vite. If the console output the following information, the Vite Server has been started successfully.

The browser will open a page showing the content of the project (if not, enter the address after console Local in the browser) and follow the instructions in the image to try out the effect of the Vite plug-in we just configured.

To build the project, run the following command:

npm run build
Copy the code

features

When initializing the project, we chose to introduce five of these plug-ins. The origine.js CLI provides six Vite plug-ins that work with the project directory, or you can use them manually in any Vite project.

assets

The assets directory is used to store the resources used by the project. The vite-plugin-global-style plug-in automatically imports style files starting with global- from this directory as global styles, and supports CSS, SASS, LESS, and Stylus.

For example, the global-theme. CSS file in the initialization project defines the dark and light styles, and when you click the Dark Mode button on the run page, you switch to the Dark style.

You can try modifying this style file, or create your own.

See the documentation for more configuration of the plug-in.

components

The Components directory holds your custom components. When a project introduces the unplugin-vue-Components plug-in, components in this directory are automatically introduced and can be used freely without import.

Thanks to ANTFU for providing this plug-in, see the documentation for more configurations.

layouts & pages

The viet-plugin-Pages plug-in automatically generates routing configurations for Vue components in the Pages directory and supports layout.

For example, in the pages directory to create a new file test.vue, and then in the browser address at the end of the input /test, you can see we just created a new page, save the tedious steps of configuring the path!

Files in the layouts directory are also automatically imported as layout components. To use layout components in a component, add the following definition at the end of that component:

<layout>
layout: layoutName
</layout>
Copy the code

See the file in the Pages directory to see how the layouts file is referenced.

See the documentation for more configuration of the plug-in.

content

The vite-plugin-content plugin supports converting YAML, XML, XLSX, INI, TOML, CSV, PList, and Properties files into ES6 modules.

For example, in the SRC /pages/content.vue file, you can see the yamL file imported directly and used as a JS object:

See the documentation for more configuration of the plug-in.

markdown

The viet-plugin-MD plug-in supports loading Markdown files in a page.

For example, in the SRC /pages/markdown.vue file, you can see the markdown file imported directly and used as a vue component:

Thanks to ANTFU for providing this plug-in, see the documentation for more configurations.

module federation

The viet-plugin-federation plugin allows remote modules to be loaded in the current application.

See the documentation for more configuration of the plug-in.

conclusion

In a word, Origine.js is a simple and powerful Web application framework, providing a set of complete Web project solutions based on vue.js, allowing developers to focus more on the development of business logic.

Origin. Js is an open source project. If you have any problems in using it, you can feedback to the author on Github