Vue cli – 3.0

Environmental installation

Brand new version of scaffolding, forcing a high, remember the name @vue/cli


   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
3.x vue create

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

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 serve
Copy the code

Project analysis

The overall catalog 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

Vue. Config. js probably includes the configuration of common output pathnames, directories, preprocessing, devServer configuration, PWA, DLL, third-party plug-ins, etc. For details, please refer to the official documentation of config configuration

Flexible configuration

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 = configureWebpackconfig= > {
    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 note that you must start with VUE_APP

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

References