K先生个人博客

当前位置:首页 > 爱技术 > 正文

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项目实战之alone-admin(一):创建项目图1

由于我使用的vue/cli脚手架版本比较新,已经支持了vue3,所以这里才会出现这个选项,但我们仍然选择vue2,因为现在很多库对vue3的支持还不太友好,比如element ui。我们看下选项:

Default([vue 2] babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包。(下面vue 3同理)

Manually select features:手动配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的npm包。

这里我们选择手动配置(最后一项),然后我们进入下一个选项:

vue项目实战之alone-admin(一):创建项目之配置

你需要用方向键选择(按“空格键”选择/取消选择,A键全选/取消全选)对应功能。如果你是一个新手,先不要问为什么这么选,先照着做就行,相信随着实战的进行,你对这些一定会“大彻大悟”,如果你是一个老手,那么就更不用解释了(ps:作者因为对sass不熟悉,所以就不选css预编译了)。下一步(选择vue2版本之后):

vue项目实战之alone-admin(一):创建项目图3

输入“n”回车,下一步:

vue项目实战之alone-admin(一):创建项目图es插件选择

ESLint是一个javascript代码检测工具,说实话这个插件感觉很不想用,动不动就报错,让人抓狂,那为什么还要用它呢?因为,,,想写出更规范的代码(是不是有点假0,0)。选第一个就行了,回车,下一步:

vue项目实战之alone-admin(一):创建项目之代码检查配置

你是保存的时候检查代码还是提交的时候检查呢?我们选择第一个保存的时候检查代码,回车,下一步:

vue项目实战之alone-admin(一):创建项目之配置文件

就是你想把配置文件独立存放还是写在package.json中,我们选择第一个独立存放到一个文件中,回车,下一步:

vue项目实战之alone-admin(一):创建项目之保持配置

就是是否保存本次配置(之后可以直接使用)。我们选择“N”吧,最后一次回车。

vue项目实战之alone-admin(一):创建项目成功

耐心等待吧,等进度条满了,我们的vue项目就创建好了。

vue项目实战之alone-admin(一):创建项目成功

当你看到上面这样的图的话,我们的vue项目就创建好了。接下来我们直接进入到项目目录然后执行命令npm run serve命令就行了。

最后我们把地址http://localhost:8080/复制到浏览器打开:

alone-admin项目运行成功

当你看到上图页面时,说明我们的vue项目已经运行成功了。

最后在附上GitHub地址:https://github.com/pmb2020/alone-admin

作者K先生本文地址http://www.gold404.cn/info/111

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

  • 博客很棒 值得分享

    2021-02-23 16:44 来自chrome浏览器 回复
    • K先生 站长谢谢

      2021-02-27 16:32来自Chrome浏览器