vue项目实战之alone-admin（一）：创建项目
在前面文章我已经说过了，要写一个开源的后台管理系统，并命名为alone-admin。作为一个实战项目，在这里我会认真记录alone-admin从零到一的这个开发过程，对于alone-admin的介绍已经定位，这里就不重复说了，因为这在vue开源项目alone-admin后台管理系统要上线啦一文中已经都说明过了，从这篇文章开始，alone-admin后台管理系统就进入到正式的开发中了哦。希望有小伙伴会支持。
回归正题，我们开始创建我们的vue项目，这里我们直接使用vue/cli脚手架来创建这个vue项目，过程很简单，只不过需要注意一些创建时候的选项配置就行了，下面我们来具体看一下：
由于我们前面安装了vue/cli脚手架，所以我直接用这个脚手架来创建vue项目就行，打开命令台（不要用git的命令台），
输入命令： vue create alone-admin 会出现下面选项：
由于我使用的vue/cli脚手架版本比较新，已经支持了vue3，所以这里才会出现这个选项，但我们仍然选择vue2，因为现在很多库对vue3的支持还不太友好，比如element ui。我们看下选项：
Default（[vue 2] babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的npm包。(下面vue 3同理)
Manually select features：手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的npm包。
这里我们选择手动配置（最后一项），然后我们进入下一个选项：
你需要用方向键选择（按“空格键”选择/取消选择，A键全选/取消全选）对应功能。如果你是一个新手，先不要问为什么这么选，先照着做就行，相信随着实战的进行，你对这些一定会“大彻大悟”，如果你是一个老手，那么就更不用解释了(ps：作者因为对sass不熟悉，所以就不选css预编译了)。下一步（选择vue2版本之后）：
输入“n”回车，下一步：
ESLint是一个javascript代码检测工具，说实话这个插件感觉很不想用，动不动就报错，让人抓狂，那为什么还要用它呢？因为，，，想写出更规范的代码（是不是有点假0，0）。选第一个就行了，回车，下一步：
你是保存的时候检查代码还是提交的时候检查呢？我们选择第一个保存的时候检查代码，回车，下一步：
就是你想把配置文件独立存放还是写在package.json中，我们选择第一个独立存放到一个文件中，回车，下一步：
就是是否保存本次配置（之后可以直接使用）。我们选择“N”吧，最后一次回车。
耐心等待吧，等进度条满了，我们的vue项目就创建好了。
当你看到上面这样的图的话，我们的vue项目就创建好了。接下来我们直接进入到项目目录然后执行命令npm run serve命令就行了。
最后我们把地址http://localhost:8080/复制到浏览器打开：
当你看到上图页面时，说明我们的vue项目已经运行成功了。
最后在附上GitHub地址：https://github.com/pmb2020/alone-admin
作者：K先生本文地址：http://www.gold404.cn/info/111
版权声明：本文为原创文章，版权归 K先生个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
文章评论
评论列表
博客很棒 值得分享
K先生 游客： 谢谢
2021-02-27 16:32来自Chrome浏览器