内容简介:命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面顾名思义
命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面
顾名思义 XXX-CLI 就是使用命令行生成的 XXX 程序。之前写过一款 基于 nodeJs 制作个性 CLI 的教程
如何用node开发自己的cli工具并发布到NPM , 想详细了解制作流程的可以简单看看。
vue-cli
截止 2018-09-02 vue-cli 最新版本为 3.0
vue 中文生态非常完善,我们直接去官网看看:
vue-cli2 和 vue-cli3 的对比
很遗憾, vue-cli-3 是 2018-08-11 出来的,而我的论坛早在之前就着手搭建了 cli-3 耽误了我一些时间,后面也会提到
简单看看了看 vue-cli3 的新特性:
- 可以生成 pwa
- 支持 UI 界面勾勾选选就可以了
- 兼容 cnpm 了
- 搞了一套自己的 vue-cli-service 如下:
我这两天不忙的时候就在考虑项目兼容 vli-3 但是后来废了很多时间,效果依然不理想,我回滚了代码宣布放弃了。
鉴于使用 cli-3 并没有对我的项目有性能上的提升,反而翻遍了我的很多成熟的基础架构,为时间成本考虑,我决定还是使用 cli-2 进行开发,大体目录结构都是一样的。
vue-cli 的安装
安装前应注意前提条件,避免浪费不必要的时间。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+ )。(如果你用的和我一样 也是 cli-2 那么不需要如此新的 nodeJs )你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
不将远离了,官网比我讲的好得多。
可以使用 yarn 或 npm 来安装
npm install -g @vue/cli # OR yarn global add @vue/cli 复制代码
我用 NPM 来重新尝试一次 (对 npm 速度表示不理想的 可以尝试淘宝的CNPM 不要过度依赖cnpm):
localhost:~ Venda-GM$ sudo cnpm i @vue/cli -g 复制代码
TIPS
npm 中 install 可以写成 i , -g 放哪都行 ,--save 可以写成 -S , --save-dev 可以写成 -D
看到这个画面,安装完成了。
测试一下查看一下版本是不是正确,ok 创建项目:
vue create new-bee 复制代码
拉取 2.x 模板 (旧版本)
Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init 复制代码
vue init
的运行效果将会跟 vue-cli@2.x
相同
vue init webpack my-project #这样来生成一个 *cli-2* 项目 复制代码
使用 vue-cli-2 生成项目
vue init webpack new-bee 复制代码
下面是我创建项目我所选的选项:
稍微讲讲下面三个:
- vue build 的方式
推荐使用 运行时 + 编译时,通常需要 webpack 编译 .vue 模板。
- 是否选择预先设定的Eslint
并是不每个人都适合的,有的要求过于严格,我自己有一套成熟的, 代码在这里 , 就用自己的了,当然可以基于它做一些删减。
- 它要帮我们执行 install
如果你有一个好的socket终端代理,可以用这个,否则可以选择 No 自己用 cnpm 执行
初窥目录结构
让我们来看看 vue-cli2 自动生成的项目目录,我打上标签,为可能不太理解的同学简单描述一下
这次我们重构的主要目的是规范、更适合多模块多人协作、而不是为了让它看起来更复杂,本文的项目结构、 esLint 改良、等都是经过项目小组反复的推敲决定的,有一定的生产价值。
杞人忧天 : 为 electron 做好准备
cli 生成的项目 src 下面直接就是源码,但是为了考虑以后使用 electron 我们再用 renderer 包裹一下,规范一点。
可以参考一下 electron-vue
兼容Electron的源码目录
tips: 上述截图 github 树形目录的插件是 octotree 也可以在谷歌商店直接搜索安装,看源码省去不少时间。
- 先不建立 electron 的 main 文件夹 和 index.ejs 需要添加依赖,目前暂时用不到。
别忘了改一下 webpack 相关的路径问题
加上 renderer 的路径
app: './renderer/src/main.js' 复制代码
@ 的路径也要在 webpack 进行修改,否则会不找组件
需要改下 webpack alias[别名] 配置
改之后的样子
alias: { '@': resolve('renderer/src'), } 复制代码
容器级的目录
在 组件目录( components ) 同级建立 容器 ( container ) :容器里面的各个模块分离开,这样可以使项目 模块 看起来更加清晰。如果十多人协作的项目又能很好地对工作区划分,合理的建立路由,避免不必要的冲突。
以目前的 论坛项目 为例
路由目录的调整规范
在 / router 下为 /container/blog 建立 blog.js
const Blog = () => import ( /* webpackChunkName: "blog" */ '@/container/blog/index') /* 所有container/blog目录下的路径都配置在此路由children下,避免混乱 */ let routes = [{ path: '/blog', name: 'blog', component: Blog, children: [{ path: 'blogdemo', component: Blog } ] }] export { routes } // 注意 /* webpackChunkName: "blog" */ //是为了后面的路由懒加载,后面会讲,不懂没关系,现在可以忽略 复制代码
- 自动生成的 index.js 主路由是这样的
- 缺点:
太单一,我们不可能所有的路由都写在里面作为 children ,看起来非常混乱,开发调试很难处理,多人协作还很容易引起冲突。
我们尝试将 blog.js 引过来
先将 blog.js export 的路由引过来,起一个别名防止冲突
import { routes as blogRoutes } from './blog' 复制代码
因为可能有N多个路由模块,我们将 routes 拆分
自动生成的是这样简单的:
//直接导出路由 export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 复制代码
我们拆分成这样:
//定义基础路由 let route = [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] //以此类推可以方便的链接更多路由 route = route.concat(blogRoutes) //导出 export default new Router({ routes: route, linkActiveClass: 'active' }) 复制代码
回过头来,我们为 blog/index.vue 添加一些内容,测试一下:
<template> <div class="Blog"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: "Blog", data() { return { msg: "Welcome to Your Blog Page" }; } }; </script> 复制代码
测试一下
首先
npm install 复制代码
嫌慢可以使用淘宝的 cnpm 我以前的文章讲过
npm run dev 复制代码
按照提示在浏览器输入: http://localhost:8080/#/blog
vue-cli2 webpack 生成的项目是支持 热部署 的,所以很多配置不需要自己从零开始配置,这也是我希望大家使用 CLI 的原因,省去了一些时间。其他 login 等一些模块 按照这个模式写就可以了。
谈谈 eslint
个人觉得 esLint 不论是在个人项目还是团队协作中,都是有价值的,它可以让自己、团队的代码风格标准化。现在esLint 甚至可以预测你的代码是否可能会有问题。建议可以制定一些规则,开发时通过你的 IDE(集成环境) : idea 、WebStorm、 vscode、 之类的插件配合检测, eslint 打包检测编译不通过的那种非常严格的初期还是不要尝试了。
我当时参考 airbnb 调整的配置,经过一年多的项目实战逐渐调整,目前还算比较合理, esLint配置规则代码在这里 。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- golang构建项目的脚本
- flask蓝图构建小项目
- vueSSR: 从0到1构建vueSSR项目 --- 路由的构建
- Web 前端项目的构建工具
- 使用 Maven 构建 Java 项目
- Web 前端项目的构建工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。