内容简介:命令行界面(英语: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 前端项目的构建工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Developer's Guide to Social Programming
Mark D. Hawker / Addison-Wesley Professional / 2010-8-25 / USD 39.99
In The Developer's Guide to Social Programming, Mark Hawker shows developers how to build applications that integrate with the major social networking sites. Unlike competitive books that focus on a s......一起来看看 《Developer's Guide to Social Programming》 这本书的介绍吧!