chigua-cli
v1.3.2
Published
chigua-cli
Downloads
18
Readme
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 | 接收文件的目录 | - | 是 | 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