The first build tool for compiling and bundling Vue components in a Deno runtime environment is here — VNO. At its core, VNO is an adapter that parses one or more Vue component files and compiles and bundling them into Javascript files for browsers to read and render.

Vno is what

  __    ___ __   ___
  \\ \\ / / '_ \\ / _ \\
   \\ V /| | | | (_) |
    \\_/ |_| |_|\\___/
Copy the code

Deno is a Javascript /TypeScript runtime that executes code in a secure environment by default and has an excellent development experience. What kind of spark can Vue and Deno have? So there were developers in the community who built this wheel in the denO runtime using the VUE framework — vNO.

The VNO module provides functionality equivalent to create-Vue applications by using some simple CLI commands. Vno Create lowers the barrier to using Vue in a Deno environment. After defining the relative path of the root component, VNO recursively traverses the file structure, finds all.vue files, and then begins the parsing process. During the parsing operation, individual labels for each component are isolated and stored, and all necessary connections between files are taken into account to ensure that they are built in the correct order. After vno build, you will see the folder created by vno-build, which includes a build.js file and a style.css file. Vno run Dev will dynamically start the server to run the new version and run the application.

How do I use VNO

  • The CLI commands mentioned above require us to install vNO: 
    deno install --allow-net --allow-read --allow-write --unstable https://deno.land/x/vno/install/vno.ts
Copy the code

  • Of course, you can also use it directly, for example:

    deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts --help
Copy the code

  • Create a new project with vNO:

    vno create [project name]
# or
deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts create [project name]
Copy the code

  • Switch to the project path and build the project:

    cd [project name]

vno build
# or
deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts build
Copy the code

  • Run a simple development server:

    vno run dev
# or
deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts run dev
Copy the code

In addition to the above operations, we can also use the vno configuration file vno.config.json to add server attributes to the configuration file, such as:

{
  "root": "App"."entry": "./path/to/rootcomponent"."options": {
    "title": "an example application"
    "port": 4040
  },
  "server": "./path/to/server.ts"
}
Copy the code

The service is then run by executing vno Run Server.

unexpected

As usual, as Copy siege lion, I thought casually can use the new plug-in, the result I reported an error in the installation, and then do not install the use is also the case, energy is limited temporarily put in the future to see, also please big guy to give advice, may be my environment problem.

A brief look at the source command file, as of 2021-01-12, Copy siege lion this big lion learned that vNO temporarily has the following instructions:

# create project
vno create

# Build the project
vno build

Run the development service
vno run dev

# run service
vno run server

# View help
vno --help

Print module-specific information
vno --info

Copy the code

Overall, vNO is still in its infancy and is a new level project, with its first commit just a month ago. If you want to build your own Deno CLI tool, vNO is a great project to get your feet wet with.

Today to this first, I hope this article can inspire you!