Vue development tools are getting better and better!

  • Vue UI: A First Look
  • Translator: Fundebug

The copyright of this article belongs to the original author

With the latest stable version of Vue CLI 3 about to be released, it’s time to see what’s new and interesting. Greatly improved based on feedback from the entire vue.js developer community, this release provides a number of workflow-centric tools.

One feature that I think will improve the productivity of every vue.js developer is the Vue UI. A visual graphical interface makes it easy to create, update, and manage all aspects of a project.

Today, I’ll walk you through the features available in the beta version of Vue UI.

start

First, we make sure we have the latest Vue CLI installed. Open Terminal and enter:

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

You can use -v to view the version you just installed:

vue -V
# should output the following result3.0.0 - rc. 3Copy the code

To initialize your Vue UI, type in a clean directory:

vue ui
Copy the code

This command will automatically open your browser. Make sure there are no other items in the current directory. The browser will display the following page:

By default, the Vue UI displays the first Tab, project Management, so you can easily view the currently created project.

Create your first project

To Create a new project, click the “Create” button in the middle:

The project creation tool lets you choose which directory to create in (just in case you want to create in a different directory); When the folder is selected, click on the “Create a new project here” button and a step-by-step guide will appear:

Select a directory for your project, choose your preferred project/package manager (NPM or YARN), and click “Next” :

Next, you’ll be asked to configure pre-install options; In most cases, the default configuration is sufficient. In this article as a guide, we choose manual configuration. Select “Maual” and click “Next” :

There are a lot of options to configure; Use Babel, TypeScript; Enable Vue components Vuex and Vue Router. Finally, depending on your choice, there is a corresponding additional library configuration:

I chose to use an ESLint and turn on unit testing, I chose to add Prettier and Jest to my tech stack, and automatically do Lint when I save/commit code.

Finally, clicking “Create Project” will remind you to save the current configuration and then Create the Project.

When the project is successfully created, the Vue UI displays all the plugins configured for the project:

Here, you can update plug-ins, install new ones, open Vue DevTools, and more.

Add the plug-in

Once your project is created, installing a new plug-in is very simple. Click “Add Plugin” and search for the Plugin you need:

You’ll find some plugins marked “Official”, so these are officially developed by vue.js.

Select the plugin you want and click the “Install” button:

Note that under the current version, you can only install one plug-in at a time. Depending on which plug-in you install, you may be asked to make some additional configuration related to that plug-in. Once installed, you can switch to the “Files Changed “page and choose to submit these code changes.

Finally, our newly installed plug-in is already in the list of installed plug-ins:

Configure your project

The Vue UI allows you to modify the configuration even after the project is created. Click on the second configuration icon on the left, and you can see the current configuration:

We can easily modify all the options. I suggest you read the documentation to see what can be changed.

Perform project tasks

Another useful feature is the Vue UI that lets you directly execute tasks defined in your project (NPM scripts). For example, we want to run the development version of the server:

The interface provides a lot of interesting technical details, such as package size, loading time hints, and details of how long each resource took to create. If you want more detailed information, click on the “Analyzer” option:

If you want to optimize the size of your application, you can use this tool to analyze which static resources are too large and can be reduced.

localization

Earlier, we installed the Vuei18n plug-in. When we have installed the plugin, an additional submenu provides us with the option to configure localization.

When we visit the localization configuration page, we will find that “English” is already the default configuration, and there is a default example of” Hello i18N!” . We localize all the text, and we need to choose which languages we want to support. First, click the “Add Locale “button:

In this example, we chose to add the French “fr”, and then we can translate all the English into the right French.

If we look at the code, we can see the corresponding code file:

As you can see, while still in Beta, the Vue UI will be a very useful tool.

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2018/07/10/…