Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the differences between the construction tools of Vue.js". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. precondition

This tutorial assumes that the reader has the following conditions:

Node.js 10x or later

Yarn or NPM installed

The basics of JavaScript and how the framework works

Basic knowledge of Vue.js

two。 Scaffolding tool

Scaffolding tools are abstractions based on some build tools, the most important of which is the development of server / module bundles that eliminate the hassle of configuring and using build tools.

Scaffolding tools can help you create new projects dynamically, so you don't have to worry about configuration.

Scaffolding tools also include configuration options for projects, the ability to save configuration presets for future projects, and mechanisms to upgrade project dependencies built using them.

The tools available for scaffolding applications and libraries in the Vue community we will compare are:

Vite

Vue CLI

Poi

Bili

3. What is Vite?

Vite, originally a development server for Vue single-file components (SFC), is an unbundled JavaScript development server imported using native ES modules.

Create-vite-app is a template for booting new Vite projects. With create-vit-app, you don't have to install the Vue package, because it is bundled with Vue as the default initiator, and you can install dependencies for other applications. Create-vite-app also supports other frameworks, such as React and Preact. You can also use the-template flag to configure the template you want to use.

It is important to note that Vite is still in the experimental stage and efforts are being made to make it suitable for production. It is best not to use it on critical projects until it becomes stable.

Vite is not yet backward compatible, so it does not support any version of Vue.js other than Vue 2.

Vite includes an incredibly fast hot module replacement (HMR), your file changes will be reflected in the browser almost immediately, it also has out-of-the-box support for TypeScript,.tsx and .jsx files, porting using esbuild, CSS preprocessor, PostCSS and CSS modules.

Other features of Vite include:

Asset URL processing

Support for CSS preprocessor, PostCSS and CSS modules

Support for mode options and environment variables

Expand the default values with vite.config.js or vite.config.ts files in the base/root directory of the project or in the current working directory

Support plug-in

Support for custom file conversion

You can read more about Vite here.

4. What is Vue CLI?

Vue CLI is the official Vue.js scaffolding tool built on Webpack for projects, which avoids the hassle of developers configuring and setting up the build process for the project. It provides an organized code structure and helps you choose the tools you need in your application, while it is responsible for configuration and allows you to focus on writing code that supports the project.

It also has off-the-shelf support for Babel,TypeScript,ESLint,PostCSS and CSS preprocessors, progressive Web applications (PWA), unit testing and end-to-end testing. It also has a plug-in-based extensible architecture that allows developers to build, share, and use plug-ins to solve specific problems.

You can also use Vue Router to add routes and Vuex to add state management during the scaffolding of the project, and hot module replacement (HMR) can be used right out of the box. Other noteworthy features are:

Support for patterns and environment variables

Use vue.config.js or vue.config.ts configuration files to modify the default webpack configuration to achieve scalability.

A graphical user interface for developers who like to use GUI

5. What is Poi?

Poi is a zero-configuration bundling program based on webpack that aims to make webpack development and bundling applications as simple as possible by using pre-configured presets. Poi is framework independent and can be used with any JavaScript framework. Poi optimizes performance and speeds up the loading of applications by reducing and processing code.

Poi is more suitable for building Web applications.

Create Poi App is a scaffolding tool for interactively creating new Poi projects.

Poi provides a great development experience, as well as an option to extend applications with configuration files.

It also has some noteworthy features, such as:

Off-the-shelf support for JS,CSS, document assets, etc.

Poi is framework independent

No configuration is required to support JSX,Vue, etc.

Use plug-ins to extend functionality

6. What is Bili?

Bili is described in its official documentation as a delightful library bundler.

Bili is a Rollup alternative to Poi. It is a zero-configuration bundler built on Rollup. It makes development settings easy and is more suitable for building libraries than Web applications.

The author of the Bili help library bundles the library into several JavaScript formats, such as CommonJS,UMD and ES modules.

Note: Bili does not have CLI interactive shell.

The tool provides both command line and Node.js API, so developers can choose the approach that best suits their use cases. It is future-oriented, because it is ported by Babel using babel-preset-env and babel-preset-typescript, so you are free to use modern JavaScript features, some of which, as stated in its documentation, include:

Fast, default is zero configuration

Use Rollup under the hood

Use Buble/Babel/TypeScript to automatically convert JS files

Built-in support for CSS, Sass, Stylus, Less and CSS modules

Use the Rollup plug-in to extend functionality

Friendly error logging experience

Automatically generated API documents written in TypeScript

7. Installation and use

7.1 Vue CLI

Start using the Vue CLI tool and install the CLI tool using one of the following commands:

