如何舒服地使用Atom

目录

Vue 2.0的项目扩展
1.如何舒服地使用Atom
  安装插件
  配置皮肤颜色
2.Vue项目引入组件库
  引入方式
  支持ES2015
  Mint UI
  ElementUI
  iView
  Vonic
  MuseUI
3.Vue项目的调试工具
  vue-devtools
  移动端调试
    Chrome DevTools
    Safari Web Inspector
    Eruda
    spy-debuger
4.Vue项目官方依赖库
  vue-loder
  vue-router
  Vuex
5.Vue项目第三方依赖库
  ESlint
    ESlint规则摘要
    ESlint规则风格
    ESlint忽略文件

安装插件

没有插件的Atom用起来很不舒服,代码全是一个颜色,界面没有中文菜单,敲代码没有提示。

所以安装好Atom,别急着写代码,第一步先把推荐的这几个插件都装上:

  • simplified-chinese-menu:菜单汉化
  • language-vue:Vue代码高亮
  • autocomplete-paths:自动填充文件路径
  • autoprefixer:自动填充CSS和SCSS前缀
  • vue2-autocomplete:Vue 2.0代码块
  • Minimap:代码的预览窗,摇身一变Sublime text
  • color-picker:随机色生成器,开发阶段很有用

安装插件的步骤:

  1. 打开Atom-preferences,快捷键 command + ,
  2. 选择Install,搜索插件或皮肤
如何舒服地使用Atom_第1张图片
Atom搜索插件

假如多次安装失败,可以尝试在终端通过命令操作

apm install simplified-chinese-menu
  1. 点击Install安装,由于Atom插件非常多,重复功能的插件也有很多,要尽量选择下载量最多、版本号更高的插件,这些插件更加稳定
如何舒服地使用Atom_第2张图片
Atom安装插件
  1. 下载完成,到Packages确认是插件是开启的
如何舒服地使用Atom_第3张图片
Atom开启插件

配置皮肤颜色

Atom默认皮肤颜色也是不太舒服的,看久了眼睛难受,推荐这个皮肤(UI主题:One Light,语法主题:One Dark)

配置方式如下图:

如何舒服地使用Atom_第4张图片
配置方式

效果:

如何舒服地使用Atom_第5张图片
主题配色

你可能感兴趣的:(如何舒服地使用Atom)