全栈项目电子商城总结之脚手架vue-cli

平时学习不建议用脚手架，毕竟直接用脚手架直接降低了webpack的使用难度，建议学了webpack之后再使用vue-cli。不过在用vue完成核心的功能后可以尝试vue-cli快速创建一个项目，进行全栈技能训练，本篇主要总结一下之前做的一个全栈开发的小商城的配置阶段，内部逻辑实现今天写不动了，后面再补上吧。

1. 起步

   安装vue-cli：
   脚手架创建项目shopmall，这里有个小tips：在控制台一直cd找目标文件夹更快捷的方式是，在目标文件夹下的路径框中直接输入cmd就可以了，脚手架快速创建项目如下图所示。
   
   

2. 文件结构分析
   搭建完成之后文件目录是下面这样的结构：
   
   这里想到之前腾讯面试一道题目，如何找到你所依赖的模块的核心文件的路径，require.resolve(module),下图算是一个例子。
   

3. 运行项目
   cd shopmall
   npm install
   npm run dev
   这里可能会因为墙或者网络原因一些模块没有下载成功，只需要再次npm添加一下就可以了，比如我在写这篇博客时遇到了下面的问题，这是因为没找到webpack-cli模块，用cnpm添加即可
   

4. 打包
   npm run build
   写到这里想到之前宇宙条的面试题目：文件哈希，这里就简单介绍一下，webpack在打包时，会在对应的js，css文件后面添加哈希值，这个hash值可以去掉，将配置文件中的hash去掉就可以