时间: 2019-11-19阅读: 51标签: chrome
本文基于工作项目开发，做的整理笔记
前段时间公司有的小伙伴刚开始学习vue，就直接着手用在新项目上，以项目实战步步为营，不断推进vue的学习和使用。时间短，需求多，又是刚刚上手，遇到的坑和困难也真不少，感觉每天都在疯狂地解决问题。说真的，每种技术的学习和使用，在实际项目的开发上得到了充分检验，个人能力也在快速的成长。
前一段时间，写过文章“Vue教程--使用官方脚手架构建实例”，主要是针对PC端，架构而写。当初的目的，也是想做为一个入门的教程，但是根据反馈和自己后面的感受，发现并不是很好，并没有做到真正的一步步上手。
今天决定专门针对Wap端去做这样一个demo，整体架构的搭建，并含有一些通用的功能。其中，部分知识点请回看前面那篇文章。对比来看，此篇应该更为详细，步步为营。前提条件：
你已经了解vue的基础知识，尝试过使用vue-cli官方脚手架搭建项目。编码环境：
system：OS X EI Capitan 10.12.5
npm：5.4.2
node：v8.8.0
vue-cli：@lastest相关技术栈：
vue2 + vuex + vue-router + webpack + ES6/7 + fetch／axios + sass + flex + svg相关地址：
项目代码github地址：https://github.com/YuxinChou/vue-wap-demo
项目在线地址：http://www.knowing365.com
（可用手机扫描下文中二维码，或用chrome浏览器模拟手机访问）
参考项目：https://github.com/bailicangdu/vue2-elm
有时候，我们需要去研究人家网站的运行机制，这就免不了要在他们的前端脚本里插入一些调试代码看看运行效果。在chrome65以前，我们可以打开目标网页的开发者工具—source选项卡—目标JS/CSS文件，然后在相关位置写入代码保存后即可看到改动后的效果。chrome65之后需要进行本地代码替换，本文就介绍一下如何在chrome中用本地代码替换在线代码，以达到在线修改JS的效果。
首先要确定待修改文件的网络位置：
WAP端项目搭建从0到1.jpg
第二步，在本地创建一个空文件夹，名字随意。
目录
| - 0.传送门
| - 1.安装
| - 2.项目说明
| - 3.项目搭建
| - Step1. 初始化
| - Step2. 母版页Layout
| - Step3. 配置rem
| - Step4. 配置sass
| - Step5. 顶部导航header
| - Step6. 引入iconfont
| - Step7. 侧边菜单sidebar
| - Step8. 底部导航footer
| - Step9. 返回顶部backToTop（组件）
| - Step10. 仓库存储store
| - Step11. 侧边菜单状态保存
| - Step12. 搜索栏searchBar（组件）
| - Step13. 页面添加
| - Step14. 弹窗提示（组件）
| - ---------------------------------- 下内容为详解2
| - Step15. 完善login页面（fetch请求数据）
| - Step16. 合理引入svg
| - Step17. 用axios实现请求（取代原生fetch）
| - Step18. 登录状态存入仓库
| - Step19. 滚动加载更多（组件）
| - Step20. 回到指定位置（组件）
| - Step21. 完善消息列表页面
| - Step22. 顶部菜单改造（slot的使用）
| - --------------------------------- 下内容为详解3
| - Step23. 完善其他页面
| - Step24. 权限检查
| - Step25. 页面切换动画transition
| - Step26. 轮播展示（swiper)
| - Step26. 分享功能（vue-social-share）
| - Step28. ...
| - 4.项目部署
| - a）本地部署
| - b）服务器部署
| - 5.后续
第三步，在上一步的空文件夹中创建和目标文件路径一模一样的文件结构，这一步很关键。请注意，像示例中的xxx.com这种域名也需要创建对应文件夹：
0.传送门
官网“起步”传送门：http://cn.vuejs.org/v2/guide/#起步
最后，打开Overrides选项卡，导入刚才的空文件夹，你会发现导入的目标文件已经处于激活状态：
1.安装
你已经安装了npm，它是随node.js安装的，装了node.js也就有了它。
node.js安装下载地址：http://nodejs.cn/download/
# 检查node.js是否安装，若有则显示版本号
$ node -v
# 检查npm的版本号
$ npm -v
# 若要更新npm，使用
$ npm install npm@latest -g
一般，我们还会安装淘宝镜像cnpm，因为在墙内，有时候使用npm安装会很慢，所以需要。
# 安装cnpm，并指定镜像地址
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
写文章时，我的目前版本如下：
Yuxin's MacBook Pro:Vue yuxin$ node -v
v8.8.0
Yuxin's MacBook Pro:Vue yuxin$ npm -v
5.4.2
Yuxin's MacBook Pro:Vue yuxin$ cnpm -v
cnpm@4.5.0 (/usr/local/lib/node_modules/cnpm/parse_argv.js)
npm@3.10.10 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@8.8.0 (/usr/local/bin/node)
npminstall@2.29.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 16.6.0
registry=https://registry.npm.taobao.org
vue的安装：
# 最新稳定版
$ npm install vue
# 它的命令行工具
$ npm install --global vue-cli
我们接下来就使用它的命令行工具 vue-cli 来构建项目10bet，。
（类似的还有在react.js方面，快速上手会使用到‘蚂蚁金服’的Ant-design，使用antd-init或者dva-cli，都是命令行构建项目。）
刷新页面，效果已经有了：
2.项目说明
以【QQ手机APP】为UI界面参考，从母版页，列表页，左侧菜单，上下菜单，顶部导航，滚动加载，权限等页面及功能一一按步骤开发完成。那么这里的思路是：
- 先搭建母版页Layout
- 顶部导航header
- 侧边菜单sidebar
- 上下菜单navbar（扩展）
- 底部导航footer
- 页面添加
- 功能（返回顶部，滚动加载...）
- 接口请求
- 仓库存储
- 权限检查
- ...
整体的页面效果，大概如下：
vue-wap-demo.jpg
二维码访问，或者访问线上地址
（注：未作PC兼容，请使用chrome手机模式访问）
项目demo代码：GitHub地址
这种修改方式是持久化的，也就是说，哪怕你关机重启，打开本地替换过的页面，替换效果依然存在，而且你在本地对目标文件做的修改都会同步到页面上，非常好用！
3.项目搭建
使用命令行工具，开始一点点构建项目：
Step1. 初始化
去到你的指定目录，初始化项目，名称为vue-wap-demo
（注意：ESLint那里我选择了None模式，为了简单）
# 去到放项目的文件夹地址
Yuxin's MacBook Pro:Vue yuxin$ cd /Users/yuxin/Documents/Season/Project/Vue
# 创建基于webpack模版的项目，名称为vue-wap-demo
Yuxin's MacBook Pro:Vue yuxin$ vue init webpack vue-wap-demo
? Project name vue-wap-demo //直接回车（不修改的话）
? Project description A Vue.js project //直接回车
? Author Season <yuxin0721@gmail.com> //直接回车
? Vue build standalone //直接回车
? Install vue-router? Yes //我选择了Yes
? Use ESLint to lint your code? Yes //我选择了Yes
? Pick an ESLint preset none //我选择了None模式！！！（注意：这里我用了None，为了简单）
? Setup unit tests with Karma + Mocha? No //我选择了No（暂时不需要）
? Setup e2e tests with Nightwatch? No //我选择了No（暂时不需要）
vue-cli · Generated "vue-wap-demo".
To get started:
cd vue-wap-demo
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
执行上面提示中的命令，把项目运行起来
# 进入项目文件夹
Yuxin's MacBook Pro:Vue yuxin$ cd vue-wap-demo
# 安装
Yuxin's MacBook Pro:vue-wap-demo yuxin$ npm install
> fsevents@1.1.2 install /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/fsevents
> node install
[fsevents] Success: "/Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1059 packages in 26.516s
# 运行
Yuxin's MacBook Pro:vue-wap-demo yuxin$ npm run dev
> vue-wap-demo@1.0.0 dev /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo
> node build/dev-server.js
> Starting dev server...
DONE Compiled successfully in 2324ms 14:38:51
浏览器查看，效果如下：
项目初始化效果.jpg
此时，项目代码结构如下：
# 当前代码结构
vue-wap-demo
├── build // 构建相关
├── config // 配置相关
├── node_modules // 模块安装的文件夹
├── src // 核心代码
│ ├── assets // 静态资源
│ ├── components // 组件
│ ├── router // 路由
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码编辑 配置项
├── .eslintignore // eslint 忽略项
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
├── package-lock.json // package-lock.json
├── package.json // package.json
└── �README.md // 说明文档
# 注意！！！
# 下面是教程结束时的代码结构（可忽视）
vue-wap-demo
├── build // 构建相关
├── config // 配置相关
├── dist // 打包的部署文件
├── node_modules // 模块安装的文件夹
├── screenshots // 项目截图
├── src // 核心代码
│ ├── assets // 静态资源
│ ├── components // 组件
│ ├── page // 页面
│ ├── router // 路由
│ ├── service // 请求服务
│ ├── store // 仓库存储
│ ├── style // 样式
│ ├── utils // 公用方法
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码编辑 配置项
├── .eslintignore // eslint 忽略项
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
├── package-lock.json // package-lock.json
├── package.json // package.json
└── �README.md // 说明文档
Step2. 母版页Layout
初始化后，在是src/components路径下默认有一个HelloWorld.vue页面，我们将其改名为Layout.vue作为母版页，调整一下内容，如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper">
<!-- main -->
<div class="main_wrapper">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
/*layout*/
/*此时rem还没引入（Step3）*/
/*此时sass也还不能用（Step4）*/
.app_wrapper {
background-color: #f2f2f2;
}
.main_wrapper .title {
font-size: 1rem;
color: #f00;
}
</style>
同时需要修改router/index.js的内容，把HelloWorld的相关引用改为Layout，如下：
/**********************************************/
/* src/router/index.js */
/**********************************************/
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/Layout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout
}
]
})
现在我们可以看见修改后的效果。（开发的时候，一直保持项目运行就可以了）
Step3. 配置rem
在src文件夹下创建utils文件夹，并添加文件rem.js，代码如下：
/**********************************************/
/* src/utils/rem.js */
/**********************************************/
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 注解：
// 设计稿为320的时候，1rem=20px
// 设计稿为640的时候，1rem=40px
// 设计稿宽768的时候，1rem=48px
将rem.js引入到srcmain.js中，即插入代码import './utils/rem'，最终代码如下：
/**********************************************/
/* src/main.js */
/**********************************************/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './utils/rem'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
此时，再看运行后的效果，使用chrome手机模式预览，可以发现rem已经生效。
本文由10bet发布于Web前端,转载请注明出处：10bet：Vue教程--Wap端项目搭建从0到1（详解1）
关键词：