代码拉取完成,页面将自动刷新
vue2.0
已经上线有一段时间了, 现在vue2.5
也都已经发布了,对于vue.js
来说相信大家都已经很熟悉了。然而对于团队来说,
由于过去种种的原因,目前项目还是使用zeptos.js
+ gulp.js
的方式进行开发, 同时部分页面因为兼容seo友好的情况下,进行后端渲染,后端为java
的freemarker
模板, 因此对于整个项目的前端升级一直即为头痛。
随着webpack2
的发布,以及其模块化和当下业界的支持,今天基于其他同学的一些参考以及改造,编写了一套vue.js
的多页面脚手架,用于常态业务的逐步升级
Node.js
v6.x npm
v5.5.1windows 7
以及上 与 mac os
安装前端项目工程依赖包
npm install
开发运行环境;运行命令后,浏览器自动打开 http://localhost:8091/views/pages/index.html
npm run dev
开发完成后打包命令,会生成dist文件夹 可通过启动静态服务指向dist目录访问
npm run build
Lib.js
库 -> 公用第三方库插件,公用js,css 以及静态资源可在Lib.js中调用views
/pages/index.html,views
就是我们线上的模块名webpack2
,更高的构建速度,包体积更小,全面支持ES6 Modules
Less
css预处理webpack
|---build
|---src
|---assets #资源
|---css/common.css #css
|---font/ #字体图标
|---js/common.js #自己定义的全局通用事件
|---js/conf.js #项目的配置
|---js/Lib.js #暴露接口给组件调用
|---components 组件
|---c-head
|---c-head.vue head组件
|---c-products
|---c-products.vue 产品列表组件
|---c-swiper
|---c-swiper.vue 轮播图组件
|---views #各个页面模块,模块名可以自定义哦!
|---pages #页面模块
|---index 首页模块
|---index.html
|---index.vue
|---index.js
|---list 列表页模块
|---list.html
|---list.vue
|---list.js
|---detail 详情页页模块
|---detail.html
|---detail.vue
|---detail.js
......
此项目脚手架为vue2多页面脚手架, 目前还在开发预演中,要使用到生产环境上请大家谨慎选择 谢谢!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。