vueプロジェクトの足場プロジェクトを共有

理由を作る.
会社が複数人で共同開発したプロジェクトを新たに起動するたびに責任者がプロジェクトを初期化した後、一人一人が私服pullからプロジェクトを始めたからだ.しかし、初期化工事のたびに一歩一歩車輪を作り、一つ一つインストールに依存し、異なる機能のフォルダを新築し、責任者一人一人が初期化したプロジェクトディレクトリやモジュールの導入方式がバラバラで、開発中後期に開発スタイルの違いでgitが提出されると様々な「衝突」が発生する.後期コードのメンテナンスコストが増加することもあるので、チーム開発に便利で統一的で拡張しやすいプロジェクト基盤をもたらす「足場」のような機能を統一することを考慮する必要があります.
プリインプリメンテーション機能

共通スタイル統一管理、グローバルsassの友好導入

公共js統一管理

vue足場初期化の一部の問題を解決する

ルーティング形式、インタフェース統一管理

storeモジュール化管理

vueフロントエンドプロジェクトを定義するために必要な方法

統合config構成

を修正

グローバル混入/指令のパッケージ

必要な依存

node-sass sass sass-loader sass-resources-loader

vuex vuex-persistedstate

axios

babel-polyfill

プロジェクトディレクトリは次のとおりです.
共通sassの構成
ディレクトリassets>scssファイル形式
mixin.scss内容詳細はmixin共通sass関数を参照
common.scssの内容は以下の通りです
@import './mixin.scss';//共通関数
@import './icomoon.css';//フォントアイコン
@import './wvue-cli.scss';//プロジェクトの共通スタイル
修正utils.js commom.cssを導入すると、main.jsまたは他のプロジェクトのページに導入する必要はありません.

//57   
function resolveResouce(name) {
    return path.resolve(__dirname, '../src/assets/scss/' + name);
  }
  function generateSassResourceLoader() {
      var loaders = [
   cssLoader,
   // 'postcss-loader',
   'sass-loader',
   {
       loader: 'sass-resources-loader',
       options: {
         // it need a absolute path
         resources: [resolveResouce('common.scss')]    
       }
   }
      ];
      if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader'
   })
      } else {
   return ['vue-style-loader'].concat(loaders)
      }
  }
  //     
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

インタフェース統合管理
jsディレクトリのurlConfig.js

//      config proxyTable     
var BASE_URL = '/api';
var isPro = process.env.NODE_ENV === 'production'
if(isPro){
    BASE_URL= 'http://113.113.113.113:8011'  //        
}

const UrlConfig = {
  getUserInfo:BASE_URL +'user/getinfo',  //      
}
export default {
  UrlConfig
};

ページの使用方法:

this.$http.post(this.URL_CONFIG.UrlConfig.getUserInfo,datas)
.then(res =>{
    console.log(res)
}).catch(error =>{
    console.log(error)
})
// URL_CONFIG         

グローバル混入管理
グローバルには、主にプロジェクト内の各ページまたはモジュールで使用される関数メソッド、計算プロパティ、フィルタリングメソッドなどに使用されます.
ファイルが属するcomponents>common>mixins>index.js

