nice-vue扩展vue-cli3.0的自动化创建目录文件及依赖

发布者: xiaozhimn

nice-vue脚手架工具是基于vue-cli3.0开发出来的一套面向开发者快速构建基于多页面应用的超高效率前端构建利器,其扩展功能主要包括以下几点:

  1. 使用命令行生成页面以及页面相关模板文件。
  2. 自动化生成多页面的webpack配置路由入口文件,无需对webpack做打包配置
  3. 使用命令行自动化生成页面依赖的组件,动态组件注入。
  4. 标准化的路径映射。
  5. 多环境代理切换。

在构建demo之前如果您是windows操作系统,请先安装下 gow.exe这个工具,可以让您的操作系统上执行shell命令。

下来通过一个helloworld程序来简单介绍一下nice-vue的使用:

第一步: 安装nice-vue脚手架工具

npm install -gd nice-vue\n备注:如果本地没有安装vue-cli脚手架会自动检测并进行安装

第二步: 初始化项目

nice-vue -i

第三步: 安装依赖

在项目根目录下执行 npm install

第四步: 检测nice-vue命令行

nice-vue -h

第五步:创建一个页面

nice-vue -c index

第六步:运行程序

nice-vue -w

第七步:打包程序

nice-vue -b

到此一个完整的hello world运行成功
接下来我们演示一个动态注入组件的案例:
接着上面的例子如下:

第一步: 使用命令创建一个index页面的私有组件

nice-vue -p index/banner

自动化工具会自动在程序代码中注入banner组件的引用,无需手动引用, 但是如果使用 nice-vue -p common/slider 创建公共组件,则需要开发者手动import

api代理管理部分

proxy.config.js中可以配置多个环境,可以参考模板案例
配置完成后,如果要切换环境需要修改package.json中的PROXY_API为你需要切换的环境别名并重启服务器。

通过以上简单的演示就可以快速构建出hello world前端程序。
如果大家有问题可以后续加我qq: 912273637

2赞

xiaozhimn

​好不好用,试试就知道了!

时间:4/15/2019, 6:38:29 PM

回复