10bet:Vue教程--Wap端项目搭建从0到1(详解1)

来源:http://www.chinese-glasses.com 作者:Web前端 人气:72 发布时间:2020-03-16
摘要:时间: 2019-11-19阅读: 51标签: chrome 本文基于工作项目开发,做的整理笔记 前段时间公司有的小伙伴刚开始学习vue,就直接着手用在新项目上,以项目实战步步为营,不断推进vue的学习和

时间: 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的效果。

10bet 1

首先要确定待修改文件的网络位置:

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
  • 页面添加
  • 功能(返回顶部,滚动加载...)
  • 接口请求
  • 仓库存储
  • 权限检查
  • ...

整体的页面效果,大概如下:

10bet 2

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

浏览器查看,效果如下:

10bet 3

项目初始化效果.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)

关键词:

上一篇:watch监听对象

下一篇:没有了

最火资讯