Npm install-g @ vue/cli # OR yarn global add @ vue/cli

After installing the CLI package globally, we can access the vue command in the terminal, and the vue create command can help us create a new project.

Next, create a new project using the vue create command:

Vue create testing-vue-cli

I use the name "testing-vue-cli" as the project name for this tutorial, which can be replaced by any name you think is appropriate.

Running this command gives you an interactive scaffolding experience, you can choose the package your application needs, or you can decide to save the configuration as a default for future projects.

Next, change the directory to your project folder:

Cd testing-vue-cli

Service your application by running one of these commands.

Yarn serve # or npm run serve

After running the following command, your application should run on http://localhost:8080 by default:

7.2 Vite

Run the following command to create a new Vite application using the template:

Npx create-vite-app testing-vite # OR yarn create vite-app testing-vite

Now, use the following command to go to the project directory you created:

Cd testing-vite

Then continue to install the necessary software packages needed for our project to function properly:

Npm install # OR yarn

You can then start the development server in the browser by running the following command:

Npm run dev # OR yarn dev

After running the dev command, you should get something similar to this on http://localhost:3000:

7.3 create a Poi application

To start using Poi to boot your project, first install the create Poi application CLI tool:

Yarn global add create-poi-app # OR npm I-g create-poi-app

This command allows creat-poi-app to be used globally, and now you can use the cpa command to create a new project.

Create a new project using the following command:

Cpa testing-poi

Running this command will give you a shell and you can decide which tools to include in your project.

Next, use the following command to go to your project directory:

Cd testing-poi

Continue to install Vue, as well as install the Vue template compiler, which, as a development dependency, compiles the template into a rendering function.

Yarn add vue & & yarn add vue-template-compiler-- dev

Open the index.js file located in src Explorer and add the following:

Import Vue from 'vue' import App from'. / App.vue' new Vue ({el: "# app", render: h = > h (App)})

Next, create an App.vue file in the src folder and add the following:

Helloooo

You can now run the development server in the browser by running the following command:

Yarn dev

After running the development command, you should get a result similar to this on http://localhost:4000:

7.4 Bili

To boot your Vue project using Bili, first create a new directory for the project:

Mkdir testing-bili

Change the working directory to the folder you created:

Cd testing-bili

Then initialize a new package.json file in the directory using the following command:

Npm init-y or using Yarn yarn init-y

Next, install Bili as a development dependency:

Yarn add bili-dev

Next, install the Vue and Vue template compilers:

Yarn add vue & & yarn add vue-template-compiler-- dev

Add an entry file to your project by replacing the value of main in package.json with the following:

Main: ". / dist/index.js"

Next, install Rollup plugin for Vue so that you can bundle a single file component with Bili:

Yarn add rollup-plugin-vue@5.1.5

Then configure your npm script to run your project using Bili and add the following to the package.json file:

"scripts": {"build": "bili App.vue-- plugin.vue"}

Next, create an App.vue file and add the following:

Hello export default {name: 'App'} H2 {color: red}

Next, create a bili.config.js file and add the following code:

Const vue = require ('rollup-plugin-vue'); module.exports = {input:' App.vue', format: ['umd-min'], plugins: {vue: true}, outDir:' dist'}

You can then build the project using the following command:

Yarn build

The compiled file should be in the dist folder of the project.

8. Ease of use and plug-ins

One of the advantages of Vue CLI is that it has a wide range of plug-ins that can be used for almost any purpose, which makes it easy to extend the functionality of your project using third-party plug-ins or by building your own plug-ins.

Although all four libraries can be built to achieve almost similar results, Vue CLI and Poi documents are of almost the same standard, while Vite currently does not have complete documentation. Vite is still under active development, and people need to read the documentation section of the library's code base to perform some advanced operations. On the other hand, Bili's documentation is naked, and a new user may get confused (as I do when I read it) and encounter errors when trying to use it in a Vue project.

Vue CLI is a tool recommended by the Vue.js team, making it the default choice for many developers.

9. Community

Although a relatively new library, Vite has accumulated 9.1k stars, is used by 755 warehouses, has 54 contributors, and has 5863 weekly downloads on NPM.

Poi has 5k stars on GitHub, 57 contributors on GitHub, and 1760 downloads on NPM every week:

Vue CLI has the highest statistics on NPM, with 24236 downloads per week, and is used by more than 400000 warehouses, with 370 contributors and 25.9 stars on GitHub.

Bili manages 878 stars on GitHub, which is used by 1529 warehouses and has 20 warehouse contributors.

This is the end of the content of "what are the differences between the building tools of Vue.js". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.