vue安装和开发环境搭建教程2021年

1.安装node.js地址:https://nodejs.org/en/
自定义安装地址，路径不要含空格（如\Program Files带有空格），一路next
我的安装路径是D:\Program\nodejs

2.查看安装成功否？
node -v
npm -v

3.在安装路径下新建两个文件夹
node_cache
node_global

4.以管理员身份打开cmd
npm config set cache “D:\Program\nodejs\node_cache”
npm config set prefix “D:\Program\nodejs\node_global”

5.配置环境变量
新增NODE_PATH

Path新增

6.管理员身份安装cnpm
npm install cnpm -g
warning无所谓，没有err就行。如果不行plan b如下：
npm config set registry http://registry.npm.taobao.org/

7.管理员身份安装脚手架：
npm install -g @vue/cli

再cpnm的：（开始只给cpnm安了脚手架–命令行工具，结果后面报错，所以就两个都安排了）
npm install -g @vue-cli

8.再安装构建工具webpack：
cnpm install -g webpack

9.然后在自己的项目目录构建项目会提示你安装一个全局变量啥的，那复制提示信息运行就好：
vue init webpack （myvue项目名）
npm i -g @vue/cli-init

然后再次新建就如下

我是一直回车默认配置：

10.接下来
进入项目
cnpm run dev

加载完显示：（ctrl+c退出）

访问提示网址http://localhost:8080/：

11.接下来，下载编辑器，我用的是vs code。然后百度两篇文章让开发更流畅舒服。
一篇vs code搭建vue开发环境
一篇vue代码格式化

附：
npm run build
打包后会出现一个dist文件夹，里面的html文件可以直接看效果，但这文件里面的css，图片等链接路径不正确，自己改一下就好。