一、 需要安装的软件(Windows 10)

二、 安装

Git

没有什么要特别注意的,一般直接按next即可

image.pngimage.png

这里可以多选最后两项

image.png

这里采用VSCode作为Git的编辑器

image.png

image.pngimage.png

image.png

选择Launch Git Bash,安装完成后会自动弹出Bash命令行

image.png

node.js

同样无需过多配置,accept后一直点next

image.png

安装完成后

image.png

完成后重启电脑,cmd内输入node -v,如果显示以下文字(v12.13.0)说明安装成功

image.png

yarn

一直点next

image.pngimage.png

image.png

三、 配置

上面三个安装好后,在任意空文件目录(注意不要在系统目录内操作),地址栏输入cmd打开命令行

image.png

输入以下命令

yarn config set registry https://registry.npm.taobao.org/  --global
npm config set registry https://registry.npm.taobao.org/  --global
:: 设置镜像源为淘宝镜像(双冒号后的语句均为注释)
yarn global add @vue/cli
:: 下载vue/cli包
yarn global add @vue/cli-init 

image.png

image.png

新建工程命令

vue init webpack test           
:: test为项目名称

前面几个选项可以直接回车跳过

image.png

到这里注意,输入n,不用ESlint

image.png

后面set up unit tests 和 setup e2e tests with Nightwatch也填n

image.png

image.png

这里用方向键选择Yes, use Yarn,回车

image.png

之后开始项目的安装过程,请耐心等待

image.png

安装完成后

image.png

四、运行

完成以上步骤后,cmd内执行以下命令

cd test
:: 进入test目录,如果已经进入该目录则忽略
yarn run dev
:: 启动

image.png

出现以下文字则说明项目成功启动在localhost:8080

image.png

注意此时不能关掉该命令行窗口,否则会造成项目进程结束

之后只需用浏览器访问http://localhost:8080即可看见以下页面

image.png

在命令行窗口内按两次快捷键 Ctrl + C 即可退出项目

以后想重新运行只需要再进入test文件夹内,进入cmd, 执行yarn run dev就行