1.准备工作，下载安装程序。
[Nodejs] (https://nodejs.org/en/download/) [VSCode] (https://code.visualstudio.com/)
好像最新版本还需要升级安装 [Python] (https://www.python.org/downloads/) [C++] (https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools 下载 vs buildtools 安装 C++ 和 SDK)
2.闭眼安装，全部都点下一步下一步就好了，然后运行cmd，输入 npm -v 和 node -v 确认安装成功。
3.为了缓解C盘压力，在其他盘符你喜欢的地方创建一个 Nodejs 文件夹，然后再里面创建 node_cache 和 node_global 文件夹,然后通过 cmd 命令设置新的缓存路径和全局路径。
npm config set prefix "x:xxxxxxNodejs ode_global" 和 npm config set cache "x:xxxxxxNodejs ode_cache"
4.安装阿里团队提供的国内镜像 cnpm ，npm有些资源被屏蔽或者是国外资源下载速度慢等原因，经常会导致用npm安装依赖包的时候失败，所以使用国内镜像就比较方便比较快捷，如果不用镜像可以跳过这一步。
(ps:使用 cnpm -v 确认安装成功，cnpm 和 npm 相互之间是独立的，可以同时使用，但是在一个项目中建议不要混用，容易导致模块引用出错)
npm install -g cnpm --registry=http://registry.npm.taobao.org
之后用 cnpm install 命令的时候建议最后都带上 --by=npm 这样可以减少一些奇葩问题。如果需要重装可以这样操作：
1. 安装 rimraf ： cnpm install rimraf -g
2. 执行 ： npm uninstall cnpm -g 卸载 cnpm
3. 执行 ： rimraf node_modules 删除文件夹
4. 清空缓存 ： npm cache clean --force
5. 重新安装淘宝镜像
6. 在项目下执行 ：cnpm i (可以用 npm i)
5.开始安装 Vue Cli (脚手架，用于快速生成一个vue项目)，这里做一个示例npm和cnpm都可以使用，相互并不冲突。(ps：如果需要安装模块指定版本，在安装命令最后加上 @版本号 即可)。
(ps: 3.0以下版本是没有网页版控制台的)
如果安装的 @vue/cli ，还需要安装 cnpm install -g @vue/cli-init --by=npm
ps：卸载命令，用 cnpm 命令装的就用 cnpm 来卸载 (旧版本) npm uninstall vue-cli -g (3.0+) cnpm uninstall @vue/cli -g
5.1)安装模块 (示例:全局安装webpack框架 cnpm install -g webpack --by=npm ，安装分几个常用参数
-g: 全局安装模块，比如前面的 脚手架、webpack框架这些用处比较特殊的，其他的建议都安在项目下.
--save: 当前项目安装模块，安装位置为当前项目的 node_modules 文件夹下面.
--save-dev: 当前项目安装模块，安装位置为当前项目的 node_modules 文件夹下面，和 --save 的区别是这是安装的开发模块，比如测试模块什么的，在打包的发布正式环境的时候，会自动剔除这些模块.
6.准备完成,开始构建vue项目,首先在你喜欢的地方建一个文件夹用来放我们的项目，通过 cmd 的 cd 命令定位到这个文件夹. 然后开始创建项目。
6.1) Vue Cli 2.9 老版本，通过命令 vue init webpack 项目名称 创建项目，然后定位到项目根目录运行cmd命令 npm run dev 就可以在浏览器查看项目页面了。
ps：创建时有很多选项，前面几个都用默认设置就好了，后面的ESLint、unit tests、e2e tests，一般情况下不用的话选NO，最后选项如果有装 cnpm 建议选NO ，然后自己用 cnpm 装模块。
6.2) Vue Cli 3.0+以上新版本，通过命令 vue create 项目名称 创建项目，接着定位到项目根目录运行cmd命令 npm run serve 就可以在浏览器查看项目页面了。或通过命令 vue ui 打开网页版控制台创建项目，因为是图形化界面还有中文，操作也很简单，这里就不细说了。控制台里也有模块管理，可以为项目手动添加模块，项目创建完点击菜单 server ->运行，就可以在浏览器查看项目页面了，菜单里也有 build 打包功能。
6.3)有需要的话在项目根目录自己创建一个 vue.config.js 本地配置，因为新版默认是不创建这个文件的.
6.4)项目打包命令 npm run build 项目下生成的disk文件夹就是打包好的项目，如果发现打包结果是个空文件夹，那么就去项目下 /config/index.js 找到并修改成 assetsPublicPath: './'
一些以后用得到的操作---------------------------------------------------------------------------------------------
1.大佬说我就想用 npm 命令又想享受 cnpm 的资源库怎么办，我们直接将node的仓库地址换掉即可(PS:更换完成可以用命令 npm config get registry 查看是否成功)
第一种单次使用. npm install --registry=https://registry.npm.taobao.org
第二种永久使用. npm config set registry https://registry.npm.taobao.org
当然如果想还原npm仓库地址的话
npm config set registry https://registry.npmjs.org/
2.Express服务,先运行
cnpm install -g express --by=npm
在运行
cnpm install -g express-generator --by=npm
(有特殊版本需求，自己后面加@版本号)，最后运行 express --version 确认安装成功.然后创建一个文件夹 cd 到这个文件夹，
执行命令 express ./ 和 cnpm install --by=npm 最后启动程序 cnpm start 得到网址，打开显示欢迎页面表示安装成功，我们编辑发布的项目文件夹dist放到Express项目下就可以通过Express访问了。如果想在该项目中添加 webpack，可自行百度 express + webpack 很多教程
3.npm源管理工具 npm install -g nrm 然后运行 nrm -V 看到版本号表示成功，如果找不到nrm命令往下继续操作。首先找到系统环境变量 Path 把我们前面设置的全局文件夹 "x:xxxxxxNodejs
ode_global" 追加在里面，然后去全局文件夹下的 node_modules 找到 nrm 里的cli.js 使用编辑软件打开修改一个配置。
const NRMRC = path.join(process.env.HOME, '.nrmrc');
变更为
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
重新打开cmd运行上面的版本查询命令，确认成功。
PS:替换资源引用的命令(如果你需要用得话) nrm use cnpm
8.然后我们来说VSCode
在开始VSCode之前，我们先修改一下系统设置，让VSCode可以运行脚本
首先以管理员身份运行 Window Powershell , Windows开始右键选择【Window Powershell (管理员)】就能打开，然后依次输入命令
1.get-ExecutionPolicy，如果显示Restricted，那么继续
2.set-ExecutionPolicy，然后输入RemoteSigned，最后选择Y
这样VSCode就可以运行脚本了，然后我们打开VSCode。
选择 查看→扩展(快捷键Ctrl + Shift + X)，就可以安装我们需要的扩展了，比较常用的扩展如下。
文件 ->首选项 ->设置(快捷键Ctrl + ,) ->用户 ->扩展，可以勾选也可以点击在 settings.json 中编辑，可以对插件进行自定义配置
也可以去 C:Users用户名AppDataRoamingCodeUser 下找到 settings.json 这个配置文件
配置文件中的设置会随着软件、扩展更新而变化，网上找到的那些配置，最好一个一个在搜索设置里找一下还在不在，不然容易出错导致功能无法正常使用
1.Vetur 代码高亮，不在是一片漆黑，还能右键格式化代码(Vetur的代替品Volar，还没使用过)
2.ESLint 代码检查，使用之前要先装一下包 cnpm install -g eslint --by=npm (PS：强力建议给项目单独安装，我在写这篇文章的时候使用的全局安装初始化的时候报错还找不到解决方案，在项目中单独安装命令 cnpm install eslint --save-dev --by=npm) 然后运行 eslint --init 初始化一下(在项目中初始化命令是 . ode_modules.bineslint --init)，除了项目类型选 Vue.js 其他的默认就行
3.Vue 2 Snippets 代码补全，不用死记硬背背vue代码了，如果是vue3.0+，请把数字2改成3
4.Prettier - Code formatter 和 Beautify 代码规范化，养成好习惯
5.Auto Rename Tag 和 Auto Close Tag 重命名标签和创建标签的时候自动帮你补全闭合标签，以免一不小心忘了，就全红了
ps:有时候的一些扩展冲突或者一些不知道什么鬼操作导致 VScode 一些基本功能无法使用，比如我遇到 js 无高亮不提示，很抓狂，试了很多方法，最后没法，找到一个最狠最有效的方法，但是要提前记录下你装过的扩展名称。
1.目录：C:Users{用户名}.vscodeextensions 删掉vetur，我是直接把整个extensions目录删了。
2.目录：C:Users{用户名}AppDataRoaming 删掉Code文件夹。
然后重装 vetur，因为我是狠人删了整个extensions，所有我重装了所有扩建，问题解决。
初次自学Vue，以上资料很多来自网络，可能有些错误，请自行摸索