Vue UI Farewell Webpack configuration

Directory

• Vue UI Farewell Webpack configuration
  • Start the Experience
    • Create a project
  • Project Details
    • 1. Plugins
    • 2. Reliance
    • 3. Configuration
    • 4. Tasks
  • Summarize

Vue UI Farewell Webpack configuration

The candidate version of VUE-CLI 3.0 has also been released for a long while. The VUE-CLI 3.0 release provides us with a 创建、管理、分析 visual interface to the Vue UI, and mom doesn't have to worry about the configuration anymore ~ Let's have a taste of it ~

#安装最新版的vue-clinpm install -g @vue/cli#yarn/npm 安装（二选一） yarn global add @vue/cli#检查vue-cli版本vue -V#运行 vue uivue ui

Results:

Start the Experience

On the http://localhost:8000 page, we can see the following interface (I turned on "night mode", so it's a black background).

The Vue Project Manager provides three features:

1. Manage projects

2. Create a new project

3. Import a project that already exists

Create a project

First we try to create a project such as:

Click 在此创建新项目 to start a new project.

And the top of the address bar, can help us 选择根目录 , 新建文件夹 and also very handy 收藏功能 .

1. Create

Ask for the project name, select the package Manager, and have a very intimate 若目标文件夹已存在则将其覆盖 and often used git init . Here, I prefer yarn to manage dependency packages.

2. Preset items

The idea used here is 约定大于配置 to use a preset function. We can create a new Vue project in one click, or in a custom way, or even support a git remote preset. Basic can meet the common application scenarios.

3. Custom Functions

Here, we can customize the selection of functions we need to use. In addition to the business-related features that may be used in the project, vuex vue-router We can also select,,, and ccs预处理 eslint typescript test PWA Other functions related to this project. can help us reduce a lot of complex configurations. css预处理For example, we do not need to configure self-less-loader, Sass-loader, Stylus-loader.

4. Configuration

This step, we need to configure:

• Whether to use class-style syntax

• To TypeScript automatically selectpolyfill

• Use history routing or hash routing (hash routing is used by default, if the history route is used, the server needs to be configured accordingly)

• Select the use css预处理语言 : scss/sass , less ,stylus

• Select a code check or a formatted configuration: Tslint/eslint

• And when to execute lint

5. Complete

Click 创建项目 , we are prompted to save our configuration as a new preset scheme. To facilitate the next time we create directly.

Wait patiently for the installation to complete.

Project Details

After waiting for the installation to complete, it will automatically jump to the 项目管理页 page where we can see in detail what is being configured in the project. is mainly packages.json related to the configuration.

1. Plugins

Most of these are global plugins.

2. Reliance

Here, we can easily manage the dependencies related to the project, or you can delete the dependencies.

Click View Details to see the specific instructions for your dependencies.

3. Configuration

The configuration page here is basically the relevant content of the previous Config folder.

• BaseURL: The root directory of the app

• Output directory:build the generated directory

• Assets directory: Directories for static resources

• Enable runtime compiler: Allows template to be used in the component, but will therefore allow the app to load 10kb more.

• Enable Production source map: Using the JS source map in a production environment is easy to debug, but will affect the build speed.

• Parallel Compilation: Multithreaded parallel compilation Babel or Typescript.

• Enable CSS Modules: By default only *.module.[ext] files with the end will be considered CSS modules. Turn this on to allow you to delete module and treat all style files ( css|scss|sass|less|styl(us)? ) as CSS modules in the file name.

• Extract CSS: Whether to export CSS as a CSS file, rather than write inline in JS, and dynamic injection.在构建为Web组件时，默认情况下也会禁用此选项(样式内联并注入shadowRoot), 构建库时，您也可以将其设置为false，以避免用户自己导入CSS。

• Enable CSS source maps: Enabling the source map for CSS can affect build performance.

Click More to see the relevant help and details.

4. Task Serve development environment

Here's the corresponding task, corresponding to the package.json script script in.

The console can easily see the information of the single page application running, including the number of errors, number of warnings, static resource size, module size, and dependency size. Click on the top left corner 启动app to open the app in the browser.

Analysis capabilities that can help us analyze the size of code and modules. Generally in production mode, this problem will be considered.

Build production environment

Each function and serve similar in, it is obvious to see the compilation of files and the size of the non-compiled file gap.

Inspect review

In this mode, we can see the detailed webpack configuration.

Click on setting the icon, you can choose the development environment, production environment, test environment.

Summarize

The Vue UI provides a complete set of pages built for Vue projects. It retains the convenience of VUE-CLI, while also guaranteeing the freedom of webpack configuration.

For users using VUE-CLI, the friendliness is very high, with the entire functionality from build to management to optimization. Very friendly for developers. The page is also cool, with all the features just right.

Think More,code less

Vue UI Farewell Webpack configuration