No.6 vue-element-admin 学习使用(一)clone项目,yarn安装依赖,选择国际化分支

1,382 阅读2分钟

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

vue-element-admin 是一个很棒的后台前端解决方案,主要用的是vue和element实现,由于我之前一直在用的是element,所以一直想学习这个框架,借助掘金8月活动,来和大家一起学习这个框架了。

先把项目clone下来,

git clone https://github.com/PanJiaChen/vue-element-admin.git

然后进入项目目录

cd vue-element-admin

官方推荐用npm安装依赖,我用npm安装出现了不明bug,放弃了

npm install

官方有提到,由于国内npm安装依赖慢,或者安装失败,可以改用yarn,于是我就改用yarn来安装依赖。

brew install yarn
yarn

又报了一个error,重要的地方在这里

image.png

然后在github的issue里找到了遇到同样问题的人

github.com/PanJiaChen/…

有人改用cnpm搞定了,但是害怕cnpm会出现不明bug,pass

最后发现失败的原因是,国内服务器连接github速度很慢,导致下载这个包超时,这个包是tui-editor库的依赖,这个库又被markdown组件使用。解决方案是在package.json里把这个删除,然后把引入它的两个页面注释掉,

image.png

保存之后,再yarn,成功安装所有依赖。 然后yarn run dev,运行项目,进入login界面

image.png 登录进系统后,发现是英文版的,

image.png

官方有提到,这个项目集合了国际化 i18n 方案。通过 vue-i18n而实现。 需要clone一下i18n的分支

image.png clone下来后和刚才一样把tui-editor删掉,yarn,yarn run dev,打开login页面,已经变成了中文。

image.png

image.png

在屏幕右上角多了一个切换语言的图标,默认支持了中文,英文,日文等。 可以看到项目提供了很多自带的组件,在开发一个管理后台的时候,用起来很方便。 接下来会通过读源码,来学习这些组件的使用,以及自己使用这些组件实现一些功能。