Vue 2.5 从零开始学习 - 利用 Vue cli 脚手架工
利用 Vue cli 脚手架工具快速创建 工程化的 Vue 项目
前置要求
-
首先你的电脑上需要安装 node 和 npm
node 可以在 node.js 官网，按照你的系统版本，按需下载，非常方便，所以这里就不再多啰嗦啦！
npm 是全球都在用的前端资源仓库！（这是我对它的称呼，哈哈！）
npm 对于前端开发者来说是取之不尽用之不竭的宝库，你会从其他大神所开发的开源组件中学到很多知识和技巧！
不仅仅 vue 的全家桶套装都有在 npm 上，更是因为学会使用 npm 对一个前端开发者来说是必备技能，所以赶快 Get 吧！
npm install -g vue
npm install -g @vue/cli
-
-g 选项是什么意思？
-g 指的是 global ，意思是全局安装，即不只在你的开发项目文件夹那一个小小的封闭环境里安装，是在你电脑的整个 npm 环境中安装哦！
-
由于我们要使用最新的 vue cli 脚手架工具，而官方的提示已经不推荐
npm install -g vue-cli这个库的安装方式了。所以我们选择官方提示的 @vue/cli 吧！
-
WebStorm 与 Visual Studio 选谁呢？
众所周知，WebStorm 是一个非常棒的 IDE 开发工具，它的优点就在于它很全面，什么框架的东西它都会首先去适配去支持... 当然，Vue作者尤雨溪也推荐使用 Visual Studio Code...
所以其实二者都是不错的选择，看你更喜欢丰富强壮的IDE 还是 轻便快捷的 文本编辑器啦！
然而在 Vue CLi 这件事情上... 它做的也太绝了吧！
它居然自己把 Vue CLi 工具 集成到了软件界面里！不过对使用它的人来说这是非常方便的... 但作为博客展示就不太好看了...
所以，我们还是选择了用 Visual Studio Code + PowerShell ( Linux 平台下用终端 shell 也是一样的 ) 展示如何在命令行界面下用 Vue CLi 脚手架工具初始化一个 工程化的 Vue 项目。
Vue Cli 配置各个选项怎么填？
-
Step 1：通过 Visual Studio Code 打开一个文件夹，并打开 PowerShell 终端
如果你已经完成了之前前置要求的配置，那么此时你应该可以使用 vue 命令选项了。
在终端中输入：
vue create your_project_name" your_project_name " 就是你想设置的项目文件夹名，这个文件夹将会由 Vue CLi 工具来创建
start_new_fromCLI.png
-
Step 2：第一项，不选取默认设置，我们一步步自己来配置；
将箭头移动到 Manually select features 然后回车；
select_manually_toSetUp.png
-
Step 3：第二项，来选一下我们将为我们的项目引入那些 工具、组件包：
用 空格 来选择需要的组件包，Babel 和 Linter / Formatter 是默认选好的，那我们也就不动它们了。
我们选择一下三项：
- Router： Vue 全家桶中的 路由工具，是学习 Vue 时一定要学的一环。
- Vuex： Vue 全家桶中的 状态管理工具，也是必学的工具之一。
- CSS Pre-processors： css 的预处理工具；
import_tools.png
-
Step 4：接下来，我们将继续对我们选择的这些工具组件进行一下配置选项的选择：
那么先是关于 Router 的：
yes_for_routerHistory.png
该项询问：是否使用历史模式？此处我们选择：Yes 就好啦 ~
- Step 5：然后是选择采用哪种 CSS 预处理装置；
choose_SASS-SCSS.png
我们在这里选择 Sass / SCSS ；
- Step 6：之后我们选择 ESLint 的模式：
choose_Airbnb_ESLint.png
对于 ESLint 模式，我接触的教程都比较推荐：Airbnb 或者是 Standard 模式。
-
Step 7：最后我们选择
-
是 在保存时 进行语法检查
-
是 在 commit 提交时 进行语法检查和修正
choose_ESLintWhenSave.png
-
此处我们选择 **保存时 进行语法检查**
-
Step 8：工具的选项配置完成了，vue CLi 会询问：是否保存你此次的配置？
请一定选择 No！ 因为保存意味着今后所有的 vue cli 都将以此来配置项目了！
no_forSaveCLICofig.png
-
之后就是等待了... ...
如果网络情况不好，没有架设梯子，下载太慢甚至卡掉了的话，不妨切换到 淘宝 npm 国内镜像源 会快一些。
CLIloadingNpmInstall.png
- 因为我们是在用 VS Code 打开的这个文件夹目录下进行的创建，所以此时左侧的文件夹视图中会出现你刚才输入的项目文件夹名，打开之后，你将发现是以下这样的目录结构：
CLIFinished.png
-
目录中有很多都是 项目开发完成后 打包时的一些打包工具的配置文件，暂时我们不做介绍；
但是 packge.json 是必须要了解的，它存放了本项目最基本也是最重要的一些包依赖信息：我们打开看一看：
open_packageJSON.png
-
此处的 version 是 npm 为你的项目初始化了一个版本号，一般都是从这样一个 0.1.0 开始的；
-
dependencies：是本项目 必须 依赖的组件、工具包。 无论开发环境还是生产环境。
-
同样是 dependencies，但下面这一个 加了一个 dev 在前面：
这是在开发时我们需要用到的组件、工具。比如一些打包程序，在生产环境当然是不用的
-
然后就是 最重要的 三个命令 啦！：
- serve ：进行开发环境的运行，并且 vue 是支持 热加载 的，你的代码内容一更改，页面内容就会相应地立刻做出反应，发生改变。
- bulid ：进行打包，然后会在 根目录 生成一个 dist 文件夹，里面是 index.html 和 打包好的 css、js 文件，你的 vue 项目就可以很容易地发布到服务器了 ~ 据此我们之后还会有比较详细的部署发布教程 ...
- lint ：进行项目代码内容的语法检查 。
-
那么现在我们就把项目 跑起来 试一下吧！
runSERVEdone.png
等待 出现 编译成功 ( Compiled successfully ... ) 和 DONE 的字样时，就可以按照提示的地址，在浏览器中看到初始化好的 Vue 示例项目了！
