分享vue项目“脚手架”的实施步骤

建筑原因

来源于公司每次启动多人开发的新项目，负责人都会对项目进行初始化，然后大家从私人服务中把项目拉出来再开始开发。然而，每个初始化项目都是一步一步地构建轮子，这取决于安装和创建具有不同功能的新文件夹。但是每个负责人初始化的项目目录和模块引入的模式是不均衡的，所以在提交git时，由于开发中后期每个人的开发风格不同，总会出现各种“冲突”，这也会导致后期代码维护的成本增加。因此，有必要考虑为团队制作一个像“脚手架”一样的统一功能

预先实现的功能

统一管理公共风格，友好的全局sass，引入统一管理公共js，解决vue支架初始化中的一些问题，统一管理路由形式和接口，存储的模块化管理，定义vue前端项目的必要方法，修改统一配置配置，全局混合/封装指令的必要依赖。

node-sassass-resources sass-loader sass-resources-loader vuex vuex-持久化状态axios babel-poly ill的项目目录如下

配置公共sass

目录资产scss文件格式

有关mixin.scss的详细信息，请参见mixin公共sass函数

Common.scss如下

@import。/mixin . scss '；//公共函数@import '。/icomoon . CSS '；//字体图标@import '。/wvue-CLI . scss '；//project public style modification utils . js引入到commom.css中，所以不需要在main.js或其他项目中引入。

//第57行以函数resolve resolve(name){ return path }开头。resolve (_ _ dirname '，/src/assets/scss/'名称)；} function generatesasresourceloper(){ var loaders=[cssLoader，///' postss-loader '，' sass-loader '，{ loader : ' sass-resources-loader '，options 3360 {//它需要一个绝对路径resolveResouce(' common . SCS ')]}]；if(options . extract){ return extract plugin . extract({ use : loaders，Fallback : ' Vue-style-loader ' })} else { return[' Vue-style-loader ']。concat(Loaders)} }//注意返回{css: generateLoaders()、postcss: generateLoaders()、less: generateLoaders('less ')、SAS : generates assresourceloader()、scss 3360 generates resourceloader()、Stylus : Generate Loaders(' Stylus ')、styl : Generate Loaders(' Stylus ')接口统一管理

js目录下的UrlConfig.js

//开发环境中使用了config下proxyTable的代理地址var BASE _ URL='/API '；var ispro=流程。env . node _ env==' production ' if(ispro){ base _ URL=' http://113 . 113 . 11133608011 '//address in production environment } Const URL config={ getuserinfo : base _ URL ' user/getinfo '，//get user information } export default { UrlConfig }；页面使用，例如：

这个。$ http.post(这。URL _ config . URL config . getuser info，dataset)。然后(RES={console.log (RES)})。catch(错误={ console . log(error)})//URL _ config查看全局混合管理的方法

全局混合主要用于函数方法、计算属性、过滤方法等。由项目中的每个页面或模块使用。

文件所属的组件

//以下只是其中一种思路从" @/assets/js/urlConfig.js "导入URL _ CONFIG const mixin={ data(){ return { URL _ CONFIG : URL _ CONFIG }，methods: { //像时间戳转换这种方法大多数项目都能用的到，可以写在过滤器里也可以写在计算里，取决于运用场景formatDate(date，fmt) { if (/(y )/.测试(fmt)){ fmt=fmt。替换(RegExp .$1，(date.getFullYear()' ').substr(4 - RegExp .$ 1 .长度))；}让o={ 'M ': date.getMonth() 1，' d ': date.getDate()，' h ': date.getHours()，' m ': date.getMinutes()，' s ' : date。getseconds()}；用于(让k进入o) { if (new RegExp(`(${k})`).test(fmt)){ let str=o[k]' '；fmt=fmt.replace(RegExp .$1，(RegExp .$1.length===1)？str :这个。padleft zero(str))；} }返回fmt}，padLeftZero(str){ return(' 00 ' str).substr(字符串。长度)；}，loadPage(路径，参数){这个.$router.push({ path:path，query : params })} } }导出默认混入类在main.js中引入

//自定义全局来自@/组件/公共/混合。混合蛋白的mixinimport mixins全局指令管理

全局指令主要用于各个项目中由于某视频剪辑软件指令不能满足需求，自定义的指令形式，在页面编写过程中可以带来很多的便利。

