Share a vue project "scaffolding" project implementation steps

Reasons to build

After starting from the company every time a new multiplayer co-developed by the person in charge of the project by the project initialization, everyone began to go about the project development from PW pull. But each time the wheel initialize projects are made step by step, one by one dependent to install, create a new folder different functions, and each person is responsible for the initialization of the project directory, as well as the introduction of modules uneven manner, so that the development in late because everyone is different style of development leads to always have a variety of "conflict" when git commit, will also have post-code maintenance costs increase, so it is necessary to consider to make a uniform similar to the "scaffolding" function , and to bring convenient, unified, extensible foundation for team development project.

Pre-function implemented

The introduction of public-friendly style unified management of global sass
Public js unified management
Part of the solution vue scaffolding initialization
Routing form, unified interface management
Modular store management
The method defined vue distal project must be used
Modify good uniform config configuration
Global mixed / instruction package

The necessary dependencies

node-sass sass sass-resources sass-loader sass-recources-loader
vuex vuex-persistedstate
axios
babel-polyfill

Project directory as follows

Configuring Public sass

Catalog assets> scss file format

mixin.scss available at mixin public sass function

common.scss follows

@import './mixin.scss'; // public function
@import './icomoon.css'; // font icon
@import './wvue-cli.scss'; // style public projects

Modify utils.jsthe introduction commom.css, do not main.js or other items in the pages introduced

//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'].the concat (loaders to) 
// Note here
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

Unified Management Interface

urlConfig.js in the js directory

// development environment using the proxy address proxyTable config 
var BASE_URL = '/ API'; 
var = process.env.NODE_ENV isPro === 'Production' 
IF (isPro) { 
BASE_URL = 'http://113.113.113.113:8011 '// the address of the next production 
} 

const = {UrlConfig 
getUserInfo: BASE_URL +' user / the getinfo ', // obtain user information 
} 
Export default { 
UrlConfig 
};

Page usage example:

the this. $ http.post (this.URL_CONFIG.UrlConfig.getUserInfo, DATAS) 
.then (RES => { 
the console.log (RES) 
}). the catch (error => { 
the console.log (error) 
}) 
// URL_CONFIG see global mix of methods

Global management of mixed

Global Project function method is mainly used for mixing each page or module will be used to calculate properties, filtration methods.

File belongs components> common> mixins> index.js

// The following is just an idea 
Import from URL_CONFIG '@ / Assets / JS / urlConfig.js'; 
const = {a mixin 
Data () { 
return { 
URL_CONFIG: URL_CONFIG 
}, 
 Methods: { 
// This method converts the time stamp as most of the projects can be used to, you can write in the filter can also be written in computed years, depending on the use scenario 
formatDate (DATE, fmt) { 
IF (/(y+)/.test(fmt)) { 
fmt = fmt. Replace (. the RegExp $. 1, (the Date.getFullYear () + '') .substr (. 4 - the RegExp $ 1.length).); 
} 
the let O = { 
'+ M': date.getMonth () +. 1, 
'+ D': date.getDate (), 
'+ H': date.getHours (), 
'+ m': date.getMinutes (), 
'+ S': date.getSeconds () 
}; 
for (in the let K O) { 
IF (new new the RegExp ( `($ {k})` ) .test (fmt)) { 
the let O STR = [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

Introduced in main.js

// custom global a mixin 
Import as mixins from '@ / Components / Common / as mixins' 
Vue.mixin (as mixins)

Global Order Management

Global instruction is mainly used for various projects due vue instruction fails to satisfy demand, self-instruction form defined in the process of writing a page can bring a lot of convenience.

File belongs components> common> directive> index.js

// The following is just an idea, the main purpose is to share a custom process instructions 
the let mydirective = {} 
mydirective.install = function (Vue) { 
// background color 
Vue.directive ( 'BG', { 
the bind (EL, Binding) { 
el.style.color = '# f6f6f6'; 
} 
}), 
// theme color 
Vue.directive ( 'color', { 
the bind (EL, Binding) { 
el.style.color = '# 42E5D3'; 
} 
}) , 
Vue.directive ( 'Theme', function (EL) { 
el.style.color = '# 42E5D3' 
el.style.background = '# f6f6f6' 
}), 
before loading // image incompletely random preempted background color bit 
Vue.directive ( 'IMG', { 
inserted The: function (EL, Binding) { 
var Color = Math.floor (Math.random () * 1000000); 
el.style.backgroundColor = "#" + color; 
var IMG = new new Image (); 
IMG.src = binding.value;
img.onload = function(){
el.style.backgroundImage = 'url('+ binding.value +')'
}
}
})
}

export default mydirective;

Introduced in main.js

// custom global command 
Import from Directive '@ / Components / Common / Directive' 
Vue.use (Directive)

Modular store management

Modular store management is mainly to meet the needs of different developers, to avoid the use of a single store files lead to naming conflicts. At the same time defines a uniform module file in the main scenario to meet the needs of the majority in project development.

File-owned store> main.js

Vue from Import 'VUE' 
Import from Vuex 'vuex' 
Import from Router '@ / Router' 
Import from the Axios 'Axios' 
Import from createPersistedState 'vuex-persistedstate' 

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

const Store Vuex.Store new new = ({ 
// different data storage module management vuex 
modules: { 
baseInfoStore: baseInfo_store, // the userInfo module 
}, 
plugins: [createPersistedState ({ 
storage: window.sessionStorage 
})] 
}) 
// switch page loading animation states generally required 
store.registerModule ( 'pageSwitch', { 
state: { 
isLoading: to 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 to true = 
}, 
ajaxPromptHide (State) {
= to false state.ajaxIsPrompt 
} 
}, 
getters: { 
ajaxIsLoading: State => state.ajaxIsLoading 
} 
}) 
// request interceptor 
Axios.interceptors.request.use (config => { 
store.commit ( 'ajaxStar') 
return config; 
} ) 
// response to intercepting 
Axios.interceptors.response.use (config => { 
// need to intercept request header 
return config 
}) 
Export default Store;

Introduced in main.js

import store from '@/store/main.js';

The final form of 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: '<App/>'
})

Packaging path to solve the problem vue-cli initial configuration

In fact, this has been reflected in the above document, here I mentioned it again.

Step 1: Modify config> index.js file

The assetsPublicPath} changed as follows in the build {

assetsPublicPath: './',

Step 2: Modify the build> utils.js file

Found fallback: 'vue-style-loader', add the following line in which the

publicPath: '../../'

Epilogue

So far, almost an entire project vue "scaffolding" to complete, after each initialization project can be carried out in accordance with this program, eliminating the need for the exchange of many aspects of collaborative development, the formation of directories and files meet most projects forms, this project hosting private servers to initialize each item just pull this time "scaffolding" many provinces will be able to initialize the project, not Miya!

This "scaffolding" open source project to github, welcome suggestions and interact with each other, but also free to use the project were pulled down.

A scaffolding based on vue.js

You may also be interested in the article:

Article simultaneous release: https://www.geek-share.com/detail/2769911782.html

Share a vue project "scaffolding" project implementation steps

You may also be interested in the article:

Guess you like