一步一步来,没问题的。
一 安装 node
node官网下载安装包 https://nodejs.org/zh-cn/
装node是主要是为了安装node中自带的npm包管理工具,下载好之后,选择好安装路径,一直下一步即可。
1 检查node版本
window + R 输入cmd 打开命令行窗口
输入或复制以下代码,出现node版本号即成功。(node版本不能太低,否则不支持之后的安装)
node --version
2 更换淘宝镜像
输入或复制以下代码,将外网的npm镜像换为国内更快的淘宝镜像
npm config set registry https://registry.npm.taobao.org
替换完成后,输入或复制以下代码可以进行镜像检测,任意选一下面一句即可
npm config get registry
npm info express
不想用淘宝镜像,还可以还原
二 安装 vue/cli
如果之前安装过vue-cli的脚手架,但不是最新版本,则输入第一行代码先卸载原有脚手架再安装,否则直接安装即可
npm uninstall -g vue-cli
npm install -g @vue/cli
安装完成之后,输入以下代码,出现vue-cli脚手架版本号即成功
vue -V
至此,准备阶段告一段落。
三 创建vue/cli项目
<Project Name> 替换成你想创建的项目名,注意项目名不支持大写,创建的路径位置等
vue create <Project Name>
如下图,
选第一个则会就会直接快速安装好一个简单的vue项目,
选第二个会有一些选项,可以自己配置。
上下方向键选择 enter确认
给出了一些常用配置,根据自己需要选择(按<space>选择,<a>切换全部,<i>反转选择)
选择了css预处理器的话,会有如下选项,用sass的选dart-sass即可,官方推荐,相当于最新的sass特性都会新增其中。
选择了Linter的话,最常用的代码规范控制是ESLint和Prettier
一些其他的选项,1是否保存时检查一遍,2提交代码前检查一遍,与上面一样的多选方式。
babel代码存放位置,单独的babel配置文件或者package.json中
是否保存成默认配置,一般选N,熟能生巧。
创建成功,提示你进入文件夹然后运行npm run serve 即可运行该vue项目
运行成功,在浏览器输入url即可访问项目。
至此一个vue最基本的SPA项目就创建完成了。