Use Vue-cli 3.0 to build and start Vue projects

1. Introduction

Vue CLI is a complete system for rapid development based on Vue.js. There are three components:

CLI : @vue/cli A globally installed npm package that provides vue commands in the terminal (such as: vue create, vue serve, vue ui, etc.)

CLI service : @vue/cli-serviceis a development environment dependency. Built on top of webpack and webpack-dev-server (provides eg: , serveand build commands  inspect )

CLI plugins : npm packages that provide optional functionality to Vue projects (e.g. Babel/TypeScript transpilation, ESLint integration, unit and e2e testing, etc.)

2. Installation

Note: Vue CLI 3 requires nodeJs ≥ 8.9. Download and install nodeJs, Chinese official download address: http://nodejs.cn/download/ 

         Install @vue/cli (the package name of Vue CLI 3  vue-cli has been changed  @vue/cli)

Installation steps: (the prerequisite is to install the nodejs environment first)

1. If the old version  vue-cli(1.x or 2.x) has been installed globally, it must be uninstalled first, otherwise skip this step:

  npm uninstall vue-cli -g 

2、
1 cnpm install -g @vue/cli //yarn global add @vue/cli

　　vue -V check vue version number

2. nrm installation and npm registry settings

npm i nrm -g

   View available npm sources

nrm ls

    Use Taobao

// 用法： nrm use ***
nrm use taobao
// 切换之后可用 nrm ls查看是否已经切换了npm源

3. Install yarn

npm i yarn -g

4. Install vue-cli3.0

//使用cnpm,淘宝镜像
// https://developer.aliyun.com/mirror/NPM?from=tnpm
//如果没有安装该镜像，则使用如下命令：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org


cnpm i @vue/cli -g （推荐）

或者：
npm i @vue/cli -g 

5. Wait for the installation to complete. Check out the vue version. Type: vue -V  

         

6. In the directory of the self-defined engineering project, enter vue ui. For example:

        

   Wait for the browser to automatically jump into the access: as follows

        

7. Quickly create projects

    

     Enter the project name, then the next step.

       

    Select as needed, and then click the next step.

               

        Select Router, Vuex, etc.,

         

             

      Finally, click on the project, and then the project will be found under the path of the project.

     

     The last is to run.