//          
import URL_CONFIG from '@/assets/js/urlConfig.js';
const mixin = {
     data(){
      return {
        URL_CONFIG:URL_CONFIG
     },
     methods: {
     //                    ，    filter      computed ，       
      formatDate(date, fmt) {
          if (/(y+)/.test(fmt)) {
              fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
          }
          let o = {
              'M+': date.getMonth() + 1,
              'd+': date.getDate(),
              'h+': date.getHours(),
              'm+': date.getMinutes(),
              's+': date.getSeconds()
          };
          for (let k in o) {
              if (new RegExp(`(${k})`).test(fmt)) {
                  let str = o[k] + '';
                  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
              }
          }
          return fmt;
      },
      padLeftZero(str) {
          return ('00' + str).substr(str.length);
      },
      loadPage(path,params){
        this.$router.push({
          path:path,
          query:params
        })
      }
    }
}
export default mixin

main.jsに導入
//カスタムグローバルmixin
import mixins from '@/components/common/mixins'
Vue.mixin(mixins)
グローバルコマンド管理
グローバルコマンドは主に各プロジェクトでvueコマンドが需要を満たすことができないため、カスタマイズされたコマンド形式で使用され、ページ作成中に多くの便利さをもたらすことができます.
ファイルが属するcomponents>common>directive>index.js

//        ，               
let mydirective = {}
mydirective.install = function (Vue) {
  //    
  Vue.directive('bg', {
    bind(el, binding) {
        el.style.color = '#f6f6f6';
    }
  }),
  //   
  Vue.directive('color', {
    bind(el, binding) {
        el.style.color = '#42E5D3';
    }
  }),
  Vue.directive('theme',function(el){
    el.style.color = '#42E5D3'
    el.style.background = '#f6f6f6'
  }),
  //                  
  Vue.directive('img', {
  inserted:function (el, binding) {
    var color = Math.floor(Math.random()*1000000);
    el.style.backgroundColor = "#" + color;
    var img = new Image();
    img.src = binding.value;
    img.onload = function(){
      el.style.backgroundImage = 'url('+ binding.value +')'
    }
  }
  })
}

export default mydirective;

main.jsに導入
//カスタムグローバル命令
import directive from '@/components/common/directive'
Vue.use(directive)
storeモジュール化管理
storeモジュール化管理は、主に異なる開発者のニーズを満たし、単一storeファイルによるネーミング競合を回避することです.同時にmainで統一されたモジュールファイルが多くのプロジェクト開発のシーンニーズを満たすことを定義した.
ファイルが属するstore>main.js

import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'
import Axios from 'axios'
import createPersistedState from 'vuex-persistedstate'

import baseInfo_store from './baseInfo'
Vue.use(Vuex)

const store = new Vuex.Store({
//         vuex    
  modules: {
    baseInfoStore: baseInfo_store,  //userInfo  
  },
  plugins: [createPersistedState({
      storage: window.sessionStorage 
  })]
})
//         loading    
store.registerModule('pageSwitch', {
  state: {
    isLoading: false
  },
  mutations: {
    updateLoadingStatus (state, payload) {
      state.isLoading = payload.isLoading
    }
  }
})
//         title
router.beforeEach(function (to, from, next) {
  if(to.meta.title){
    document.title = to.meta.title
  }
  store.commit('updateLoadingStatus', {isLoading: true})
  next()
})

router.afterEach(function (to) {
  store.commit('updateLoadingStatus', {isLoading: false})
})
//ajax       
store.registerModule('ajaxSwitch', {
  state: {
    ajaxIsLoading: false,
    ajaxIsPrompt: false,
  },
  mutations: {
    ajaxStar (state) {
      state.ajaxIsLoading = true
    },
    ajaxEnd (state) {
      state.ajaxIsLoading = false
    },
    ajaxPromptShow (state) {
      state.ajaxIsPrompt = true
    },
    ajaxPromptHide (state) {
      state.ajaxIsPrompt = false
    }
  },
  getter : {
    ajaxIsLoading: state => state.ajaxIsLoading
  }
})
//    
Axios.interceptors.request.use(config => {
  store.commit('ajaxStar')
  return config;
})
//    
Axios.interceptors.response.use(config => {
  //        
  return config
})
export default store;

main.jsで導入
import store from '@/store/main.js';
main.jsの最終形式

import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios';
import "babel-polyfill";
import store from '@/store/main.js';
//     mixin
import mixins from '@/components/common/mixins'
Vue.mixin(mixins)
//       
import directive from '@/components/common/directive'
Vue.use(directive)

Vue.config.productionTip = false
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

vue-cliの初期構成のパッケージングパスの問題を解決する
実はこれは上の書類にすでに現れているので、ここでもう一度言及します.

ステップ1:config>index.jsファイル

を変更する
build{}の下のassetsPublicPathを次のように変更します.
assetsPublicPath: './',

ステップ2:build>utils.jsファイル

を変更する
fallback:'vue-style-loader'を見つけて、その下に次の行を加えます.
publicPath: '../../'
締めくくり
これで、基本的に完備したvueプロジェクトの足場が完成し、その後、初期化プロジェクトのたびにこの方案に従って行うことができ、多くの協力開発の交流の一環を省き、多くのプロジェクトを満たすディレクトリとファイルの構成形式を形成した.このプロジェクトを私服に管理する初期化プロジェクトのたびに、この足場を引くだけで多くの初期化プロジェクトの時間を節約することができます.
この足場プロジェクトはgithubにオープンしました.アドバイスと交流を歓迎します.また、プロジェクトを勝手に引き下ろして使用することもできます.
A scaffolding based on vue.js
開梱即用操作方式
npm i wwvue-cli -g
wwvue-cli init project-name