前端项目模块化、组件化注意点

前端项目模块化、组件化注意点

src
api :前后端通信接口
assets:公共组件
fonts:字体
images:图片
styles:样式css
components:组件
pages:界面级组件
destination:目的地页面
index:首页
components:
index.art:模板
index.css:
index.js:

技术选型

获取数据：Ajax
开发语言：ES6
打包语言：Webpack --组件化
模板引擎：art-template

art-template 模板引擎

对比模板字符串
//获取api 接口数据
const students = api接口数据
//获取要插入的list位置id
const list = document.getElementById(‘list’);
//遍历接口数据
let html = ‘’;
for (const student of students) {
html += <li>${student.name ${student.age}}${student.sex}}</li>
}
//接口数据插入到id
list.innerHTML = html;

art-template
1.引入art-template script

2.准备好模板

3.获取模板
//template 的函数
//1根据获取id 2获取数据 输出字符串
template(‘tpl-student’,{
students // ‘students’:students,

})
//插入
const list = document.getElementById(‘list’);
list.innerHTML = template(‘tpl-students’,{students});

art-template 语法
1.引入模板引擎 script
2.准备好模板

//输出位置

//输出

const content = document.getElementById(‘content’);
//参数要放在对象中，即使没有参数也要传空的对象
content.innerHTML = template(‘tpl-1’,{
value:1，
data:{
key:2
}，
a:3,
b:4,
text:‘重点内容’

});

//优先使用标准语法 标准语法不能解决，再使用原始语法

条件语法
//条件
//模板输出

//获取输出位置
const conten =document.getElementById(‘content’);
//获取api 数据
content.innerHTML = template(‘tpl-2’,{

//sex：male，
// sex:female,
sex:’other‘

});

循环语法
//模板3

//输出位置

//输出位置添加内容
const list = document.getElementById(‘list’);
list.innerHTML = template(‘tpl-3’,{
students

});

art-template 子模板
//主模板中 引入 子模板

const content =document.getElementById(‘content’);
content.innerHTML = template(‘tpl-4’,{});

//向子模板传参 解决模板相似 但是 稍微内容不同
//如果需要向子模板传参 请使用原始语法
//子模板传参

const content =document.getElementById(‘content’);
content.innerHTML = template(‘tpl-4-2-index’,{});

shift + alt + 滚轮 多行
alt + L 一行相同的

Webpack中使用art-template

1.配置环境 初始化 默认即可
npm init
package-name :art-template-webpack 生成package.json文件
// 开发依赖包
npm install --save -dev webpack@4.44.1 webpack-cli@

//art-template 上线也会用到 不写 默认–save 生产
npm intall art-template@4.13.2

修改 scripts 里面 启动 配置
start weboack

配置 webpack.config.js

src 源码
.art 要用art-template 模板

修改之后直接 npm run start/ npm start

组件化开发 ：主要是分部分组，各个组件不同存储.拆分。
去除图片下方缝隙的 两种方式：
vertical-align:top;
display:block;
CSS3 transition-property属性 :令一个样式发生变化，
transition-property:transfrom;
transition-duration:0ms; //过渡效果需要花费的时间（以秒或毫秒计）