每天进步一点点,小白学习笔记,自己的学习记录笔记。

首先WIN+R调出cmd管理界面,输入path查看nodejs安装情况
win10系统vue-cli环境搭建及创建项目
如果目录中没有安装nodejs里面是看不到nodejs的安装路径的。那么可以先从官网下载安装nodejs,官方下载地址(win10环境下载安装Windows 安装包 (.msi) 64位就可以)。
查看nodejs安装版本和npm(nodejs自带的包管理工具,可参考nodejs与npm的关系)安装版本
win10系统vue-cli环境搭建及创建项目
cmd中键入指令npm set registry https://r.npm.taobao.org -g(链接npm淘宝镜像) 回车,npm install(npm安装)对npm再次进行配置性安装
win10系统vue-cli环境搭建及创建项目
因为这里是已经安装成功,提示为update成功。这里说一下,因为不少线上资料提供的是使用cnpm镜像,以提高下载速度。如:npm install -g cnpm --registry=https://registry.npm.taobao.org,其他指令中npm使用cnpm替换即可。因为本人在使用cnpm镜像后在包管理过程中出现过一些小麻烦,所以不唠述。cnpm如图
win10系统vue-cli环境搭建及创建项目
搭建vue-cli脚手架npm install -g @vue/cli

注:2.9.9版本之前的版本使用@vue-cli安装,3.0之后的版本使用@vue/cli安装
win10系统vue-cli环境搭建及创建项目
安装webpack(JavaScript打包器)npm install -g webpack
win10系统vue-cli环境搭建及创建项目
这时候cmd中键入vue is查看vue-cli脚手架的安装情况会有Unknown command is(未知命令)的提示,这是因为vue-cli没有进行全局配置win10系统vue-cli环境搭建及创建项目
对vue-cli进行初始化和-g全局配置npm install -g @vue/cli-init
win10系统vue-cli环境搭建及创建项目
到这里就完成了nodejs(环境),npm(包管理器),vue-cli(脚手架工具),webpack(打包工具)的安装以及配置,可以使用vue-cli脚手架工具创建项目了。
切换到项目创建目录,键入vue init webpack 项目名称
win10系统vue-cli环境搭建及创建项目
根据项目需求进行选择和设置
win10系统vue-cli环境搭建及创建项目
项目创建成功
win10系统vue-cli环境搭建及创建项目
键入cd 项目目录
npm run dev(启动项目)
win10系统vue-cli环境搭建及创建项目
如图项目创建成功。复制http://localhost:8080在浏览器中打开
win10系统vue-cli环境搭建及创建项目
项目目录
win10系统vue-cli环境搭建及创建项目

相关文章:

  • 2021-06-04
  • 2021-09-05
  • 2021-07-17
  • 2021-05-06
  • 2022-02-11
  • 2021-05-30
  • 2021-09-30
  • 2022-01-13
猜你喜欢
  • 2021-04-20
  • 2021-10-16
  • 2021-09-23
  • 2022-12-23
  • 2021-07-01
  • 2021-05-02
  • 2021-10-23
相关资源
相似解决方案