Chigua-cli NPM

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

可以非常方便的使用该模块同步本地文件到服务器，支持http与sftp两种上传方式，推荐首选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 | 接收文件的目录 | - | 是 | httpOptionoption | 参考 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('/') ? '' : '/')