文档章节

分享一个vue项目“脚手架”项目的实现步骤

开元中国2015
 开元中国2015
发布于 05/27 13:01
字数 1835
阅读 21
收藏 2

搭建缘由

源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后,每个人再去从私服pull一下项目才开始开发。但是每次初始化工程都是一步步的造轮子,一个个依赖去安装,新建一个个不同功能的文件夹,而每个负责人所初始化的项目目录、以及模块引入方式参差不齐,以至于开发中后期因每个人开发风格的不同导致git提交时总会产生各种各样的“冲突”,也会产生后期代码维护成本增加,所以就有必要考虑一下做一个统一的类似“脚手架”的功能了,用来给团队开发带来便捷的、统一的、易扩展的项目基础。

预实现的功能

  • 公共样式统一管理,全局sass的友好引入

  • 公共js统一管理

  • 解决vue脚手架初始化的部分问题

  • 路由形式、接口统一管理

  • store模块化管理

  • 定义vue前端项目必用的方法

  • 修改好统一的config配置

  • 全局混入/指令的封装

必要的依赖项

  • node-sass sass sass-resources sass-loader sass-recources-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: '<App/>'
})

解决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

 

您可能感兴趣的文章:

文章同步发布: https://www.geek-share.com/detail/2769911782.html

© 著作权归作者所有

开元中国2015
粉丝 43
博文 63
码字总数 92441
作品 0
大兴
私信 提问
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
0
0
vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一

最近自己做了一个vue做前端,nodejs做后的完整项目,在此过程遇到的问题和收获的心得分享出来,希望能和大家交流探讨。 项目搭建步骤 1.首先要确保计算机上安装了nodejs环境,才能进行以下步...

Tang5ge
2018/12/16
0
0
深入认识 vue-cli:能做的不仅仅是初始化 vue 工程

写于 2017.10.20 相信对于大部分使用过VueJS的同学来说,是他们非常熟悉的一个工具。借助,我们通过非常简单的问答形式,方便地初始化一个vue工程,完全不需要担心繁复的webpack、eslint配置...

Jrain
01/30
0
0
Vue-cli+Element+Less开发

大家好,我是苏日俪格,这篇文章可能会有一些遗漏的地方,当初写完没有保存,结果好多后来写的都没存上重新又写的,有问题的地方望读者告知,谢谢! 看到文章名字就大致清楚,本文是在vue脚手...

苏日俪格
2018/08/17
0
0
初探vue,react,angular的感受

虽然干了10年的前端,但是我一直把重心心放在标准和跨屏网站建设的用户体验上面,我依旧认为任何好的技术最终的目的就是用户体验,只有好的用户体验才是促进成交的砝码,我们应该把中心放在用...

蓬门网
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

两数的最大公约数

hello,复习一下数学知识! 最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。 因为之前做一个小功能,需要先计算一下数组的最大公约数,所以我就想记录一下...

woshixin
今天
3
0
学习Node.js的电子书大全

在这里,与大家分享一批很有用的 Node.js 的电子书资源。Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写...

jay603
今天
58
0
《伟大的博弈》读后感作文4100字

《伟大的博弈》读后感作文4100字: 五一小长假,作为工厂员工,没能跟上大家放假的步伐,窝家里两天没出门,逼着自己看完《伟大的博弈》,感触颇多。似乎不能消化,先记录第一遍作为幼稚的见...

原创小博客
昨天
5
0
单点登录-基于Redis+MySQL实现单点登录(SSO)

1. 为什么要用单独登录? 主要便于公司内部多系统统一认证授权管理,一次登录可访问多个跨域系统,也同时更加方便统一管理用户登录(员工离职需要拿掉登录权限、统计所有用户对系统的登录请求...

秋日芒草
昨天
2
0
827. Making A Large Island

思想: 将所有连通的 1 分成一个组,分配编号,然后使用BFS统计1的个数,得到这个组的面积。 遍历格子里所有为 0 的元素,检查四个方向的1所在的组并加上这个组面积。于是得到当前元素为 0 ...

reter
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部