从接触vue至今也写了不少项目，最开始用的2.x到现在的3.x，不同版本之间的项目框架构建差异性还是蛮大的，有时候自己也会搞混淆。今天就边写边边搭建一个基于vue-cli3的项目框架，参考Vue Cli的官网。

安装

看官网其实就非常清楚了。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目

运行以下命令来创建一个新项目,这里我的项目名是:yichen-admin

vue create yichen-admin

运行之后，会要求你选择哪种预设模式，第一个是使用默认配置，包含babel转换，eslint风格检查器。但是这里还是建议大家选择第二项，使用手动配置。

选择手动配置之后，你可以选择需要哪些配置项。空格是选中和取消，a键是全选，i键是反选。
这里我选择了babel转换器，Router路由，vuex状态管理，css预处理器，eslint风格检查。

回车之后还会有一些选项需要确认。这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。关于哈希模式和历史模式的区别，详见官方文档这里。

这里我选择的是hash模式，接下来需要选择css预处理器，因为本次项目我准备使用iview作为UI组件库，而它是基于less开发的，所以这里我选的是less。

接下来需要选择eslint的配置，这里我选择的是标准配置，在保存时进行代码检查。

最后一项是选择在哪里存放Babel，postcss，eslint等配置。如果项目不大可以选择放在package.json里面。但是为了规范起见，最好还是选择第一项，放在专用的配置文件中。

最后还会询问你是否将本次配置作为以后的默认配置，建议N，因为每个项目的情况很可能不一样。

等待读条完毕，项目创建完成。