1-pdd移动端项目搭建

Pdd项目

项目搭建

vue-cli脚手架

基本步骤

//安装vue-cli
npm install -g vue-cli

//基于webpack创建一个名为pdd的项目
vue init webpack pdd

cd pdd

//下载依赖包
npm install

//运行客户端
npm run dev

浏览器运行: localhost:8080

---

项目初始化结构

build （webpack相关的编译文件夹（无需改动））

config （webpack相关的配置文件夹（无需改动））

​ ------index.js （用于指定后台服务器的端口号、是否打开浏览器、配置代理）

node_modules （当前应用程序依赖的第三方库）

src （代码文件夹）

​ -------App.vue （应用组件文件）

​ -------main.js （应用程序入口）

static （ 静态资源文件夹（全局样式、图片…））

.babelrc （ babel的配置文件）

.editorconfig 对编辑器的格式/编码进行全局配置

.gitignore （ Git版本管理配置）

.postcssrc.js （通过js插件来转化css）

index.html （主页面文件）

packsge.json （应用包配置文件（应用名称、版本号…））

README.md （应用包描述文件（开发记录文件））

yarn.lock （ 锁定包的版本和包所需要的依赖）

---

编译打包

开发环境运行

npm run dev (自动编译打包)

---

项目目录结构设计

项目src目录下

​ api （后台数据接口交互文件）

​ common （ 通用资源文件夹，如image/style/fonts）

​ commponents （非路由组件文件夹）

​ filter （自定义过滤器文件夹）

​ mock （模拟数据接口文件夹）

​ router （路由文件夹）

​ store （Vuex相关文件夹）

​ Views （路由组件文件夹 （这里是pages））

​ App.vue （应用组件文件）

​ main.js （项目入口文件）

---

CSS预编译器选择

主流三种的预编译器

​ Less

​ Sass

​ Stylus

安装Stylus依赖包

​ npm i stylus stylus-loader --save-dev

使用

<style scoped lang="stylus" ref="stylesheet/stylus"></style>

配置默认的初始化样式文件

​ /common/stylus/mixins.styl

​ /static/css/reset.css

​ 全局引用在主页面文件（index.html）中

<link rel="stylesheet" href="/static/css/reset.css">

---

移动端项目必须配置

视口（viewport）：使页面自动适应屏幕大小

​ 在主页面文件（index.html）中写入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

点击响应延迟3毫秒

​ 原因：这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。

​ 使用：

​ 地址：gitgub地址

​ 引用配置：（在主页文件index.html中）

<script src="static/js/fastclick.js"></script>
<script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
</script>

​

项目源码地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd