本文书写日期为20201116，技术会存在更新迭代，查看本文请知悉
下载链接
选择稳定版本下载
中文官网下载稍有不同
这里我只说关键的几个地方，其他的都默认下一步安装就好。
更改安装位置
检查功能模块安装是否正常
自动安装功能选项不要勾选
一直next直到安装完毕
win+R输入cmd输入node -v和npm -v如果出现版本号即安装成功
虽然亲测这个方法可用，但未经过我长期测试是否有弊病，如果你c盘足够大，建议不要换位置。
在其他盘下新建一个文件夹，名字自己随意取（不能有中文）
打开cmd,输入下面命令
$ npm config set prefix "D:\NodeFile\Node_global"
$ npm config set cache "D:\NodeFile\Node_cache"
# Node_global与Node_cache可以创建可以不创建，命令执行成功后，会自动创建文件夹
安装express测试能否正常使用
$ npm install -g express
#输入命令
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
查看版本号
$ cnpm -v
#使用npm安装yarn
$ npm install -g yarn
#使用cnpm安装yarn
$ cnpm install -g yarn
查看版本号
yarn -version
3.1全局安装脚手架
# 使用yarn安装脚手架
$ yarn global add @vue/cli
#使用cnpm/npm安装脚手架
$ cnpm install -g @vue/cli
#npm 命令与cnpm相同，就不多写了
#如果你安装了旧版本需要卸载旧版本再安装(详细命令见官网)
$ yarn global remove vue-cli
$ npm uninstall -g vue-cli
# 这里建议使用cnpm或者yarn速度比较块
查看是否安装成功
# 注意V是大写
$ vue -V
打开想要创建的目录的上一级菜单，假如说你要创建的项目是d:/project/test，test是你的项目名，那么你打开d:/project即可，且不用创建test文件夹（在创建项目的时候会自动创建文件夹）；
shift+鼠标右键->在此处打开powershell窗口。这样我们就会发现终端的路径是我们刚打开的路径，我们在这个路径下创建项目
输入命令vue create 项目名
选择自定义
? Please pick a preset:
Default ([Vue 2] babel, eslint) //安装vue/cli2下默认babel,eslint
Default (Vue 3 Preview) ([Vue 3] babel, eslint) //安装vue/cli3下默认babel,eslint
> Manually select features //自定义
按需选择选项
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
( )choose vue version //选择vue版本
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// 支持使用 TypeScript 语法来编写代码
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router //vue 路由配置插件
( ) Vuex // vue 程序状态管理
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试
( ) E2E Testing // e2e（end to end） 测试
如果你需要选择较低版本的脚手架版本，就选第一项，后面会让你选择版本。
选择时快捷键：
空格选择或取消选择a全选i反选
最终选择如下（不一定跟我的一样，自己根据情况选取，不知道选什么的就选大众的 ）:
选择history,建议选否，官文上说，这个模式需要后台配置，为了防止麻烦，最好选n如果自己一个人前后端都做，就随意了。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
选择css 的预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass) //Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法完全兼容 CSS3且继承Sass功能
> Sass/SCSS (with node-sass)
Less//Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
Stylus ////Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。
百度了一波，选择了 Sass/SCSS(with dart-sass) 。搜到的结果都是：node-sass是自动编译实时的，dart-sass需要保存后才会生效,官网推荐dart-sass，其实我也没用出什么差别，欢迎告知。
选择插件化的javascript代码检测工具。
? Pick a linter / formatter config:
ESLint with error prevention only //仅用ESLint官网推荐的配置
ESLint + Airbnb config //ESLint+Airbnb第三方配置
ESLint + Standard config //ESLint+Standard第三方配置
> ESLint + Prettier //ESLint+prettier配置
选择ESLint代码校验规则
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save //保存就检查
( ) Lint and fix on commit (requires Git) //提交的时候检查
建议保存就检查，提交是值提交代码的时候，（你想下班的时候改bug就选第二个昂??）
选择单元测试
? Pick a unit testing solution:
> Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
设置存放配置的方式
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files //保存在独立的文件中
> In package.json //保存在package.json文件中
如果选择独立的文件那么配置文件会多出两个
是否将上面的设置保存为一个配置文件
? Save this as a preset for future projects? (y/N) N
选择
N不保存，如果你要保存的话，下次创建项目的时候，在第一步会多一个选项，就是你保存的配置，选择后会自动创建项目，配置与本次相同
等待项目创建完毕，然后根据vue提示的命令cd 目录然后通过yarn serve或者npm run serve启动即可
原文：https://www.cnblogs.com/hongzhiguo/p/13984664.html