一个简单的脚手架drop-cli、vue的组件库、移动端架构和pc管理后台模版

鉴于自己的经验和以往做过的项目，为了提高工作效率，特意整理了一下项目模版、vue组件库等模版并添加到一个自己封装的脚手架drop-cli中。不喜勿喷！

drop-cli

一个简单的脚手架,可添加不同的模版/框架

1. 安装并查看drop-cli的模版

$ npm install drop-cli -g
$ drop-cli list

复制代码

2. 选择模板并创建自己的项目

$ drop-cli init
$ gulp-html-front // 输入一个模版
$ gulp-html-test  // 输入自己的项目名称
$ cd gulp-html-test
$ npm install

复制代码

3. 模版链接

vue-pc-admin-front : 基于vue全家桶的一个pc端后台管理系统

vue-mobile-front : 基于vue全家桶的一个移动端架构模版

drop-element : 制作vue组件库的npm模版

gulp-html-front : 基于gulp的多页应用模版，less,es6

vue-pc-admin-front

PC后台管理Vue架构(vue+ vue-router + store+ axios + scss + svg + element-ui)

安装使用

    $ git clone https://github.com/raintao/vue-pc-admin-front.git
    $ cd vue-pc-admin-front
    $ npm install
    $ npm start
复制代码

也可利用drop-cli脚手架安装模版

1、 安装drop-cli

$ npm install drop-cli -g
$ drop-cli list

复制代码

2、选择模板并创建自己的项目

$ drop-cli init
$ gulp-html-front // 输入一个模版
$ gulp-html-test  // 输入自己的项目名称
$ cd gulp-html-test
$ npm install

复制代码

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常,一般我们常用cnpm来代替

    npm install cnpm -g --registry=https://registry.npm.taobao.org
复制代码

这里推荐使用yarn, yarn就是一个类似于npm的包管理工具，它是由facebook推出并开源。鉴于facebook在前端界的影响力，yarn一面世就很受瞩目，受到了前端界的广泛欢迎。与npm相比，yarn有着众多的优势，主要的优势在于：速度快，离线模式，版本控制。详情点这里

vue-pc-admin-front模板简单介绍

1.element-ui

由饿了么前端团队推出的 element-ui 是一个基于 Vue.js 的pc端组件库。已发布了 2.4.6 版本，支持了vue2。引入方式为:

    // ui框架  
    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';

    Vue.use(ElementUI);

    new Vue({
    el: '#app',
    render: h => h(App)
    });

复制代码

当然也可按需引入，来减少项目的大小。具体怎么用请参考官网：Element-ui官网手册

2.字体图标用的是vue-svgicon ,

可以在阿里巴巴矢量图标库上下载项目需要的svg图标。放在目录src/assets/svg下，然后yarn svg就可以生成对应的js文件

    1、 在main.js中引用
    // in main.js first line 兼容ie
    import 'vue-svgicon/dist/polyfill'
    // import all icons
    import * as svgicon from 'vue-svgicon'
    import './views/icons'
    Vue.use(svgicon, {
    tagName: 'icon'
    })

    2、 在html中的使用方法
     <icon name="right" width="18" height="16" color="#D0D0D0"></icon>
     <icon icon="right" width="18" height="16" color="#D0D0D0"></icon>

复制代码

vue-svgicon的命令配置使用方法请参照vue-svgicon的github地址

3.页面title使用的是vue-meta

1、在main.js引入

import Meta from 'vue-meta'

Vue.use(Meta, {
  keyName: 'metaInfo'
})

复制代码

2、 在js中使用 和data created methods并列

metaInfo: {
    title: '实例使用meta'
}

复制代码

3、 更多用法参考项目地址

4. 代码风格 vue-property-decorator

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) propA!: number
  @Prop({ default: 'default value' }) propB!: string
  @Prop([String, Boolean]) propC: string | boolean
}

复制代码

is equivalent to

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    },
  }
}

复制代码

具体使用方法请参考github 或者文件夹src/views/page下的demo页面

5. vuex的分发封装vuex-class

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

复制代码

具体使用方法请参考github 或者文件夹src/views/page下的demo页面

drop-element

vue组件库（可作为一个快速开发vue组件并发布到npm的模版)

完整引入drop-element

    import Vue from 'vue';
    import DropElement from 'drop-element';
    import App from './App.vue';

    Vue.use(DropElement);

    new Vue({
    el: '#app',
    render: h => h(App)
    });

复制代码

通过js引入

    // 完整demo在lib/demo.html
    <script src="./drop-element.js"></script>

复制代码

做为vue组件模版

    $ git clone https://github.com/raintao/drop-element.git
    $ cd drop-element
    $ npm install
    $ npm start

复制代码

也可利用drop-cli脚手架安装模版

1. 安装drop-cli

$ npm install drop-cli -g
$ drop-cli list

复制代码

2.选择模板并创建自己的项目

$ drop-cli init
$ gulp-html-front // 输入一个模版
$ gulp-html-test  // 输入自己的项目名称
$ cd gulp-html-test
$ npm install

复制代码

转载于:https://juejin.im/post/5b99db365188255c5d567eb1