文件所属组件mondireactiveindex。射流研究…

//以下只是一种思路，主要目的是分享自定义指令的方法让我的指令={ }我的指令。install=function(Vue){//背景颜色Vue.directive('bg '，{ bind(el，binding){ El。风格。color=' # f6f 6} }), //主题色Vue.directive('color '，{ bind(el，binding){ El。风格。color=' # 42e5d 3} })，Vue.directive('theme '，function(El){ El。风格。color=' # 42e5d 3 ' El。风格。背景=' # f6f 6 ' })，//图片未加载完之前先用随机背景色占位Vue.directive('img '，{ inserted:function (el，binding){ var color=math。地板(数学。random()* 1000000)；埃尔。风格。背景颜色=' # ' colorvar img=new Image()；img。src=绑定。价值；img。onload=function(){ El。风格。背景图像=' URL '(绑定。value))' } })}导出默认的my指令；在main.js中引入

//自定义全局指令从“@/组件/通用/指令”Vue。使用(指令)存储区导入指令模块化管理

商店模块化管理主要是满足不同开发人员的需求、避免使用单一商店文件导致命名冲突。同时在主要的里定义了统一的模块文件满足大多数项目开发的场景需求。

文件所属storemain.js

从“vue”导入某视频剪辑软件从“vuex”导入状态管理从" @/路由器"导入爱可信从“Axios”导入createPersistedState从“vuex-persistedstate”导入baseInfo_store从"。/BaseInfo ' Vue。use(Vuex)const store=new Vuex .商店({//用不同的模块管理状态管理存储数据模块： { BaseInfostore : BaseInfo _ store，//userInfo模块}，plugins :[createPersistedState({ storage : }窗口。会话存储})]})//切换页面一般需要的装货动画状态商店。注册模块('页面开关'，{ state: { isLoading: false }，突变： { updateLoadingStatus(状态，有效负载){ state。isloading=有效负载。isloading } })//切换路由的同时切换标题路由器。在每个(函数(to，from，next){ if(to。梅塔。标题){文档。title=to。梅塔。title }商店。commit(' updateloading status '，{ isload : true })next()})路由器。在每个(功能(到){ store。commit(' updateloading status '，{ isload : false })})//Ajax请求的动画状态商店。注册模块(' AJaxsswitch '，{ state : { AJaxisloading : false，ajaxIsPrompt: false，}，突变： { AJaxstar(state){ state。AJaxisloading=true }，AJaxend(state){ state。AJaxisloading=false }，AJaxprompt(state){ state。AJaxispropt=false } } .请求拦截axios。拦截器。请求。使用(config={ store。提交(' AJaxstar ')返回配置；})//响应拦截axios。拦截。回应。使用(配置={//需要拦截的请求头返回配置})导出默认存储；在main.js引入

从" @/store/main.js "导入存储；main.js的最终形式

从“vue”导入某视频剪辑软件从“应用程序”导入/App”从导入路由器"。/路由器"从axios '导入axios”；导入“巴别塔-保利病”；从" @/store/main.js "导入存储；//自定义全局来自@/组件/公共/混合。混合蛋白的混合最小端口自定义全局指令从@/组件/通用/指令' Vue。使用(指令)Vue。配置。生产提示=FallVue。原型。$ http=axios导入指令；/* ESL int-禁用无新*/新Vue({ el: '#app '，路由器，商店，组件： { App }，模板： 'App/'})解决脚手架初始配置的打包路径问题

其实这个在上面文件中已经有体现了，在这里再次提及一下。

步骤1:修改configindex.js文件

将构建{ }下的assetsPublicPath改为如下

资产公共路径：'。/',步骤2:修改buildutils.js文件

找到后退： 'vue型装载机，在其下加入下面这一行

publicPath: '././'结语

至此，一个基本完备的某视频剪辑软件项目"脚手架"就完成了，以后每次初始化项目都可以按照这套方案来进行，省去了很多协作开发的交流环节，形成了能够满足大多数项目的目录及文件构成形式，将此项目托管至私服每次初始化项目只需拉取这个"脚手架"便能省区不少初始化项目的时间，岂不美哉！

此"脚手架"项目已开源至github，欢迎大家提出建议和互相交流，同时也可随意将项目拉下来进行使用。

一个基于vue.js的脚手架

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。