前端模块化的理解
模块化是个一般的概念,适用于所有软件,可以将软件按模块单独开发,各个模块都有一个标准的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页面上,显示页面。