前端小白从0到1搭建vue ui库（PC端）第一步 搭建

欢乐症患者
1,018 阅读5分钟

上来先说一下为什么要写这个ui库吧（纯属吐槽，不喜勿喷）

自己是19年某个不知名院校的本科毕业生，19年4月开始实习工作，在平常工作有时候学到/看到一些东西（收藏、点赞）,就没有然后了...所以觉得不行，还是得有点东西沉淀下来，不然以后换工作连东西给别人看都没有。其次，也是对自己知识的重新学习吧。其他的等想到再继续吐槽，接下来进入正文。

知识点

都说是vue ui库，那不会vue肯定进行不下去，在这里vue我个人觉得Vue官方文档就写得真的很好，每次去看都有新发现（可能是我每次都没有去看全,新手可以只看一下教程，有点基础看一下api），没有找到想要的就找度娘或谷哥（要相信，你踩到的坑肯定已经有人踩过了，没找到只是你问的方式不对）。当然JavaScript肯定也是要的，这里是我推荐两个网站阮一峰大神的ES6入门教程和JavaScript 教程，我个人感觉这两个就够了。

开始你的个人秀

环境

  • 首先，你需要安装node，怎么安装？点击这里。官网一键傻瓜式安装。
  • 其次，脚手架（vue-cli）,如果你已经完成第一步（如果下载不了node，那我没有办法，哈哈哈），那就可以直接打开命令行执行 npm install -g @vue/cli（这个vue官网就有）。
  • 安装太慢？安装失败？那尝试换成淘宝镜像。什么？淘宝镜像是什么？emmmmm，就是可以让你安装得快点的东西。怎么切换，我这里也提供一下吧（安装完后就可以用cnpm了）
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看当前镜像
npm config get registry

搭建

用vscode（看自己习惯用什么就用什么）打开一个文件夹，然后打开终端

在终端输入命令vue create tls-ui（后面的tls-ui就是你的项目，自己随意），要是出现下面的这个情况，大概率就是没有安装vue或者vue-cli（我自己也出现了，因为我真的是从零开始搭建，连电脑的node什么的都是下载不久，之前是用笔记本或者在公司写代码）

1.选择安装方式，如下图（上面是自动，下面是手动）,我是选择手动。我这里就大概说一下，想看详细请移步官网

2.选择依赖

  • Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
  • TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前用的人可能不多，但是这个真的很强
  • Progressive Web App (PWA) Support// 渐进式Web应用程序
  • Router // vue-router（vue路由）
  • Vuex // vuex（vue的状态管理模式）
  • CSS Pre-processors // CSS 预处理器（如：less、sass）
  • Linter / Formatter // 代码风格检查和格式化（如：ESlint）
  • Unit Testing // 单元测试（unit tests）
  • E2E Testing // e2e（end to end） 测试
    我选择Babel、CSS Pre-processors、Linter / Formatter（因为这里只是组件库，用不到路由）
    这里是选择css预处理，我选择第二个，第一个也可以，而且第一个还比较快，第二个还经常下载失败（但是我还是喜欢第二个），为什么不选第三个和第四个？因为我不会呀
    这个是代码校验的，我选择第一个ESLint with error prevention only，我之前好像用过其他，哇，校验得我要死。当然，要是你觉得想锻炼自己的代码规范可以选第三个。
    这个是在什么时候校验，直接选第一个，在保存的时候校验
    这个是想把配置文件生成到哪里，一般选择第二个package.json（emmmmmm,第一个我不会）
    这个说的是下次是否还继续用同样的配置，我就选N了（下次再说），然后就等项目创建吧（看集动漫先）

运行

这是安装成功后的目录 然后进入文件夹（安装成功后不是在你项目的当前文件夹的）

cd 文件夹名称（就可以进入）
npm run serve(启动项目)

ip和端口号（端口是可以修改的，等下次我再去看看是怎么修改来着）

这就是打开的页面，好了，成功了

下篇文章就开始写组件，如果大家看到这里了，希望大家给我点时间去写下一篇，或者哪里写错写得不好请帮忙提出来一下，因为我也是第一次写这么正式的（除了我的毕业设计），谢谢。

因为我也是今天（2020.03.10）才开始写这个ui库的，我会尽量保存写的项目和文章同时更新（平常白天要上班，公司离宿舍也比较远，晚上回来有时间就会写和更新文章，周末还要加班是不可能的，周末要打lol放松放松，我写到这里的时候，项目还没有创建好，我真的是****，真的就是那个node-sass的问题，这个node-sass如果大家平常安装时失败的话，我推荐将整个node_modules卸载后再重新安装比较好，不然老安装失败）

avatar
文章
阅读
粉丝