nice-vue是vue-cli3.0的超集扩展更多的自动化功能

发布者: xiaozhimn

简介

nice-vue 自动化集成 vue-cli3.0 支持热启动,扩展功能如下:
1. 仅仅需要命令行就可以自动话创建页面,组件,以及创建其依赖关系,提高开发效率。
2. 自动化路由配置,并可以支持单页面路由和多页面刷新,二级路由等,也可两种路由模式混合使用,非常灵活。
3. 提供灵活的路由拦截器,以及全局的路由拦截器功能。 
4. 动态切换代理,启动服务的时候只需要在命令行中添加需要切换的代理环境变量即可。
5. 标准化的代码及目录模版,统一前端代码风格。
6. 页面脚本自动化按需加载,无需开发者做任何配置,开箱即用。

nice-vue 脚手架工具安装

windows环境需要安装可以执行linux命令行的工具,下载 [gow.exe](http://dl.pconline.com.cn/download/762799.html) 一键安装后,重新打开cmd窗口即可。

第二步:使用npm全局安装脚手架

npm install -gd nice-vue
如果是mac系统需要root权限,安装使用 sudo npm install -gd nice-vue

第三步:验证安装成功

nice-vue -h

项目目录结构

dir

目录说明

dist目录: 打包后的资源目录
src目录: 业务代码核心目录
src->api目录: 存放远程数据请求的文件目录
common目录:应用通用脚本目录,其中app.js为整个应用的通用脚本,router.js 为路由配置项由脚手架自动维护
pages->components目录: 组件存放目录,其中common目录为所有页面公用的组件,页面目录下的组件为当前页面私有组件.
utils目录:应用的工具脚本存放目录
static目录存放静态资源内容目录 其中images目录下进行了按照页面对图片进行分类存放。
index.html:应用页面加载容器。
proxy.config.js:多代理配置文件    

脚手架使用说明

执行 nice-vue -h

Usage: nice-vue [options]

  Options:

    -V, --version           output the version number
    -i,--init               初始化应用。
    -c,--create <string>    创建一个单页面
    -r,--remove <string>    删除一个单页面
    -p, --product <string>  添加页面中的一个vue组件
    -k, --kick <string>     删除一个页面中的vue组件
    -w,--watch              启动服务器应用,带环境变量参数自动切换api代理环境
    -b,--build              打包压缩静态资源生成发布包
    -h, --help              output usage information
提供简单的明两行工具即可完成整体项目的开发。

hello world应用程序的quick start

第一步: 新建项目目录test并cd到目录test中执行 nice-vue -i

  执行此命令后会在当前test目录下生成项目所需的文件

第二步: nice-vue -c index

创建一个index首页, 此时在 pages目录下会生成一个index目录 里面分别包含 index.vue 和 main.js
其中index.vue是开发者需要完成页面逻辑的页面 main.js为当前页面的入口文件不建议对其进行修改,默认即可。
同时在根目录下的entry.config.js中会自动加入打包的入口,无需开发者修改。此时会发现在根目录下的src/common/route.js自动添加了index的路由  

第三步: nice-vue -p index/banner

执行以上命令会在src/pages/components/index/banner 目录下面生成一个 banner.vue组件,同时在index.vue中我们可以看到对组件的依赖已经自动被添加进去了,只需要使用即可.

第四步: nice-vue -p common/slider

执行以上命令会在components/common目录下创建通用组件,可以在其他页面中使用 import手动引入。

第五步: nice-vue -r index

如果发现页面创建有误需要对整个页面及依赖进行删除,可以执行以上命令

第六步: nice-vue -k index/banner

如果发现index下的banner有误可对其进行删除

第六步: nice-vue -k common/slider

如果发现通用组件slider有误可对其进行删除

第七步: nice-vue -b

执行以上命令对整个项目进行打包并声称dist目录

第八步: 在index.vue中添加 hello world

 <template>
  <div id="app">
       <div id="index">
          good
      </div>
  </div>
</template>

  import banner from "@pages/components/index/banner/banner.vue"
export default {
    name: "index",
    created() {

    },
    data () {
      return {

      }
    },
    components: {
            banner,

    }
  }

<style lang="scss" scoped>

</style>
特别强调 id为app的div节点不能进行修改否则会出问题.

第九步: nice-vue -w

启动项目,并按照提示在浏览器中预览

单页面案例

按照以上介绍我们同理生成 list页面 使用 nice-vue -c list 在list中添加内容:

<template>
  <div id="app">
       <div id="list">
              <router-link to="/list/slider">slider</router-link>
              <router-link to="/list/banner">banner</router-link>
              <router-view></router-view>
      </div>
  </div>
</template>

import slider from "@pages/components/list/slider/slider.vue"
export default {
    name: "list",
    created() { 

    },
    data () {
      return {

      }
    },
    components: {
            slider,

    }
  }

<style lang="scss" scoped>

</style>
先使用 nice-vue -p list/banner
nice-vue -p list/slider
分别创建两个二级页面组件

从以上代码我们可以看到增加了二级路由的概念此时需要对router.js进行手动配置二级路由

export default {
    "index": {
        "beforeEnter": function() { //进入页面前的路由拦截器 只能在 router-link 标签上生效

        },
        "afterEnter": function() { //进入目标页面后的路由拦截器

        },
    },
    "list" : {
        "beforeEnter": function() {

        },
        "afterEnter": function() {

        },
        children: [{
            "path": "banner",
             component: require("../pages/components/list/banner/banner.vue").default,
             default: true //设置为默认访问的二级路由
        }, {
            "path": "slider",
            component: require("../pages/components/list/slider/slider.vue").default
        }]       
    },
    "detail": {
        "beforeEnter": function() {

        },
        "afterEnter": function() {

        }   
    },
    "beforeRouteEnter": function() {//全局路由拦截器

    },
    "afterRouteEnter": function() {//全局路由拦截器

    }
}

如何在组件中获取路由链接的参数?

例如在list.vue中代码如下:
<template>
  <div id="app">
       <div id="list">
              <router-link to="/list/slider">slider</router-link>
              <router-link to="/list/banner">banner</router-link>
              <router-view></router-view>
      </div>
  </div>
</template>

import slider from "@pages/components/list/slider/slider.vue"
export default {
    name: "list",
    created() { 
        var name = this.$router.query.name;
        var id = this.$router.query.id;
    },
    data () {
      return {

      }
    },
    components: {
       slider,

    }
  }

<style lang="scss" scoped>

</style>
以上代码的create钩子函数中描述了如何获取路由跳转后的参数  

在浏览器中访问某个页面的路由地址应该怎么写呢?

有两种方法可以在浏览器中访问到某个页面
1. http://localhost:8082/#/list/banner 类似于这种地址可以直接访问到二级页面,如果banner被设置为default:true
   http://localhost:8082/#/list 这样的效果和上面一样
2. http://localhost:8082/list/banner 这样也同样可以产生和以上相同的效果
区别: 第一种跳转是单页面无刷新跳转,第二种为刷新跳转,且在页面跳转的过程中是按需加载不同页面相关的脚本文件并进行缓存,大大减小了首屏加载大文件的情况

我如果和后端进行链条如何配置代理

在根目录的 proxy.config.js中代码如下:
module.exports = {
  "mock": {
      '/api/*': {
          target: 'http://123.207.95.11:9001'
      }
  }
}
如果你有dev或者更多环境可以修改成
module.exports = {
  "mock": {
      '/api/*': {
          target: 'http://123.207.95.11:9001'
      }
  },
  "dev": {
      '/api/*': {
          target: 'http://123.207.95.11:9001'
      }
  } 
}
启动的时候只需要在根目录下执行 nice-vue -w mock 或者 nice-vue -w dev即可自动完成代理切换

我如果要在项目中引入类似于vuex这样的全局插件改怎么处理呢?

如果你需要引入第三方通用插件可以在 src/commom/app.js中进入代码如下:

import Vue from 'vue'
import axios from 'axios'
import Vuex from 'vuex'
import router from './router'
import viewRouter from './viewRouter'
import routerLink from './routerLink'
Vue.prototype.$ajax= axios;
Vue.prototype.$router = router;
Vue.use(Vuex)
Vue.use(viewRouter) 
Vue.use(routerLink)
window.router = router;//将router设置为全局变量使用
window.Vue = Vue;//将vue设置为全局
export {Vue}

我们可以看到,项目默认初始化的时候就已经将常用的第三方插件引入了, 特别警示,不要对模板中通用代码进行修改,否则可能会报错。

如何使用函数进行路由跳转呢?

router下面有三个函数分别为 goto, next, redirect 她们是等效的
其中这三个函数都有一个参数 path.
path的值可以为 例如: this.$router.next("/list");//一级路由跳转 this.$router.next("/list/banner");//二级路由跳转.  this.$router.next("http://uy2.com");站外路由跳转
8赞

张奇

很赞的功能,再不用手动创建目录和文件了,引入第三方组件ElementUI等也很方便。

时间:9/11/2019, 4:13:38 PM

回复

张奇

有个小小的建议:初始化工程后,添加一个默认的欢迎页面,体验会更好

时间:9/11/2019, 4:14:19 PM

回复

xiaozhimn

收到,谢谢给出建议!

时间:9/11/2019, 5:23:04 PM

回复