资讯专栏INFORMATION COLUMN

基于vue-cli3.0的项目工程重新构建空白版,拿来即用

xingpingz / 2768人阅读

摘要:写在前面使用框架开发时,很多人会选择官方提供的脚手架,最新的已经更新到完全无配置,只需下载就能方便的使用构建的项目工程,但基础的并不能满足正常的项目开发,在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。

写在前面

使用vue框架开发时,很多人会选择vue官方提供的cli脚手架,最新的cli已经更新到3.0完全无配置,只需下载就能方便的使用vuecli构建的项目工程,但基础的cli并不能满足正常的项目开发,在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。

我在vuec-li3的基础之上重新做了些构建,分为pc,移动两版,主要区别是移动版添加了分辨率适配,本项目为空白版,拿来即用,省却每次手动构建项目工程!!

GitHub查看项目内容 https://github.com/wwenj/vueC...

PC

pc版安装了elementUI做统一UI展示

安装scss写样式

移动

移动端适配:本项目使用vw单位统一对分辨率做适配,在vuecli工程里,根据大漠的《如何在Vue项目中使用vw实现移动端适配》用webpack中做配置。

基础配置

svg组件:

文件在src/icons/中,组件在component公共组件中封装用于svg展示组件,用做小icon的展示,svg保存在icons/下,使用时组件中调用即可

css样式

src/style/中,全局公共样式,初始化样式。

路由与vuex

对vue router和vuex做了相同的模块化处理,在router/store/中统一写路由和vuex相关信息,可按功能分模块引入

请求拦截与封装

使用axios做请求,在src/request/http.js中做了封装,用axios拦截器对请求和响应做统一拦截,处理每次请求的token信息或者响应状态码

对axios请求进行简单封装get,post请求,统一传参,响应后传回一个promise对象,在src/request/api.js中将每个接口封装,对外暴露请求改接口的方法名,返回一个promise,组件中直接调用api.js中的方法名即可

工具类

src/utils/中,对常用枚举值、全局组件注册、常用类功能模块做模块化封装

vue.config.js

vuecli3隐藏所有配置,添加新配置项目中新建vue.config.js文件,本项目在其中加了一些常用配置,文件夹的别名,代理,打包路径等

Eslint

eslint使用默认规则,在vscode编辑器中配合eslint插件的保存自动修复功能,每次保存后会按照eslit规则自动修复

目录结构

src/views文件下写业务模块,src/components写公共基础组件

写在结尾

本项目只是根据自己开发习惯整理的一套基于vuecli3的重新构建项目,为了让开发更方便,清晰,每次写新项目,个人项目,写demo下载即用,比较方便,如有问题欢迎指教

GitHub查看项目内容 https://github.com/wwenj/vueC...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106380.html

相关文章

  • 基于webpack模仿vue-cli(简略工程

    摘要:但高度封装的带来方便的同时,很多人却很少去关注轮子的内部结构,以至于当使用需要手动配置一些东西如编译实现代码压缩,移动端适配等配置的时候往往无从下手。废话不多说,下面我们来看看如何基于模仿实现项目工程化。 从零搭建vue-cli 原创不易,如需转载请联系作者并注明出处 vue-cli的出现为vue工程化前端开发工作流提供了开箱即用的构建配置,减轻了烦人的webpack配置流程。但高度封...

    GitCafe 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • vue-cli3.0初体验~

    摘要:比如传递给时,使用。为所有的及其预处理文件开启。在生产环境下为和使用在多核机器下会默认开启。是否使用分割供应的包也可以是一个在包中引入的依赖的显性的数组。查阅配置行为。 之前因为parcel的出现,webpack也跟进了零配置vue-cli自然也不能落下,cli3.0也升级到webpack4,并增加许多新特性 安装并创建一个项目 支持npm和yarn npm install -g @v...

    AlphaWallet 评论0 收藏0

发表评论

0条评论

xingpingz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<