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

　　

　　

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

　　

　　

　　<李>公共样式统一管理,全局sass的友好引入李 　　<李>公共js统一管理李 　　<李>解决vue脚手架初始化的部分问题 　　<李>路由形式,接口统一管理李 　　<李>存储模块化管理李 　　<李>定义vue前端项目必用的方法 　　<李>修改好统一的配置配置李 　　<李>全局混入/指令的封装李 　　

　　

　　

　　<李> node-sass sass sass-resources sass-loader sass-recources-loader李 　　<李> vuex vuex-persistedstate李 　　<李> axios李 　　<李> babel-polyfill李 　　

　　

　　

　　

　　

目录assets> scss文件形式

　　

mixin.scss内容详见mixin公共sass函数

　　

common.scss内容如下

　　

@ import”。/mixin.scss ';//公共函数
　　@ import”。/icomoon.css ';//字体图标
　　@ import”。/wvue-cli.scss ';//项目公共样式 　　

修改<代码> utils.js 引入commom.css,就不用在主要。js或其他项目中的页面引入了

　　 　　//57行开始 　　函数resolveResouce(名字){ 　　返回路径。解决(__dirname”. ./src/资产/scss/+名字); 　　} 　　函数generateSassResourceLoader () { 　　var装载机=[ 　　cssLoader,//皃ostcss-loader”, 　　“sass-loader”, 　　{ 　　装载机:“sass-resources-loader”, 　　选择:{//需要一个绝对路径 　　资源:[resolveResouce (common.scss)] 　　} 　　} 　　]; 　　如果(options.extract) { 　　返回ExtractTextPlugin.extract ({ 　　用途:装载机、 　　回退:“vue-style-loader” 　　}) 　　其他}{ 　　返回(“vue-style-loader”) .concat(加载器) 　　} 　　}//注意这里 　　返回{ 　　css: generateLoaders (), 　　postcss: generateLoaders (), 　　少:generateLoaders(少), 　　sass: generateSassResourceLoader (), 　　scss: generateSassResourceLoader (), 　　笔:generateLoaders(笔), 　　styl: generateLoaders(笔) 　　} 　　 　　

　　

js目录下的urlConfig.js

　　 　　//开发环境用配置下proxyTable的代理地址 　　var BASE_URL=/api的; 　　var isPro=process.env。NODE_ENV===吧? 　　如果(isPro) { 　　BASE_URL=' http://113.113.113.113:8011 '//生产环境下的地址 　　} 　　 　　const UrlConfig={ 　　getUserInfo: BASE_URL +用户/getinfo,//获取用户信息 　　} 　　出口默认{ 　　UrlConfig 　　}; 　　 　　

页面使用方式例如:

　　 　　 　　这个。http.post美元(this.URL_CONFIG.UrlConfig.getUserInfo数据) 　　不要犹豫(res=祝辞{ 　　console.log (res) 　　})。抓住(错误=祝辞{ 　　console.log(错误) 　　})//URL_CONFIG见全局混入中的方法 　　 　　

　　

全局混入主要用于项目中每个页面或模块都会用到的函数方法,计算属性,过滤方法等。

　　

文件所属components> common> mixins> index.js

　　 　　//以下只是其中一种思路 　　从“@/资产/js/进口URL_CONFIG urlConfig.js”; 　　const mixin={ 　　数据(){ 　　返回{ 　　URL_CONFIG: URL_CONFIG 　　}, 　　,方法:{//像时间戳转换这种方法大多数项目都能用的到,可以写在过滤器里也可以写在计算里,取决于运用场景 　　formatDate(日期、fmt) { 　　如果(/(y +)/test (fmt)) { 　　fmt=fmt.replace (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) { 　　如果新的正则表达式(($ {k})) test (fmt)) { 　　让str=o [k] +”; 　　fmt=fmt.replace (RegExp。1美元,(RegExp。1美元。长度===1)& # 63;str: this.padLeftZero (str)); 　　} 　　} 　　返回fmt; 　　}, 　　padLeftZero (str) { 　　返回(“00”+ str) .substr (str.length); 　　}, 　　loadPage(路径,params) { 　　美元。router.push ({ 　　路径:路径, 　　查询:参数 　　}) 　　} 　　} 　　} 　　出口默认mixin

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