鑑於自己的經驗和以往做過的專案，為了提高工作效率，特意整理了一下專案模版、vue元件庫等模版並新增到一個自己封裝的腳手架drop-cli中。不喜勿噴！

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. 模版連結

gulp-html-front : 基於gulp的多頁應用模版，less,es6

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

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有著眾多的優勢，主要的優勢在於：速度快，離線模式，版本控制。

詳情點這裡

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>

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、 更多用法參考專案地址

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頁面

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頁面

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

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