Vue-cli creates a project and analyzes the project structure

In the previous article, we installed vue-cli cli. Next, we will use the scaffolding to create a project.

1. Enter a directory and create a project

The command to create a project is as follows:

vue create <Project Name> //The file name does not support camel case (including uppercase letters)

After entering the command, you will be asked to select a preset

We can see that there are 3 options by default:

• The default preset includes basic Babel + ESLint settings (Vue2 version)
• The default preset includes basic Babel + ESLint settings (Vue3 version)
• Manually select features is a custom configuration
  

We choose the third custom configuration

2. Select the configuration item you need

Then we will jump to the configuration items. My custom configuration is as follows:

The specific explanation is as follows:

 ◉ Choose Vue version // Choose the version of Vue◉ Babel // Transcoder, which can convert ES6 code into ES5 code so that it can be executed in the existing environment. 
 ◯ TypeScript // TypeScript is a superset of JavaScript (suffix .js) (suffix .ts) that includes and extends the syntax of JavaScript and needs to be compiled and output as JavaScript to run in the browser ◯ Progressive Web App (PWA) Support // Progressive Web Application ◉ Router // vue-router (vue routing)
 ◉ Vuex // vuex (vue's state management mode)
 ◉ CSS Pre-processors // CSS preprocessors (such as less, sass)
 ◉ Linter / Formatter // Code style checking and formatting (such as ESlint)
 ◯ Unit Testing
 ◯ E2E Testing

After the configuration is selected, we press Enter to proceed to the next step

2.1 Choose Vue version

Next we need to select the vue version, here we choose vue2.x version

After making your selection, press Enter to continue.

2.2 Choose whether to use history router

Then we will be asked whether to use history router . In fact, it is straightforward to say whether the path has # 號. It is recommended to choose n , otherwise the server needs to be configured

2.3 Choosing a CSS preprocessor

The css preprocessor I chose is Sass/SCSS (with dart-sass). node-sass is automatically compiled in real time, dart-sass needs to be saved before it takes effect

2.4 Select Eslint code validation rules

Then select the ESLint code verification rule, which provides a plug-in javascript code detection tool. ESLint + Prettier is used more often.

2.5 Choose when to perform code rule checking

Then let you choose when to perform code rule detection:

( ) Lint on save // ​​Check when saving ( ) Lint and fix on commit // Check when fixing and committing

It is recommended to test after saving. By the time commit , many problems may have accumulated.

2.6 Choose how to store the configuration

Next, choose whether to store some configuration files in separate files or store them all in package.json . We recommend the first one.

> In dedicated config files // Independent file placement In package.json // Put in package.json

2.7 Save the current configuration

Finally, choose whether to save the configuration you just selected so that you don’t need to re-select them one by one when you create other projects next time. If we choose y here, we will be asked to enter the name of the saved configuration information.

So after we save, to which folder is the configuration saved?

Answer: It is placed in the .vuerc file in our user directory. We switch to the user directory and use the command cat .vuerc.

The configuration information is as follows:

{
  "useTaobaoRegistry": true,
  "latestVersion": "4.5.13",
  "lastChecked": 1626320210348,
  "presets": {
    "testVueCli": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "dart-sass"
    }
  }
}% 

Here is the configuration information we just set. If we want to delete the configuration, just delete the information in presets.

3. Project configuration diagram

Here is a picture of all the options we just filled in.

4. Project creation completed

Finally, the following successfully in the red box means that we have successfully created the project through vue-cli scaffolding.

5. Enter npm run serve to start the project

After the project is created, the project directory is as follows:

We go directly into package.json , click the start button on the left of serve , click run serve , webstorm will automatically start the project for us

After the startup is complete, the console will display the following screen

If we click http://localhost:8080/, we will see the homepage on the web page.

6. Project structure analysis

After we create the project, we must know the overall structure of the project and what each folder and file of the project does. Next, we will introduce the project structure configuration in detail:

Project structure configuration:

node_modules

It contains various environment dependency packages required by the project

public

public folder stores a website tag favicon.ico and index homepage. When packaging in the future, these files will be packaged intact into dist folder.

src

The source code we wrote on the front end will be in this folder

.browserslistrc

This file is some configuration for the browser. The contents of the file are as follows

> 1%
last 2 versions
not dead

Generally no modification is required

.eslintrc.js

Code style detection. If we configure some code rules in it, when we write code and there is code that does not conform to the rules, an error will be reported during compilation

.gitignore

This file is used to ignore certain files when uploading using git . The content is as follows:

Dockerfile
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

If you upload the entire project to the git server, the files with the above suffixes will not be uploaded.

bable.config.js

The file that configures bable is generally not modified

package.json

The configuration of the entire project package is included here, including the startup project command, etc.

This is the end of this article about vue-cli project creation and project structure analysis. For more relevant vue-cli project creation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!