1、 What is? vue-cli

  • vue-cli An official scaffold , Used to quickly generate a vue Project template
  • Predefined directory structure and basic code , It's like we're creating Maven Project, you can choose to create a skeleton project , The estimated project is scaffolding , Our development is faster ;

The main function

  • Unified directory structure
  • Local debugging
  • Thermal deployment
  • unit testing
  • Integrated packaging Online

2、 The environment needed

install nodejs:

  • Node.js:http://nodejs.cn/download/
    Installation is the next step of mindless , Install in your own environment directory

  • Git:https://git-scm.com/doenloads

  • Mirror image :https://npm.taobao.org/mirrors/git-for-windows/

  • cmd The input node -v, Check whether the publication number can be printed correctly !

  • cmd The input npm -v, Check whether the publication number can be printed correctly !

    • This npm, It's a package management tool , Just like linux Under the apt Software installation is pretty much the same !

install Node.js Taobao image Accelerator (cnpm)

# -g  It's a global installation 
npm install cnpm -g

#  Or use the following statement to solve npm The problem of slow speed 
npm install -g cnpm --registry=https://registry.npm.taobao.org

The installation process may be a bit slow ~, Wait patiently ! Although it has installed cnpm, But try to use as little as possible !
   Installation location

  • Default :C:\Users\administrator\AppData\Roaming\npm

  • After I changed the route :D:\Program Files\nodejs\node_global\node_modules

     Insert picture description here

install vue-cli

cnpm instal1 vue-cli -g# Test for successful installation # See which templates you can create vue Applications , Usually we choose webpackvue-list

3、 first vue-cli Applications

1. Create a Vue project , Let's just create an empty folder on the computer , I'm here D Create a new directory under the disk

D:\Project\vue-study;

2. Create one based on webpack Template vue Applications

#1、 First, you need to go to the corresponding directory  cd D:\Project\vue-study#2、 there myvue Is the name of the top day , You can name it according to your own needs vue init webpack myvue

All the way no that will do ;
explain :

  • Project name: Project name , By default, you can return
  • Project description: Project description , By default, you can return
  • Author: Project the author , By default, you can return
  • Install vue-router: Whether to install vue-router, choice n Not to install ( Later, you need to add it manually )
  • Use ESLint to lint your code: Whether to use ESLint Do code checking , choice n Not to install ( Later, you need to add it manually )
  • Set up unit tests: Unit test related , choice n Not to install ( Later, you need to add it manually )
  • Setupe2etests with Nightwatch: Unit test related , choice n Not to install ( Later, you need to add it manually )
  • Should we run npm install for you after the,project has been created: Initialize directly after creation , choice n, Let's do it manually ; Running results !

 Insert picture description here

initialization

cd myvue
npm install

 Insert picture description here

function

npm run dev

 Insert picture description here

 Insert picture description here

After execution , The directory has a lot more dependencies

 Insert picture description here

reminder : When something goes wrong , You can view the prompt and handle it as follows