VueCli+ElementUl environment construction

1. Install nodeJS

Both the front-end development framework and environment need node JS, install node JS development environment, the operation of vue depends on the npm management tool of node, attached node.js download address . After the installation is completed, open cmd and start entering commands.
After downloading the node, open the cmd management tool as an administrator, enter node -v, press enter, and check the node version number. If the version number appears, the installation is successful.

Enter the command: node -v

2. Install the global vue-cli scaffold

2.1 install Taobao image

[this setting is not recommended!] Since npm is foreign and slow to use, we can use the cnpm image of Taobao to install vue. Taobao's cnpm command management tool can replace the default npm management tool.

Enter the command: npm install -g cnpm --registry=https://registry.npm.taobao.org

Because the files pulled by cnpm command are different from npm, errors may be reported in the follow-up of the project if they are not unified. It is suggested that capable partners use npm on the Internet scientifically.

2.2 global installation vue-cli2

Execute the "NPM install Vue cli - G" command to install. Check whether the installation is successful. The terminal executes "vue -V" or "vue --version". If the specific version number is displayed, the installation is successful. See the specific installation method Official website.

Enter the command: NPM install Vue cli - G
Cnpm command: cnpm install -- global Vue cli

If cnpm is used, execute the "cnpm install -- global Vue cli" command to install.
In this process, you may encounter the following error reports
The solution is:

  1. Run power shell as Administrator
  2. Enter set executionpolicy remotesigned
  3. Enter A and enter

Then run the cnpm command and there will be no error.

2.3 global installation vue-cli3+

[recommended] execute the command "npm install @vue/cli -g" to install. Scaffold 2 and scaffold 3 + are different. If you have globally installed the old version of Vue cli (1. X or 2.x), you need to uninstall it through NPM uninstall Vue cli - G, and then execute "npm install @vue/cli -g" to install scaffold 3 +. See the specific differences between the two Official website.

Enter the command: npm install @vue/cli -g
Uninstall command: NPM uninstall Vue cli - G

3 create project directory and initialize vue project

3.1 command line creation

In view of the differences between vue-cli2 and vue-cli3 +, the project creation of vue-cli3 + is introduced in detail here.

vue-cli2 create project command: vue init webpack project name
vue-cli3 + create project command: vue create project name

1. Select configuration
Select the configuration according to the needs of the project. The spacebar is to select or cancel, and the A key is to select all.

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
// Check the functions required by the project: (press < space > to select, < a > to switch all, < I > to reverse the selection)
>( ) TypeScript                                 // Support writing source code using TypeScript
( ) Progressive Web App (PWA) Support          // PWA support
( ) Router                                     // Support Vue router
( ) Vuex                                       // Support vuex
( ) CSS Pre-processors                         // Support CSS preprocessor.
( ) Linter / Formatter                         // Support code style checking and formatting.
( ) Unit Testing                               // Support unit testing.
( ) E2E Testing  
  1. Select css preprocessor
    If you choose the Css preprocessor option, it will let you choose this.
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
// Select CSS preprocessor (PostCSS, Autoprefixer and CSS modules are supported by default):
> SCSS/SASS
 LESS
 Stylus    
  1. Whether to use the history mode of routing
    It is recommended to choose No here. In this way, it can be packaged and thrown into the server for direct use. If it needs to be used later, it can also be opened by itself. If yes is selected, it needs to be set at the server.
Use history mode for router? (Requires proper server setup for index fallback in production) 
// Use history mode for routing? (in the production environment, appropriate server settings are required for indexing)
  1. Select Eslint code validation rule
> ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier
  1. Select when to perform code rule detection
    It is recommended to select Save to detect. By the time of commit, many problems may have accumulated.
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // Detect on save
 ( ) Lint and fix on commit // Check during fix and commit
  1. Select e2e test
? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
 Nightwatch (Selenium-based) 
  1. Where are the configuration files babel,postcss,eslint
    Usually, we will choose to place the package independently JSON clean
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // Independent file placement
 In package.json // Put package JSON
  1. Save configuration
Save this as a preset for future projects? (Y/n) // Do you want to record it so that you can continue to use this set of configuration next time
// After selecting save, you will be asked to write a configuration name:
Save preset as:  name // Then the next time you enter the configuration, you can directly use your current configuration

3.2 creating with graphical interface

Open the graphical interface through the command vue ui (global command, which can be opened under any folder).
Then create the project step by step according to the graphical interface.

4 test items

After the initialization project is completed, go into the project directory. If vue-cli2 runs the project through the command "npm run dev", if vue-cli3 + tests whether the project can run normally through the command "npm run serve". If the access address pops up and there is no problem accessing the address through the browser, it means success.
Press Ctrl/Command + C to end the run, and then prepare to start installing elementUI.

vue-cli2 run command: npm run dev
vue-cli3 + run command: npm run serve

When running successfully, you can access the following page through the browser

5 install elementUI

Enter the project directory and execute the command: "NPM I element UI - s"

Enter the command: NPM I element UI - S

The successfully installed components are shown below

This completes the environment construction of Vue+elementUI. Open the project with your own IDE and start happy development.

Tags: node.js Vue.js elementUI

Posted by robinjohn on Tue, 10 May 2022 11:31:20 +0300