Vue.js项目模板搭建图文教程-创新互联
前言
专注于为中小企业提供成都网站建设、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业建邺免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人,我的首要任务就是设计 整体的架构 。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度。然而,很多具体的问题还是要自己思考和解决的。
项目划分
我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立,而且规模不大。这样一来,既可以让这些小项目各自为政,也可以把它们集中放到一个大项目中管理。各自的优缺点如下:
项目模板考虑到我们团队刚开始使用「Vue.js」,需要逐步摸索出合适的架构。如果做成一个大项目,一旦架构要调整,很可能会伤筋动骨。所以最终的选择是 划分成多个小项目 。
虽然划分成多个小项目了,但是这些小项目也要保持一致的架构和公共代码。说白了,就是要根据业务情况搭建自己的项目模板,所有具体的项目都在这个模板的基础上开发。下面就介绍一下我们团队的项目模板的搭建过程。
初始化
项目模板本身也是一个项目,所以也通过「Vue-CLI」来初始化(项目名为「webapp-public」):
vue init webpack webapp-public
这里选用的是「webpack」模板,因为功能比较齐全。初始化的过程中要注意:
安装「Vue-Router」以支持单页应用;
安装「ESLint」以统一编码规范。
SASS
安装「SASS」的支持比较简单,先通过命令行安装相关依赖:
npm install node-sass --save-devnpm install sass-loader --save-dev
装好后,只要指定style标签的「lang」属性为「scss」,就可以用该语言来编写样式代码了:
REM布局
如今移动端的页面为了适应不同尺寸的手机屏幕,大多都在样式代码中使用rem作为尺寸单位。然而,设计师给的设计稿还是以px为单位的。这就需要把px转换为rem,这个转换可以在脑子里面转,也可以通过工具去转,比如「PostCSS」的插件「 postcss-px2rem 」。
初始化项目的时候,「PostCSS」就已经装上了,所以直接安装「postcss-px2rem」即可:
npm install postcss-px2rem --save-dev
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:Vue.js项目模板搭建图文教程-创新互联
网站路径:http://scyanting.com/article/dihsjo.html