npm:nice-vue | Skypack

README

简介

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

  在安装脚手架工具之前需要注意：
  1. nodejs版本目前支持12.x及以上，太老的可能不支持。
  2. window操作系统需要安装简单的linux命令执行工具，例如下面讲到的gow.exe

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目录下生成项目所需的模板文件，同时会创建一个空的index首页。

第二步： 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 或者 nice-vue -p index/banner route

执行以上命令会在src/pages/components/index/banner 目录下面生成一个 banner.vue组件，同时在index.vue中我们可以看到对组件的依赖已经自动被添加进去了，只需要使用即可， 如果命令行参数中带了route参数，则只会在router.js中自动增加一个二级路由配置项，也就是会增加一个 children子路由的配置项， 如果子路由页面要在页面中切换，需要增加唯一的 <router-view></router-view>节点，此时只要使用子路由链接就会自动切换.

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

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

第五步: nice-vue -r index

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

第六步: nice-vue -k index/banner 或者 nice-vue -k index/banner route

如果发现index下的banner有误可对其进行删除， 删除的时候如果你带了route参数创建的二级路由组件则删除的时候也需要带上route参数配对即可。

第六步: nice-vue -k common/slider 或者 nice-vue -k common/slider route

如果发现通用组件slider有误可对其进行删除，删除的时候如果你带了route参数创建的二级路由组件则删除的时候也需要带上route参数配对即可

第七步: nice-vue -b

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

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

 <template>
  <div id="app">
       <div id="index">
          hello world
      </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页面:
同时使用: nice-vue -p list/slider route
         nice-vue -p list/banner route
         增加两个子路由组件，最后在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>

export default {
    name: "list",
    created() { 
        
    },
    data () {
      return {

      }
    },
    components: {
      
    }
  }

<style lang="scss" scoped>

</style>

  通过链接: http://localhost:8082/#/list/slider 和 http://localhost:8082/#/list/banner 分别可以访问两个二级页面， 最后不要忘记给两个子组件添加点内容方便查看额.

从以上命令我们可以看到增加了二级路由的概念，此时发现创建命令后面多了一个route参数，这样可以自动化更新路由文件的配置项，无需手动书写chilren

export default {
    "index": {
        "beforeEnter": function(from, to, next) { //进入页面前的路由拦截器 只能在 router-link 标签上生效
            return false;//返回false表示路由禁止跳转，不返回值或者返回true表示放行。
        },
        "afterEnter": function(from, to, next) { //进入目标页面后的路由拦截器

        },
    },
    "list" : {
        "beforeEnter": function(from, to, next) {
                
        },
        "afterEnter": function(from, to, next) {
            
        },
        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(from, to, next) {

        },
        "afterEnter": function(from, to, next) {

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

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

    }
}

  以上路由拦截器的参数说明:
  from: 路由跳转前的浏览器 location对象
  to：路由跳转后的浏览器 location对象
  next：路由跳转函数，例如： next("/list");跳转到list页面，如果你要带参数: next("/list?id=1");

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

例如在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>
export default {
    name: "list",
    created() { 
        var name = this.$router.query.name;
        var id = this.$router.query.id;
    },
    data () {
      return {

      }
    },
    components: {

    }
  }

<style lang="scss" scoped>

</style>
例如我们访问：http://localhost:8081/#/list?id=1&name=xiaozhu 以上代码的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中引入代码如下：
/*
* 所有页面公用的全局脚本
* */
if(!window.reload) {//必须要做判断否则会导致重复渲染的问题
    var Vue = require('vue').default;
    var axios = require('axios');
    var Vuex = require('vuex');
    var history = require('./history').default;
    var viewRouter = require('./viewRouter').default;
    var store = require('./store').default;
    var routerLink = require('./routerLink').default;
    Vue.prototype.$ajax= axios;
    Vue.prototype.$router = history;
    Vue.use(viewRouter); 
    Vue.use(routerLink);
    window.Vue = Vue;//将vue设置为全局
    Vue.initOptions = {
        store
    }
}
我们可以看到，项目默认初始化的时候就已经将常用的第三方插件引入了， 特别警示，不要对模板中通用代码进行修改，否则可能会报错。
从以上我们可以看到我们引入公共组件使用的是require方法，没有用 import的方法主要原因是，防止重复执行导致vue上下文混乱，其他脚本文件放心大胆的使用 import.

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

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

如何使用状态管理?

在src/common/store.js 中已经将状态管理模板集成进去了，当然你可以改造成按module管理的方式

// store.js
import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
Vue.use(Vuex); //使用 vuex
export default new Vuex.Store({
    state: {
       
    },
    mutations: {
       
    },
    actions: {
        
    },
    getters: {
       
    }
});

如何在引入路径的时候使用别名?

在webpack.conf.js中已经集成了以下路径的别名

  resolve: {
    alias: {
      'vue

: 'vue/dist/vue.esm.js',
      '@images': path.resolve(__dirname, 'static', 'images'),
      '@common': path.resolve(__dirname, 'src', 'common'),
      '@api': path.resolve(__dirname, 'src', 'api'),
      '@pages': path.resolve(__dirname, 'src', 'pages'),
      '@utils': path.resolve(__dirname, 'src', 'utils'),
      '@css': path.resolve(__dirname, 'static', 'css')
    }
  }

  例如我们要引入一个app.js公共模块

  import '@common/app'

  好了，大家如果有更多问题请教，请加我QQ：912273637, 欢迎提问。

Usage no npm install needed!