“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

preface

This series of articles will take you from scratch to build a scaffolding project. And use Webpack to package and optimize the project. If the article has the inadequacy place, requests everybody to point out positively.

Words do not say, on dry goods ~~~~

Create the project using VUE-cli4

Before creating the VUE-CLI4 project, check whether the current computer has vuE-CLI installed. The vuE-CLI version number installed on my computer is version 2.6.3, so I need to upgrade the global VUe-CLI version. There’s a pit here. Uninstalling the global VUE-cli2 has no effect. If you cannot uninstall or update, you can add new system variables in the computer environment variables at the system variables.

Reset the default installation path of NPM:

// Set the NPM installation path prefix
npm config set prefix "D:\nodejs" 
// The cache path can be customized or not
npm config set cache "D:\nodejs\node_cache"
// Then uninstall vuE-cli2 again
npm uni vue-cli -g
// Clear the cache
npm cache clean --force
// Reinstall vuE-cli3
npm i -g @vue/cli
Copy the code

If the installation still fails, start the maximum method ~~~ uninstall Node.js, clean up the NPM and Node folders and install Node again.

After the installation is complete, we can take a look at the vuE-CLI version

// Windows command input
vue --version
Copy the code

Basic configuration at project creation time

Start creating project VUE-CLI4

Open CMD and enter the command

vue create 'Project Name'
Copy the code

If the following information is displayed, vuE-CLI installation is successful

If ‘Vue is not an internal or external command and is not a runnable program’

Then it is possible that your VUe-CLI is not globally installed. At this point you need to reinstall vue-CLI as the global version and I won’t go into too much detail here

At this point, the project has not been created, we still need to do some basic configuration of the project

  • Option 1 creates a project that contains only Babel and ESLint by default
  • Option 2 Customize the required function configuration

Option 1 only installs Babel and ESLint by default, which is obviously not enough. We chose option two: custom select configuration items

As you can see in the picture above, there are many options. Our current project uses Babel Router, Vuex CSS-Pre Linter, so we can choose to install these

Router Mode selection

If Router is selected, then it will let us choose whether or not to select the history mode of the Router

Here we choose to use history mode

Select the CSS preprocessor language

After selecting CSS preprocessing, there are three options

  • Option one uses Dart-sass
  • Option two uses Node-sass
  • Option 3: Use less
  • Option 4 Use the Stylus

Note: Dart-sass (not yet compiled SASS) and Node-sass (compiled Sass) are both Sass. Dart-sass is the primary implementation of SASS. Some of Sass’s new features are first verified by Dart-SASS. Then move on to other versions. Since DarT-SASS is an uncompiled and unstable version of SASS. Therefore, Node-sass is generally selected

All of the pre-processed CSS above actually work the same. The most used ones are Node-sass and Stylus. Here you can choose your favorite pre-processed CSS.

Eslint syntax verification

Selecting Linter will allow us to select the syntax configuration of Lint

  • Option one does error prevention only

  • Option two follows Airbnb’s syntax configuration

  • Option 3 EsLint standard syntax configuration

  • Option 4 uses this syntax configuration from Prettier, a front-end standardization of code management

We’ll choose the standard ESLint syntax here.

After the selection is complete, two options will be selected as follows:

// Check syntax when saving code
lint on save
// Check at fix and commit time
lint and fix on commit
Copy the code

Here we choose Lint on Save

The above figure shows whether the Babel and ESLint configuration files selected earlier are separate files or configured directly in package.json

To get more familiar with the project structure, we chose a separate configuration file.

After the selection, we will be asked if we want to save the current project configuration as the future preprocessing scheme. Here we can choose to save or choose not to save.

Basic project completed

The basic project configuration is now complete. Start building project directories and downloading various dependency packages.

If you see the above information, the project is successfully created.

The last

If the article has the inadequacy place, also invites everybody to criticize to point out.

Thank you for watching this article hope to give a 👍 comment collection three even! Your likes are my motivation to write.