构建前端组件化架构设计

前端模块化的理解

模块化是个一般的概念,适用于所有软件,可以将软件按模块单独开发,各个模块都有一个标准的API接口来进行通信,面向对象语言中各个对象的关注点分离与模块化是一个概念,降低软件的耦合度,方便代码管理和维护。
前端这几年发展很迅速,项目的代码量也越来越多,也就需要对代码进行管理。

未完待续............................
…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·

如何搭建环境

搭建之前需要准备的环境 node.js 和npm 最好是最新版的
1,创建一个空的文件夹
2,cmd进入该文件夹下
3,cmd输入 npm install vue-cli 创建一个基于webpack模板的一个项目
4,在该文件夹下输入 npm install webpack my-project 如果node版本低了,可能会报错。
5,下面会让你输入很多命令,看情况选择。不是很重要。
6,CMD进入在第四部创建的my-project项目文件夹下输入npm install,这一步是下载项目依赖的模块,项目目录下生成node_modules文件夹。如果你在cmd里局部安装某个组件,比如vue-router,它就会下载到mode_modules文件夹下,那么在项目里就可以通过import引入所需要的组件。
7,接下来就可以使用啦。看效果的话输入命令 npm run dev

项目结构

build和config是配置文件夹
src是写项目代码的文件夹,所有项目要用到的资源都放这里面。
main.js是入口文件,里面有一些important,用来导入依赖的包
带有vue后缀的是vue模板,模板由<template><script><style>组成,<template>里是在页面显示的代码<script>是页面逻辑代码<style>是项目样式。
index.html这个文件只有html的架子,里面比普通的html只多了一行
<div id="app"></div>它的目的是作为一个容器,main.js里的vue实例里的模板会绑定到id为app的这个html页面上,显示页面。

模块的引入

vue-router的使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端...
    玄木阅读 273,256评论 70 259
  • 作者:杨旭飞 学校:西三庄小学 指导:张老师 五官争宠 晚上主人...
    张老师的文学课堂阅读 841评论 0 0
  • 人和人相处 被理解时,是一种宽慰; 被信任时,是一种幸福; 被激励时,是一种动力; 被疏远时,是一种无奈; 被指责...
    Berlin_柏林阅读 166评论 0 0
  • 因为科比,我们上课提心吊胆也要看文字直播。 因为科比, 我们花光零用钱买杂志, 就为得到你的海报。 因为科比, 即...
    追风的猫阅读 330评论 1 3
  • 文/玥姝 可点击听歌: You are beautiful-Rachel Ruth 最近,一位简友给我推荐了一首动...
    玥姝阅读 1,624评论 2 6

友情链接更多精彩内容