2020-08-13

步骤1 准备创建项目

在所想见项目的地方首先查看 是否版本整齐
打开所在项目的文件地址，当然也可以 cmd 命令执行

步骤2 在地址栏输入 cmd.exe 调用cmd

然后输入vue，出现如下信息表示环境具足，标识脚手架的库已经全局安装过了。

步骤3 错误信息，在当前工作空间安装创建一个项目

vue init webpack vue_demo
错误内容：
Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
大概意思是如果你要使用命令vue init还需在全局下安装cli-init

步骤4 解决办法

打开c盘的cmd
输入
npm install -g @vue/cli-init
安装脚手架的init 全局

步骤5 开始创建项目

不能同上面的一样在其它盘符
这个时候切换回我们需要建立工作目录的文件地址

步骤6 再此打开 cmd

输入 vue init webpack vue_demo

然后它会去下载

步骤7 提示是否按这个名字

我们按 Enter 键

步骤8 提示描述是否是vue.js

按Enter

步骤9 作者是谁

输入作者按Enter
milijiangjun3200@qq.com

步骤10 vuebind 绑定

按enter

步骤11 是否使用vue路由

输入y 使用路由

步骤12 是否使用eslint

使用 输入 y 然后按 enter

步骤13 是否使用2个单元测试

步骤14 下载方式

前2个系统下载 后1个自己下载

我们选择系统下载

然后开始下载
大概需要几分钟的时间或者更长 我用了4分钟

步骤15 成功后的提示

步骤16 下载成功提示

added 1373 packages from 712 contributors in 84.193s

30 packages are looking for funding
  run `npm fund` for details



Running eslint --fix to comply with chosen preset rules...
# ========================


> vue_demo@1.0.0 lint F:\Vue\VueDemo\vue_demo
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd vue_demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

步骤17 环境运行

这里提示我们 可以进入目录运行它

这个时候需要勾选防火墙授权
提示我们已经可以运行的端口
Your application is running here: http://localhost:8080
我们地址栏输入

出现这个就表示我们的vue-cli 脚手架搭建的项目环境就已经搭建完毕了。