全栈的自我涵养: 6 应用 vue ui 进行 vue.js 环境搭建

It is only with the heart that one can see rightly. What is essential is invisible to the eye.

用心能力看得清事物的实质，真正重要的货色是肉眼看不见的。

当你看到这篇文章的时候，暂且认为你对如何做一个网站有了趣味.

前言

上几篇文章已经讲过应用 vue-cli 和新版本的 @vue/cli 通过命令的形式创立我的项目和一些罕用的配置，但间接用手动点一下创立我的项目她不香吗!?

这也是咱们第一个前后端示例我的项目的开始

Phil Karlton 曾说“在 CS 畛域中，有两件事是十分难的，一个是缓存生效，一个是命名。”

这里轻易起个名字吧，这个我的项目就叫 kola 了，做一个简略的权限管理系统吧

装置 @vue/cli

这里还是要装置 @vue/cli, 如果曾经装置了请疏忽

epimetheus$ npm install -g @vue/cli

装置速度还是比较慢的，大家能够喝杯水

装置实现后能够 vue --version 看下版本号

epimetheus$ vue --version
@vue/cli 4.4.6

创立 Vue 我的项目

在终端输出命令

$ vue ui
????  Starting GUI...
????  Ready on http://localhost:8000

这里抉择 创立, 而后创立一个新我的项目

这里先抉择默认，毕竟我不会配呀

创立可能须要等一会

在这里咱们能够通过自定义，增加一些其余展现项

这里咱们点击插件，增加一下 vue-route, vuex

通过 + 增加插件，通过搜寻抉择一些插件进行装置，这里装置下 element 插件, 抉择默认配置间接装置即可

同样的形式装置下 axios 插件

而后咱们看看我的项目是否运行起来

在工作外面咱们能够看到 serve、build、lint 和 inspect

点运行，即会运行咱们的我的项目了，胜利后点启动我的项目就能看见咱们的我的项目

如果编译失败了，能够在配置中先将 ESLint configuration 中 保留时查看 先敞开

这样就临时功败垂成了

我的项目构造

通过 vscode 关上这个我的项目，发现多了 plugins 目录，这外面放了插件的默认配置，查看 main.js, 能够看出 vue-router、store、elementui 和 axios 曾经进行了默认配置，是不是比咱们手动配置香了了呢，她香了

git

• github: https://github.com/zhangyunan…
• gitee: https://gitee.com/zhangyunan1…

参考

• @vue/cli : https://cli.vuejs.org/zh/guide/