一、为确保项目能正常搭建请先去node.js官网下载node进行安装

1、安装步骤

打开https://nodejs.org/zh-cn/点击下载

mac npm镜像文件 npm镜像库怎么搭建_版本号

下载完成后打开所在目录

mac npm镜像文件 npm镜像库怎么搭建_cmd命令_02

点击安装

mac npm镜像文件 npm镜像库怎么搭建_vue_03

mac npm镜像文件 npm镜像库怎么搭建_PowerShell_04

mac npm镜像文件 npm镜像库怎么搭建_PowerShell_05


直至Finish完成后,打开cmd命令行窗口检查是否安装成功,如果node、npm都有版本号说明安装成功

在这里插入图片描述

淘宝镜像的使用

当node安装成功之后且npm能正常运行,我们就可以通过一些npm install xxx指令来下载一些东西了,考虑到npm的服务器在国外,拉取npm包的列表、下载包这个过程会比较缓慢。建议大家安装淘宝镜像来解决此问题,淘宝镜安装成功后就可以通过cnpm install xxx指令来下载所需要的东西了,当然这个时候npm依旧可用

cmd命令行输入指令安装淘宝镜像

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

mac npm镜像文件 npm镜像库怎么搭建_版本号_06

二、项目搭建

1、打开你要创建项目的主目录(一般你写的项目包名都会在里面)

mac npm镜像文件 npm镜像库怎么搭建_mac npm镜像文件_07

打开PowerShell窗口后,执行start cmd指令可打开cmd命令行窗口(非window10以上系统应该是在上一步就可以直接打开cmd的,若一打开就是cmd可忽略此步骤)

mac npm镜像文件 npm镜像库怎么搭建_版本号_08

mac npm镜像文件 npm镜像库怎么搭建_版本号_09

2、安装vue-cli

cnpm install vue-cli -g //全局安装vue-cli

mac npm镜像文件 npm镜像库怎么搭建_vue_10

查看vue-cli是否安装成功,vue list

mac npm镜像文件 npm镜像库怎么搭建_mac npm镜像文件_11

vue init webpack ”项目名称“

mac npm镜像文件 npm镜像库怎么搭建_PowerShell_12

项目创建好后,打开刚刚创建好的test文件夹,检查node_modules依赖,缺少依赖就用cnpm install或者npm install补全

mac npm镜像文件 npm镜像库怎么搭建_版本号_13

项目运行方法一:cmd窗口运行

mac npm镜像文件 npm镜像库怎么搭建_cmd命令_14

mac npm镜像文件 npm镜像库怎么搭建_vue_15

项目运行方法二:使用web开发者工具编辑器运行(vscode、webstorm等等)
我这里用的是webstorm

mac npm镜像文件 npm镜像库怎么搭建_vue_16

mac npm镜像文件 npm镜像库怎么搭建_mac npm镜像文件_17

如果你想让项目运行时自动打开浏览器,只需把config>>index.js里的autoOpenBrowser由false改为true

mac npm镜像文件 npm镜像库怎么搭建_vue_18