15
2021
07

搭建vue开发环境

一、安装node.js

官网:https://nodejs.org/en/download/

历史版本:https://nodejs.org/en/download/releases/

image.png

    下载完毕后,可以安装node,建议不要安装在系统盘。

    我这里安装到 D:\Program Files\nodejs

    安装时选择安装路径后其他默认即可。


二、设置nodejs prefix(全局)和cache(缓存)路径

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹

image.png

2、设置缓存文件夹

npm config set cache "D:\Program Files\nodejs\node_cache"


3、设置全局模块存放路径

npm config set prefix "D:\Program Files\nodejs\node_global"


三、基于 Node.js 安装cnpm(淘宝镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org


四、设置环境变量(非常重要)

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径


1.修改系统变量PATH 添加路径

image.png


2.新增系统变量NODE_PATH

image.png


五、安装Vue

cnpm install vue -g

六、安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g


检查安装版本信息

image.png


七、新建项目测试

vue init webpack vue-demo01

image.png

新建完成

image.png

安装依赖

cd vue-demo01
cnpm install

image.png

运行:cnpm run dev

image.png

地址栏访问 :http://localhost:8080  显示如下页面。

image.png

« 上一篇 下一篇 »