一、首先安装nodejs
到nodejs官网下载最新的长期支持版，地址：Node.js (nodejs.org)
安装好之后打开命令行，输入node -v应该可以查看到安装的nodejs版本号，输入npm -v可以查看到npm工具的版本。
二、安装Vue-cli脚手架
vue-cli和vue是什么关系呢，为什么要安装它呢。vue-cli是vue官方出品的一个快速搭建vue项目的构建工具，提供了一些常用的功能和配置，比如修改代码自动热重启，保存时eslint校验，webpack的常用配置等，并且支持图形化界面管理项目。刚开始学习时直接使用vue-cli来快速搭建项目，可以尽快开始开发。Vue CLI (vuejs.org)
目前官网提供的vue-cli版本是4.x，使用npm install -g来全局安装它
npm install -g @vue/cli
安装完成之后，就可以使用vue --version来查看你安装的版本
PS D:\workspace> vue --version
@vue/cli 4.5.8
如果需要更新版本，直接使用update命令就可以升级你安装的cli版本
npm update -g @vue/cli
三、创建一个vue项目
由于上一步已经安装了vue-cli，我们就可以使用全局的vue命令来搭建一个项目。根据官方的创建步骤：创建一个项目 | Vue CLI (vuejs.org)
PS D:\workspace> vue create demo //创建一个demo项目
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: (Use arrow keys)
> vue_shop_preset ([Vue 2] babel, router, eslint)
ipmanage_vue2.x_esLint ([Vue 2] babel, router, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
提示我的vue-cli工具可以升级到4.5.13，不管它。按键盘的上、下箭头，选择Manually selete features，手工选择项目需要的插件。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
>(*) Router
(*) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
此处选择我们需要的babel，Router，Vuex，Linter，按回车确认。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
选择项目使用的vue版本，此处我们选择2.x，即vue 2.x的版本。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
由于我们选择了Router，因此询问我们Router的配置是使用history模式还是hash模式，这里我们输入n选择hash模式
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
ESLint选择第一个就可以了。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
保存时使用Lint校验代码格式。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
这里选择In dedicated config files，每一个插件都使用单独的配置文件。
Vue CLI v4.5.8
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.8 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
是否将以上的选项保存为一份预设，方便下次创建项目直接使用这次的配置，根据你的需要选择即可。
回车之后，就自动开始安装vue 2.x的最新版本，以及刚才选择的插件等等。
安装完成之后，打开你的项目目录，使用npm run serve即可启动项目。
$ cd demo
$ npm run serve
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)