Vue从零基础到项目部署 - vue-cli的使用

通过环境搭建的学习，我们已经搭建出了开发vue项目所需要的环境，本篇文章就将介绍如何在本地快速搭建一个vue项目

vue-cli的使用

在环境搭建中我们已经安装了vue-cli，现在我们就利用它来快速搭建一个vue项目吧

1. 打开命令行，运行以下命令

vue create hello-world

运行命令之后会有一些选择项，选择怎样创建项目：

image.png

这里是让我们选择怎么创建项目：
ts - 使用typescript语法
default - 使用默认的
Manually select features - 自己选择特性
这里我们通过键盘上下方向键选择第三项，按下确认键进入下一步

image.png

这一步是让我们选择需要哪些特性：
babel - es6语法编译器
Css Pre-processors - css预编译器
Linter/Formatter - 代码风格检测
在这里通过键盘上下方向键控制选择，空格键进行选择，其余的选项等我们后续学习了在进行选择，接下来按下确认键进入下一步

image.png

这一步是让我们选择css预编译器，同样的我们通过键盘上下方向键控制选择，可以根据自己掌握的css预编译器进行选择，我这里选了less作为css预编译器，按下确认键进入下一步

image.png

这一步是让我们选择代码风格检测工具，也可根据自己的习惯选择，我这里选择了ESlint + Standard config，按下确认键进入下一步

image.png

这一步是让我们选择代码风格检测的特性：
Lint on save - 保存时检测
Lint and fix on commit - 在提交代码时检测和修复错误格式的代码
这里我们选择保存时检测，按下确认键进入下一步

image.png

这一步是让我们选择把各种配置放在什么地方：
In dedicated config files - 生成各自的配置文件
In package.json - 把配置写在packge.json文件里
这里我们选择第一个，按下确认键进入下一步

image.png

这里是问你需不需要把你选择的这些特性保存起来，这里我们输入 N 不用保存，按下确认键开始自动搭建项目

image.png

等项目搭建完成后我们就会看到如下界面：

image.png

根据提示我们可以在本地运行我们的项目，yarn 也是包管理工具，类似于npm 如果想要安装可以通过以下命令：

npm install -g yarn

2. 运行本地项目

  cd hello-word # 进入项目目录
  npm run serve
  #或
  yarn serve

当命令行中出现：

image.png

image.png