小彬学vue系列专栏】 004 | 构建工具一如你初妆

1.vue-cli你的初妆

前段时间，小彬好不容易和小美一起吃饭，饭间小彬听小美说，她最近在使用一个叫 vue-cli 工具的东西在写 vue 项目，觉得挺好用的，于是推荐小彬也试试。小彬当时不知道vue-cli是什么，于是默默的记下来，回到家和小美聊了几句并在八点左右准时收到小美「我该睡觉了: )」的微信后结束了聊天。心满意足的小彬打开了电脑，开始了他的 vue 研究的征途。

2.vue-cli是什么

网上给出的解释是「vue-cli 是一个官方发布 vue.js 项目的脚手架,基于 vue+webpack+es6技术栈，使用 vue-cli 可以快速创建 vue 项目」，小彬的理解就是使用 vue-cli 能更方便的写基于 vue 前端的项目，这个的确是好东西。同时 vue-cli 还需要有 node、npm、webpack 三个前置环境或工具的支持。

3.node + npm安装

首先需要安装 node，这里使用的是 Windows 安装包（.msi）64位 v10.16.3 版本，下载地址是「http://nodejs.cn/download/」

下载完成后，点击「Next」,并配置node安装目录，自动安装即可。Windows 下的node 安装会一并安装 npm。使用 node -v 和 npm -v 查看 node 和 npm 是否安装成功。

4.nrm 配置 npm 源

国内在使用 npm 下载依赖包时速度比较慢，小彬无意中发现了一个可以动态配置 npm 源的工具：nrm ，话不多说，安装上试试看，nrm 工具安装命令

 npm i nrm -g

使用以下命令查看 npm 可以用的源

 nrm ls

这里切换到淘宝的源

nrm use taobao

5.安装 webpack

npm install webpack -g

6.安装 vue-cli

使用修改成taobao源的npm安装vue-cli

 npm install -g vue-cli

输入vue 指令查看相关命令

输入 vue -V 查看当前 vue 版本

7.使用vue-cli 初始化项目

使用 vue-cli 工具，并用 webpack 模板，初始化一个 vue 项目

vue init webpack demo

8.使用vue-cli 运行项目

进入到创建的项目目录中，根据需要使用npm install 安装项目依赖包

使用 npm run dev 运行项目

通过「http://localhost:8080」可以访问正在运行的项目

9.分析vue-cli项目目录结构

vue-cli构建的项目目录结构如下

10.打包发布项目

打包前需要修改静态文件的路径，否则在线上部署后运行，会出现找不到静态文件的情况。只要在「config/index.js」文件的「assetsPublicPath」前加上一个「.」就可以避免这个问题。

同时也可以根据需要修改打包后入口文件的名称，这里是「index.html」，比如laravel框架使用的文件名是「index.blade.php」。

项目开发完成后需要打包项目，使用 npm run build 命令打包项目，打包好的项目发布到后端服务器相应目录就可以了。

研究不知不觉就深夜了，小彬望着窗外，不知在对谁说着「今晚月色真美」。

---

参考材料
[1] 使用Vue-cli 3.0搭建Vue项目 https://www.jianshu.com/p/6307c568832d
[2] Vue.js之使用vue-cli初始化项目 https://www.jianshu.com/p/18c3729e6c74
[3] vue-cli 脚手架 安装 https://www.cnblogs.com/loveyaxin/p/7094089.html
[4] Vue2全家桶之一：vue-cli（vue脚手架）超详细教程 https://www.jianshu.com/p/32beaca25c0d
[5] Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目 https://www.cnblogs.com/wisewrong/p/6255817.html