Vue/ElementUI 使用记录

前段时间舔狗日记很火,就想着弄一个舔狗日记的网站,顺便学学VUE,一直说学,一直拖着
还没动手写代码,就注册了几个域名 dogart.cn / tiangou.men / dogart.me
非主流域名.me后缀还是我最喜欢的,最后还是保留了dogart.me

最近工作很闲,就开始摸索着开始写代码
还挺喜欢vue的第三方组件库elementui,于是开始看element的文档

第一次踩坑

由于不会npm,也没用过其他方式创建项目,所以我用了cdn引入的方式开始写,element的组件使用也挺简单,文档也写的很详细,一开始很快上手。
但是,当我想做单应用网页的时候,问题就出现了,vue-router在cnd引入的方式下,使用方式和文档中还有网上搜到的资料完全不一样,甚至晚上一度折腾到两三点还是不行。
第二天跟之前加的一位朋友聊到这件事,他像我推荐了vue的脚手架工具vue-cli,这下想偷懒都不行了,该学的还是要学。

npm踩坑

使用vue-cli,首先要安装npm,由于之前完全没接触过nodejs,所以就跟着网上教程一步一步走
npm安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
安装完npm后,切换npm的缓存和下载地址,我自己不喜欢东西放在C盘

npm config set cache "D:\npm\npm-cache"
npm config set prefix "D:\npm\npm_global"

一切顺利,开始安装vue-cli,这里又出现了一个问题,vue-cli安装几次失败,搜了一下,切换成阿里的npm镜像:

npm config set registry http://registry.npm.taobao.org/

这下安装成功了,然后cmd启动vue-cli的图形化介面,cmd输入:vue ui
提示vue不是系统指令....群里问了下,又去搜了下,发现修改缓存和下载地址后,要手动把新的下载地址放在系统变量里面去..
把"D:npmnpm_global"添加好系统变量后,cmd 输入 vue ui ,终于启动成功

使用vue加element创建项目

由于想少走点弯路,于是在B站上看了使用vue-cli创建项目的教程,这个教程真的通俗易懂,感兴趣又想学vue的朋友可以去看看
教程地址:https://www.bilibili.com/video/BV1CJ411j7CC?p=3
后面就跟着这个教程实践了一下,然后自己重开项目搞了个 舔狗的艺术 网站
本来打算自己用tp6.0写后台的,但自己这效率....最后还是先用了网上的api
网址:https://dogart.me
前端开源:https://github.com/coolseamonster/dogartvue

本文链接:

https://seamonster.me/archives/use_elementui.html
1 + 4 =
4 评论
    周易测算网Firefox Browser 79Windows 10
    9月29日 回复

    谢谢分享,日常打卡~ 滴滴~ヾ(≧∇≦*)ゝ

    风水Chrome 69Windows 10
    9月25日 回复

    感谢分享,祝网站越来越好

    姜辰Firefox Browser 68Windows 10
    6月12日 回复

    程序员大隐还是强!

    = =、现在我看这些字母都不认识了。

      SeaMonsterChrome 83Windows 10
      6月15日 回复

      @姜辰 哈哈哈哈,就是摸鱼踩坑,学不动了学不动了