A quick article to get started - Vue CLI scaffolding

Installing the Vue CLI

(1) Install Vue CLI globally

Way 1 (recommended): Install the specified version on the terminal

npm i @vue/[email protected] -g

Note: Currently 5.0.8 should be the latest version.

Way 2: Install the latest version by command in the terminal

npm i @vue/cli -g

(2) Upgrade Vue CLI to the latest version (optional)

npm update @vue/cli -g

(3) Create a project using the vue command

Name of the vue create project

(4) After installing the Vue CLI, you can check its version number in the terminal.

vue --version

Results:

@vue/cli 5.0.8

Vue CLI New Project

Pre-installation in the VS Code toolVolarplug-in for thevue3versions.vueDocumentation provides support for syntax highlighting, etc.

Step 1: Use the vue command in the Vue CLI to create a new file named01_vuecli_demoof the Vue3 version of the project.

Enter the command:

vue create 01_vuecli_demo

The following three presets provided by default with the Vue CLI scaffolding appear.

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

• (1) Default ([Vue 3] babel, eslint): create a new vue3 default project, the project integrates babel, eslint plugin
• (2) Default ([Vue 2] babel, eslint): create a new vue2 default project, the project integrates babel, eslint plugin
• (3) Manually select features: new project, manually select the features required for the project, such as whether the need for babel and eslint plug-ins

Step 2:Manually select the desired function.

Select the appropriate function as required.

Tips: "Select" and "Unselect" is to press the space bar, "Move up and down" is to press the up and down keys, "Confirm" is to press the Enter key. and "Confirm" by pressing the Enter key.

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Description:

• babel: whether to use Babel as JavaScript compiler, combined with plug-ins to convert ES6/7/8/9/10, etc. syntax to ES5 syntax.
• TypeScript: Whether to use TypeScript.
• Progressive Web App (PWA) Support: Whether or not PWAs are supported. PWAs are progressive web apps - a type of web app that requires no installation and offers the same user experience benefits as native apps.
• Router: whether to integrate routing by default.
• Vuex: whether to integrate Vuex state management by default. vuex is used to share data across multiple components.
• CSS Pre-processors: whether or not to choose CSS preprocessors, that is, the commonly used Less, Scss, Stylus preprocessors.
• Linter / Formatter: Whether or not to select Eslint for formatting restrictions on the code.
• Unit Testing: Whether to add unit testing.
• E2E Testing: Whether to add E2E testing.

Step 3: Select the version.

Select the vue version as needed, here is an example of selecting a version.

Step 4: Select the location where the configuration is stored.

 In dedicated config files
 In 

Selecting "In dedicated config files" here means that the configuration information for babel, eslint, etc. will be unified into their own dedicated config files, instead of being placed into theDocumentation.

Step 5: Whether to save as a custom preset.

Save this as a preset for future projects? (y/N)

Enter y to save a customized preset, or enter n to not save a customized preset.

If you save the preset, when you create a new project next time, you can see the preset we saved when you select the preset in the first step, for example, we name the preset as "vue3-demo", and press "Enter" at last.

Step 6: New creation successful prompt.

 $ cd 01_vuecli_demo
 $ npm run serve

3 Project catalog structure

01_vuecli_demo/ project_name
|-- node_modules #Store third-party dependencies (e.g., those installed by npm i).
|-- public/ #Static resource directory
| |-- #site icon
| |-- #Project entry files
||-- src/ #Source code directory of the project.
| |- assets/ #Static resources directory, such as images, fonts, etc.
| |-- components/ #reusable Vue components
| |-- router/ #Routing configuration for Vue Router
| |-- components/ #Reusable Vue components | |-- router/ #Vue Router's routing configuration
| |-- store/ #State management for Vuex
| |-- store/ #Vuex state management
| |-- views/ #Pages directory
| |-- #About page
| |-- #Home page
| |-- #Root Component
| |-- #Project entry file
||- .browserslistrc #Browserslist configuration for Autoprefixer and other tools to determine the target browser and version range.
|-- .eslintignore #Files ignored by ESLint
|-- .         #ESLint configuration
|-- .gitignore #Files ignored by Git
|-- #Configuration files for the Babel plugin.
|-- #Locked files for npm dependencies
|-- #Project metadata files and npm scripts
|-- #Description files for the project
|-- #Vue CLI configuration files, such as configure alias, devServer, and configure Webpack.

Running and packaging the project

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

file parsing

• : Used to specify the filename of the packaged output, the default is the dist directory. If you want to change the directory name, you can use outputDir configuration.

 = {
  outputDir: 'build'
}

For projects created using the Vue CLI, the use of the defineConfig macro function is also supported for better code intelligence hints, sample code is as follows:

// The defineConfig macro only supports the Vue CLI.
const { defineConfig } = require('@vue/cli-service')
 = defineConfig({
  transpileDependencies: true, // if true, then the project's references to packages in node_modules will also be compiled with Babel, otherwise they will not be compiled
  outputDir: 'build'
})

• : Used to specify the static resource storage directory. This attribute is relative to the outputDir path.

 = {
  outputDir: 'build',
  assetsDir: 'static'
}

After compilation, the resource references are as follows:

<script defer="defer" src="/static/js/chunk-vendors."></script>
<script defer="defer" src="/static/js/app."></script>
<link href="/static/css/app." rel="stylesheet">

• : Used to specify the prefix of the referenced resource.

// The defineConfig macro only supports the Vue CLI.
const { defineConfig } = require('@vue/cli-service')
 = defineConfig({
  transpileDependencies: true, // if true, then packages in node_modules referenced by the project will also be compiled with Babel, otherwise they will not be compiled
  outputDir: 'build', // if true, then the project's references to node_modules will also be compiled with Babel, otherwise they will not be compiled.
  assetsDir: 'static', publicPath: '.
  publicPath: '. /'
})

When the above relative path configuration is done, in the code is as follows:

<script defer="defer" src="static/js/chunk-vendors."></script>
<script defer="defer" src="static/js/app."></script>
<link href="static/css/app." rel="stylesheet">

• : Alias used to configure the path of the guide package.
  For example, when a project has a deep directory structure, configuring a path alias improves code readability and maintainability.

const path = require('path');
function resolve (dir) {
  return (__dirname, dir);
}


// defineConfig Macro functions are only supported Vue CLI
const { defineConfig } = require('@vue/cli-service')
 = defineConfig({
  transpileDependencies: true, // if you choosetrue,Then the project referencesnode_modulesThe packages in theBabelto compile,Otherwise it won't compile
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './',
  chainWebpack: (config) => {
    
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
})

existvuejs 3The project can be found in thein the filechainWebpackConfiguration on Propertiesalias。chainWebpack is a function that will receive a function based on thewebpack-chain(used form a nominal expression)configinstance, which allows for thewebpackconfiguration for more granular changes.

After the above configuration is complete, for example, the introduction of the HelloWorld component can be adjusted to the following two ways:

import HelloWorld from 'components/'
import HelloWorld from '@/components/'

• :: Service configuration of the development environment

possesswebpack-dev-serveroptions are supported. Caution:

• Some values like host, port, and https may be overridden by command line arguments.
• Some values like publicPath and historyApiFallback should not be modified because they need to be synchronized with the development server's publicPath for proper operation.

Example:

const { defineConfig } = require("@vue/cli-service");
 = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    port: 8083,
    open: true,
    proxy: {},
  },
});