拼多多项目实战-项目搭建思维导图
树图思维导图提供 拼多多项目实战-项目搭建 在线思维导图免费制作，点击“编辑”按钮，可对 拼多多项目实战-项目搭建 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a9084bca56c990ec084169240edd439a
思维导图大纲
拼多多项目实战-项目搭建思维导图模板大纲
1. 脚手架
vue-cli是vue官方提供用于搭建基于vue+webpack+es6项目的脚手架工具
官方文档
https://www.npmjs.com/package/vue-cli
基本步骤
npm install -g vue-cli
vue init webpack lkpdd
cd lkpdd
npm install
npm run dev
运行: localhost:8080
2. 项目初始化结构
3. 编译和打包
开发环境运行
npm run dev (自动编译打包)
在内存中对拼多多项目进行编译和打包
http://localhost:8080/#/
生产环境打包运行
npm i serve -g --save
服务器运行命令
npm run build
serve dist
http://localhost:5000/#/
4. 项目目录结构设计
5. CSS预编译器选择
1. 主流的三种预编译器
Less
Sass
Stylus
概念
富有表现力的、动态的、健壮的CSS
参考手册
https://www.zhangxinxu.com/jq/stylus/
快速上手
2. 安装stylus依赖包
npm i stylus stylus-loader --save-dev
3. 如何使用
<style scoped lang="stylus" ref="stylesheet/stylus"></style>
在模板中配置
4. 配置默认的初始化样式文件
/common/stylus/mixins.styl
/static/css/reset.css
http://meyerweb.com/eric/tools/css/reset/
全局引入
index.html
<link rel="stylesheet" href="/static/css/reset.css">
6. 移动端项目必须配置
1. 视口(viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
2. 点击响应延迟3毫秒
原因
这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。
使用
地址
https://github.com/ftlabs/fastclick
引用和配置
<script src="static/js/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } </script>
Made By 叶建华
撩课学院(itlike.com)
WeChat yejh9522
自由主题
沪公网安备 31011502019485号
上海工商