使用 cli 安装 方便快捷
开始安装 start:
npm i cool-static-cli -g
初始化 init:
mkdir project && cd project
cool-static-cli init
npm i
采用 webpack4 开发环境
开发运行 dev:
npm run dev
浏览器输入:http://localhost:8080即可预览页面
打包发布 build:
npm run build
目录结构
+-- config (项目配置目录) | +-- webpack.config.js | +-- postcss.config.js | +-- dist (打包后发布的所有资源) | +-- src (开发目录) | +-- favicon (地址栏图标) | +-- fonts (网页用到的字体) | +-- html (网页html) | | +-- include (包含引用的html碎片) | | | +-- header.html | | | +-- footer.html | | +-- views (包含每个页的html) | | | +-- index.html | +-- img (图片文件夹) | +-- js (js文件夹) | | +-- components (组件文件夹) | | | +-- art (模板组件) | | | +-- avatar (头像组件) | | | +-- code-lighter (代码高亮组件) | | | +-- debug (控制台调试组件) | | | +-- fixed (侧边导航滚动定位组件) | | | +-- lazeload (懒加载组件) | | | +-- map (百度地图组件) | | | +-- parallax (滚动视差组件) | | | +-- photoswiper (图片放大组件) | | | +-- promise (promise封装ajax组件) | | | +-- rightmenu (右键菜单组件) | | | +-- cool.js (主程序文件,处理无刷新路由,滚动条等) | | +-- lib (不需要打包的大文件第三方库文件夹,如swiper,jquery等) | | +-- page (包含每个页js) | | | +-- index.js (首页js) | | +-- index.js (入口主文件) | | +-- media (多媒体文件夹,存放视频音乐) | | +-- scss (scss文件夹) | | +-- common (公共组件样式件夹,头部底部) | | +-- components (组件文样式件夹) | | +-- include (一些基础样式文件夹) | | | +-- color.scss (设置颜色) | | | +-- fonts.scss (设置字体) | | | +-- mixins.scss (一些scss函数) | | | +-- ui.scss (ui样式) | | | +-- vars.scss (一些scss变量) | | +-- lib (一些不需要打包的公共样式,包括core里的所有) | | +-- core (核心样式已经打包到lib里) | | +-- page (存放每个页样式) | | +-- style.scss (入口样式) | +-- package.json
控制器与方法
1. 设置页面控制器
在每个页面article上添加data-controller="" 如:data-controller="index",这样在页面无刷新加载页面后能加载对应js里的方法内容
2. 设置页面方法在每个页面article上添加data-action="" 如:data-controller="init",不设置为默认方法init,这样在页面无刷新加载页面后能执行对应控制器的对应方法
3. 页面基础4. 控制器基础
4. 链接设置// 调用当前页要用的插件 import debug from '../components/debug/debug'; // 控制台调试 // 定义类 export default class Pages { // 构造函数默认自动执行 constructor(setNavActive) { // 设置导航第几个选中 setNavActive(3); // 控制台输出信息 方便调试页面是否加载 debug('pages controller is load'); } // 主方法 index() { // 调用方法 this.fangfa(); } // 定义方法 fangfa() { console.log('我是方法'); } }