使用vue-cli3创建新项目详解

vue-cli已经是3.x的版本了， 相比以前的2.x版本也有了许多改进。现在的脚手架配置更自由更便捷了，今天就给大家详细的图解一下每一步的含义。

工具/原料

cmd

nodejs

vue-cli

npm

一、安装vue-cli

1、首先安装vue颍骈城茇-cli，环境要求Node.js8.9版本以及以上。然后打开cmd命令窗口或者powershell,输入：npm install -g @vue/cli如果使用yard包管理儡泌掩羞器，则输入：yarn global add @vue/cli安装完成后，可以通过 npm -V 指令查看是否安装成功以及显示vue-cli的版本信息。

二、创建新项目

1、接下啦进入今天的正题，使用vue-cli3脚手架创建一个新项目。输入：vue create yichen-admin这里烤恤鹇灭yichen-admin是我的项目名称，大家需要替换成自己的实际项目名称。然后系统会让你选择一套配置，第一项是默认配置，第二项是手动配置。如果你以前配置过，并且本次项目也不需要重新配置，那么就可以选择第一项，不过大多数情况下，我们还是需要手动配置一下。所以这里选择第二项

2、选择手动配置之后，你可以选择需要哪些配置项。空格是选中和取消，a键是全选，i键是反选。这里我选择了babel转换器，Router路由，vuex状态管理，css预处理器，eslint风格检查。具体每一项的作用，大家可以自行上网查阅，今天的重点不是讲解这些。

3、回车之后还会有一些选项需要确认。这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。关于哈希模式和历史模式的区别，在vue的官方文档上写的很清楚。一般默认是使用hash模式，如果后端服务器有支持，可以使用history模式。

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

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

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

7、最后一项是询问你是否将本次设置作为默认设置，这样下一次就可以直接使用本次设置而不用重新配置了。这里建议N，因为每个项目的情况很可能不一样

8、全部输入完毕之后，回车，开始读条。网络顺畅的环境下，几分钟就可以创建完成！这样，一个基础的项目框架就已经搭建完成了！