Initialize the project using vue-CLI

You can use vue-CLISet up Vue development environment quicklyAs well asCorresponding WebPack configuration

// Since it is very slow to use the official image of NPM directly in China, we recommend using taobao NPM image

// Taobao mirror installation:
npm install -g cnpm --registry=https://registry.npm.taobao.org

// Change to taobao image (can directly use NPM command, but the mirror address is Taobao, recommended)
npm config set registry https://registry.npm.taobao.org

// Check whether the mirror Settings are successful
npm get registry


// the CNPM command installs dependencies:
cnpm install name
Copy the code

1. Vue CLI Prerequisites: The CLI has been installedNode (global), –Webpack (Global)

2. Install Vue scaffolding:

cnpm install -g @vue/cli 
Copy the code

Note: If you want to initialize a project as Vue CLI2 does, you can install a bridge tool globally, so that you can use the initialization instructions of CLI2. You can use CLI3 and above initialization instructions again.

cnpm install -g @vue/cli-init
Copy the code

3. Initialize the Vue project

// Vue CLI2 initialization project:
vue init webpack <Project Name>  // The file name does not support hump (including uppercase letters)

// Vue CLI3 and later initialization project:
vue create <Project Name>  // The file name does not support hump (including uppercase letters)
Copy the code

4. Use less in Vue

// Vue failed to compile using less
// Cause: The version of less-Loader is too high
//     解决办法:
// (1) Uninstall the original less and less-loader
             npm uninstall less-loader 
             npm uninstall less 
 
// (2) Download the matching version
             npm install less@3.122. less-loader@4.1. 0 --save-dev
Copy the code