admin 管理员组

文章数量: 887021

参考博客:最详细的vue安装教程_一只野生程序媛的博客-CSDN博客

Vue安装环境最全教程,傻瓜式安装_浪漫主义码农的博客-CSDN博客

1、安装nodejs,从下面官网下载版本,对应安装就行了:

Node.js 中文网

2、安装好后,配置环境变量

看看安装是否成功(这里是否需要配置node环境变量):

node -v

npm -v

把全局模块所在路径及缓存路径切换,在nodejs主路径下,新建node_global和node_cache文件夹:

然后 

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

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

执行完之后,再输入npm list -global

npm config list  显示所有配置信息

3、安装淘宝镜像(cnpm)  npm install cnpm -g --registry=https://registry.npm.taobao 

然后配置环境变量
配置NODE_PATH

 配置CNPM_PATH

 然后在Path里面增加,%CNPM_PATH%  和 %NODE_PATH% :

 4、为什么要配置环境变量?参考你的项目需要运行java一样,配置JAVA_HOME这些;

5、NPM安装vue.js

输入npm install vue -g

这里的-g是指安装到global全局目录去

6、安装 vue脚手架

命令:cnpm install @vue/cli -g(最新版本)

//cnpm install vue-cli -g(不是最新版本)

 7、查看安装情况

 8、输入 vue ui进入界面(vue3以上版本才有 vue ui命令):

然后创建项目(或者使用类似vue create my-project命令创建项目,

或者使用第三方开发工具 vscode或者idea这种,也可以创建):

 

9、使用 vue init 项目时候,报错:

vue init webpack hellovue

Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again

原因是因为 命令vue init需要安装一个全局加载项,

直接输入命令:npm install -g @vue/cli-init

10、dir查看项目创建:

 11、npm run dev

进入有 package.json的路径,

然后打开,http://localhost:8080/#/

 

本文标签: 环境 Windows Vue