Vue-cli 3.0 Introduction

Environmental installation

New version of scaffolding, force grid is not always high, remember the name @vue/cli, right is this you NPM or YARN installed on the line, first make sure the global environment has it.


   npm install -g @vue/cli

   yarn add global @vue/cli
Copy the code

Create a project

In contrast to previous versions of 2.x, plugins and templates are ported to the command line interface.

The old version Create a command
2.x vue init <template-name> <project-name>
3.x vue create <project-name>

For an image, there are already several default templates, but let’s go with Manually select features

Vue - cli3.0There will be a function to save the current configuration after you create it

Configure project plug-ins and functions

This is pretty silly, you just choose what you want to integrate. Let me pick one that I use a lot.

  • TypeScript
  • PWA
  • Vue-router
  • Vuex
  • CSS pretreatment
  • eslint prettier
  • Automated test unit testing, E2E

I’m going to go with LESS

Here I chooseeslint + prettier

I’m going to use the syntax check mode to save or to check at fix and commit, so I’m going to default to the first one

I’ll pick the unit test plug-in herejest

Here’s where to put configuration files like Babel, postCSS, esLint

  1. Separate file placement
  2. putpackage.jsonIn the

Personal preference and I’ll put it on my own

And then the final choice is do I record it? Next time continue to use this configuration, here I will not save this play, I do not know how to delete know little brother little sister please tell me next ha.

Ok, wait for the installation after the final confirmation

Whoosh installed

Start the project

  1. Go to the directory and start the project herevue-cli 3.xBy default the browser will open and the address will be on the console.
   
   yarn serve 
   // OR
   npm run serveCopy the code

After the start of the interface is not screenshots, according to the steps of normal operation should be the same as the previous version.

Project analysis

First, the overall directory is much leaner than it was before 2.x

X build and config directories are removed and most of the configuration is integrated into vue.config.js

The vue. Config. Js


This includes configuration of common output pathnames, directories, preprocessing, devServer configuration, PWA, DLLS, third party plug-ins, and so on


See the official documentation for details
Detailed Config Configuration

How to follow your heart

1. Modify the server configuration

Here I first change the port, modify vue.config.js and then restart the project, you can see that the port has been changed to 5999

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 5999
  }
}Copy the code

2. Modify common WebPack configurations

ConfigureWebpack configureWebpack is modified in this property

Plugins can also be extended by themselves, especially if they are large enough to encapsulate common ones.

ConfigureWebpack = configureWebpack = configureWebpack config => { if (process.env.NODE_ENV === 'development') { config.devtool = 'source-map' // mutate config for production... }}Copy the code

The rest of the configuration is not covered in detail. See webPack here

3. Set global variables

Create two files in the project root directory

.env.development

.env.production

Configure key value pairs inside the line

But you have to be careful here
VUE_APPAt the beginning

This way we can customize global variables in a particular schema

    VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'Copy the code

For example, you can configure the root path in AXIOS


const service = axios.create({
    baseURL: process.env.VUE_APP_MOCK_URL
})
Copy the code

conclusion

This article uses vuE-CLI3. x from the environment, to create, to configure, and common project skills for a brief introduction, hope to help those who are just using.

References Github