windows下安装vue开发环境
1、安装npm
官网node进行下载
Node.js 是一个开源与跨平台的JavaScript 运行时环境。
2、检测nodejs安装
- 当执行完上步安装包安装后，需要进行安装是否成功，win+r打开运行，输入cmd后进入命令行界面。分别输入
node -v和npm -v命令进行node的版本号和npm的版本号的查看。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gLUeSQ9W-1634650540244)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824121953527.png)] -
安装完后的目录如下图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ySjjR1V8-1634650540245)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122032097.png)]
3、配置npm安装全局模块路径与缓存路径
NPM是随同NodeJS一起安装的包管理工具
一般，在进行npm install ...等命令全局安装时，默认的会将模块安装C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中。
此时可不进行修改，但便于对C盘数据进行管理，此时这里配置我们自定义的全局模块安装路径和缓存路径，在当前的nodejs安装目录下新建两个文件夹，分别为node_global和node_cache`。
此时需要win+r打开运行，输入cmd进入命令行界面，分别输入以下内容执行
npm config set perfix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
配置一个镜像站，为了提升速度，
输入命令 npm config set registry=http://registry.npm.taobao.org 配置镜像站
检查一下镜像站行不行命令
npm config get registry
更新一下npm
npm install npm -g
3.1 node环境变量配置
- 在系统变量中新建
NODE_PATH
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLBSC2aB-1634650540246)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122413580.png)]
- 在用户变量中编辑用户变量的path，修改对应的npm的路径值为上文中自定义的
node_global路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GkavRr0A-1634650540248)(C:\Users\HSLM\AppData\Roaming\Typora\typora-user-images\image-20210824122439338.png)]
4. 安装Vue
Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。
4.1 安装vue-cli
vue-cli 是一个官方发布vue.js 项目脚手架，一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
- 运行cmd调出命令行窗口。命令行里输入：npm --version，显示npm版本大于3.0才能安装vue-cli。
- 输入npm install -g @vue/cli，这就开始安装了。
4.2 安装Vue
npm install vue -g
在global的模块目录下就能找到vue
4.3 安装Vue-router
这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
npm install vue-router -g
查看vue版本
5 运行Demo
切换到根目录
运行命令
npm install -g @vue/cli-init
初始化，安装依赖
安装依赖
npm install
运行
npm run dev
打包
npm run build
生成静态文件，打开dist文件夹下新生成的index.html文件
出现页面
如果页面空白
运行命令
cnpm install -g http-server
再重新打开
6 一些问题
在执行命令npm install 出现问题则
报错原因： 找不到，esbuild/esbuild.exe 这个文件。
当前目录执行下列命令
node ./node_modules/esbuild/install.js
执行如下命令，将 npm 下载源改为淘宝的镜像库：
npm install -g cnpm --registry=https://registry.npm.taobao.org
7 安装Cypress
在你想要放置Cypress的地方建立文件夹
以管理员身份打开命令提示符进入该文件夹
然后运行npm init 命令
在你之前新建的文件夹下可以看到一个package.json文件。
在执行Cypress的安装命令
cnpm install cypress --save-dev
在安装cnpm之后，需要下载的模块尽量用cnpm下载
