chigua-cli
chigua-cli
Last updated 4 months ago by zhaoyang_13145804210 .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install chigua-cli 
SYNC missed versions from official npm registry.

chigua-cli

Getting Started

Installing

npm install -g chigua-cli

Npm Scripts

npm run start/npm run dev (开发环境)
npm run test (测试环境)
npm run pre(pre环境)
npm run prod(生产环境)
npm run skeleton (生成骨架屏)

Building

npm run build:dev (构建开发环境)
npm run build:prod (构建生产环境)

Feature

Webpack3.6 Vue2.5.2
Vue-Router
Vuex
NutUI2.0
全局支持jquery
多环境开发构建
全局公共组件方法Utils.js
图片懒加载、路由懒加载
业务分布式搭建
骨架屏
Carefree(如果需要)

Usage

目录说明:
build  webpack配置目录
config 启动和构建配置目录
src/app 业务目录  按照业务分布式
src/assets 业务使用的资源目录 如图片、使用的第三方js控件、插件放置在这里,这个目录跟随构建,里面的资源会进行压缩
src/router 路由目录 业务分布式
src/store/api 业务需要访问的restapi目录,按照业务划分
src/utils  工具目录  放置公共ajax访问 加密 公共方法的目录
src/main.js 入口文件
src/store.js Vuex主文件
src/App.vue 单页面父组件
src/App.vue 单页面父组件
src/Skeleton.vue 骨架屏文件
src/skeleton.entry.js 骨架屏构建入口
index.html  单页面源文件
static纯静态资源目录 构建的时候会纯copy不做压缩
skeleton.js 骨架屏注入文件
使用carefree,构建后直接上传服务器生成二维码供用户调试

Project Catalog

src目录下的文件功能如下:
index.html 页面模板
main.js 入口文件
app.vue 渲染最高级路由匹配到的组件用的出口vue文件
store.js Vuex配置文件
router/router.js 路由文件,在此文件中配置路由信息
src子目录功能如下:
app 存放用作页面视图的vue文件
component 存放用作组件的vue文件
asset 在其中的css、js、img目录存放css/js/图片文件
build目录 :
webpack.base.js 是开发和编译项目的配置文件
webpack.dev.config.js  开发环境webpack配置文件
webpack.prod.config.js 生产环境webpack配置文件
config目录 :
***.env.js 各开发环境环境变量,配置了各环境变量的API_HOST
proxyConfig.js 跨域配置文件
index.js 定义开发环境&生产环境参数
static目录 :
静态文件目录,不够构建影响,构建后不压缩直接拷贝

Uploading

可以非常方便的使用该模块同步本地文件到服务器,支持httpsftp两种上传方式, 推荐首选sftp上传:

  • Linux里开启ssh就默认启用了sftp,一般不需要单独配置
  • sftp会加密传输认证信息和数据,相对来说更安全
  • 注意服务器里目录的权限问题 运行npm run build 会把构建后的dist目录上产到服务器 服务器配置在 config/pre.env.js中 例如:
   sftpOption: {
     host: "127.0.0.1",
     port: 22,
     username: "username",
     password: "password!!!",
     source: "dist",
     target: `/zywa/nginx/html/dywebapp`
   }

###WebpackUploadPlugin插件配置:

属性 说明 默认值 是否必填
source 待上传的文件目录 -
ignoreRegexp 忽略文件的匹配模式 -
success 上传成功的回调 -
sftpOption.host 服务器地址 -
sftpOption.port 服务器端口 22
sftpOption.username 用户名 -
sftpOption.password 密码 -
sftpOption.target 接收文件的目录 -
httpOption[option] 参考 sftpOption -

CareFree

要在手机上访问本地文件,一个可行的思路是把文件上传到内网服务器供手机访问。但这种方案存在很多问题,以webpack项目为例,web调试常常需要频繁改动代码,如果每次改动我们都把整个工程构建一遍,再上传到服务器上,然后在手机浏览器地址栏输入页面地址进行访问,效率显然是不可接受的。本插件的原理是对此方案的优化改良,尽可能的将各环节自动化、快速化,以提升调试效率。
大致工作原理如下:

1.修改webpack部分配置,以监听模式(watch mode)启动编译,并将编译后的文件自动上传到内网服务器(解决手动上传不便的问题)
2.终端(命令行界面)打印出页面入口地址和二维码,手机扫码即可访问(解决手机录入地址不便的问题)
3.监听文件变化,一旦保存修改,增量编译(解决全量编译速度慢的问题)
4.将编译后且有变化的文件增量上传到内网服务器(解决全量上传速度慢的问题)
5.在手机上刷新页面或重新扫码即可看到变化

Notice

注意,作为模板的html文件,需要在被写入内容的位置添加<!--vue-ssr-outlet-->占位符,我们在div#app里写入:

<div id="app">
 <!--vue-ssr-outlet-->
</div>

使用carefree时,如果publicPath为空,修改carefree包中index.js第46行为
    
if (!options.qrcodeUrl) options.qrcodeUrl = (options.publicPath.startsWith('http') ? '' : 'http:') + options.publicPath + (options.publicPath.endsWith('/') ? '' : '/')

Author

Kettle Young

Current Tags

  • 1.3.2                                ...           latest (4 months ago)

8 Versions

  • 1.3.2                                ...           4 months ago
  • 1.3.1                                ...           5 months ago
  • 1.3.0                                ...           5 months ago
  • 1.2.2                                ...           5 months ago
  • 1.2.1                                ...           5 months ago
  • 1.2.0                                ...           5 months ago
  • 1.1.0                                ...           5 months ago
  • 1.0.0                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 8
Last Month 1
Dependencies (19)
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |