• 事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './' 2,执行...

    记录以下自己将web app打包成移动端app的步骤及问题


    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目


    1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

    2,执行npm run build之后生成dist文件夹

    3,打开HBuilder,文件->打开目录,如下图


    选择刚才生成的dist目录,输入项目名称,点击完成

    附HBuilder下载地址:http://www.dcloud.io/


    3,此时会看到HBuilder项目下多了一个W标识(表示web项目)的myApp项目,

    右键菜单选择‘转换成移动‘转换成移动App’,然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了,

    随后就可以利用HBuilder连接真机运行

    或者发行成为原生app


    注意:如果真机运行或模拟器运行报如下错误

    Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser


    以下为以android apk为例的发行为原生app的步骤

    1,点击发行,这里发布测试apk选择使用DCloud公用证书,点击‘打包’

    2,正在制作安装包,制作完成,手动下载


    3,将下载的apk安装到android的手机看效果,以下是放到模拟器中的效果




    然后就可以在手机上玩啦~



    展开全文
  • vuewebapp实战

    2018-05-23 14:49:44
    一、首先配置开发环境(我的是win7+64位操作系统) 1.先下载并安装node.js。点击windows键,在输入栏输入cmd,打开...在控制命令窗口输入:npm install -g vue-cli。然后等待安装完毕。注意:如果是mac环境下,要在...

    一、首先配置开发环境(我的是win7+64位操作系统)

        1.先下载并安装node.js。点击windows键,在输入栏输入cmd,打开控制命令窗口,随后输入node -v然后回车查看node的版本,若显示node的版本,则表示node安装成功;

        2.然后安装vue-cli。在控制命令窗口输入:npm install -g vue-cli。然后等待安装完毕。注意:如果是mac环境下,要在前面加上sudo,即输入:sudo npm install -g vue-cli。安装完毕之后,输入vue,然后会显示以下图示信息,然后再输入vue list可以查看可用的模板列表。


        3.下载模板。这里下载的是webpack,输入vue init webpack sell(这个sell是项目名称,根据自己的项目自行取名),然后回车。这里强烈建议大家不要使用台式机!就是win7+32位操作系统。不然会出现以下错误信息!博主找了很多方法都不管用!最后用笔记本一下就好了!(win7+64位操作系统)


    正常的界面应该是这样的,会直接显示项目名字


        4.随后按照操作一步一步往下走即可,项目描述(sell app),作者等按照自己的需求来。ESLint是一个代码规范工具,vue路由是要安装的,unit tests和e2e tests可以跳过不用安装。下面的一个问号意思现在可以安装项目依赖了吗?直接回车等待安装就好了。


        5.安装完毕之后,首先要进入创建项目的文件夹,即输入cd sell,进入之后,然后再输入npm run dev,会出现一行提示信息:You application is running here:http://localhost:8080。然后打开浏览器在地址输入栏输入localhost:8080就可以显示项目页面了。


        6.在浏览器输入localhost:8080后会出现以下界面。这个界面是默认的,我们可以在项目文件里修改成我们自己的。


        至此,我们的开发环境搭建完毕。但是接下来才是真正磨炼耐心的时候。

    二、模拟后台数据

        我们都知道,环境搭建好了,只需要好好看看官网文档就可以学习编写web app了,但是你需要数据去支持你的设计,所以在设计之前你需要先模拟后台,看是否前台能访问到你写的假数据,这样对你的开发会有很大的方便和帮助。

        1.直接将写好的数据,放在根目录下,这里我的项目假数据是data.json,记得是json数据格式。


        2.既然有了数据库,那么我们在开发的时候直接访问data.json文件里的数据即可,那么接下来需要用到vue-resource,因为vue实现ajax获取后台数据是通过vue-resource的,这个在官网里应该可以查找的到。所以既然要用到vue-resource,那么我们必须要先安装才行。在控制命令窗口输入:npm install vue-resource --save

        3.安装完成以后,需要在需要用它的位置引入它才行。那么用到它的位置到底是啥文件呢?这个大家应该可以想到,肯定是在app.vue里引用,因为app.vue是整个单页面应用的最外围框架。但是这里引入的代码肯定是用js写的,那么肯定是写在js文件里的,而与app.vue同级的文件只有main.js,所以要写在main.js文件里才ok。


        4.在main.js里写下:import VueResource from 'vue-resoucre';这句是引入vue-resoucre,还不是用,还要写下一句代码:Vue.use(VueResource)才算是对vue-resoucre的真正使用。


        5.现在是模拟好后台数据环境了,那么接下来是要搭建一座用于联系前端和后台的桥梁,也就是我们要访问数据对应的api,那么怎么搭建呢?在配置文件webpack.dev.conf.js文件里开始搭建,即直接将下列代码复制粘贴上去即可。

    const appData = require('../data.json');
    const seller = appData.seller;
    const goods = appData.goods;
    const ratings = appData.ratings;
        before(app) {
          app.get('/api/seller', function (req, res) {
            res.json({
              errno: 0,
              data: seller
            })
          });
          app.get('/api/goods', function (req, res) {
            res.json({
              errno: 0,
              data: goods
            })
          });
          app.get('/api/ratings', function (req, res) {
            res.json({
              errno: 0,
              data: ratings
            })
          });
        },

        注意:下面的这一段代码需要放在devServer下!具体放在哪里如图示:


      6.这个时候桥梁已经搭建完毕,在命令控制窗口下输入:npm run dev运行之后,在浏览器地址栏输入localhost:8080/api/seller或者localhost:8080/api/goods或者localhost:8080/api/ratings,就可看到对应的数据。

        7.mock数据(模拟后台)详细信息可以参考链接:点击打开链接

    三、组件的使用

        初期用vue学习项目的时候或者新手学习得时候很容易对组件的使用模糊不清,就是好像是跟着官网文档走了一遍,最后还是无法实现组件的效果,觉得很是麻烦,或者就直接没有动力学下去了。这里总结下组件的使用几个步骤。

        1.创建一个vue文件,这里命名为header.vue。创建好了之后,会自动生成一个vue模板,就是在<template>标签里写HTML语句,在<script>标签里写js代码,在<style>标签里写样式。注意:<template>标签里只能写一个<div>!不能有其他同级的标签!

        2.将header.vue文件里的HTML写完之后,便可开始使用这个header组件了,相当于某人要入职工作过程类似。具体使用步骤分四步:

            (1)要先清楚你是在哪里应用的这个组件(即找准其应用的母文件)===你即将要在哪工作

           (2)在应用它的文件(也是一个vue文件)的<script>标签中写下:import 文件名 from '文件路径'。例如:import header from './components/header/header.vue'。意思是该组件先在这里注册一下,证明有这个组件,也就是导入的意思===入职前把档案袋递交至公司档案处,方便公司获知你的个人信息

            (3)然后,注册之后,需要在export default{}里面找到挂载点,找到之后再进行进一步命名===人事部知道你的入职信息后,给你分配工作的地方

            (4)最后,在指定的地方把组件名字以标签的形式写上去即可===分配完毕之后,自己找到具体的工作地方开始工作

        3.将组件导入进去之后,便可在浏览器刷新,查看显示效果。

        注意:这里需要提醒的是,每当创建一个vue文件的时候,必须在该文件的<script>标签里写下:export default {}!括号中可写可不写,按照需求来。

    四、stylus的使用(可选择性使用)

        stylus是CSS预处理器之一,它是2010年产生,主要用来给Node项目进行CSS预处理支持,与NodeJS走得很近,与JavaScript联系非常紧密。开发者可以自由选择是否使用。

        1.经过上述三个大步骤之后,如果开发中有用到stylus,但是服务器会显示报错,这并不代表你没有安装,因为在安装vue-cli的时候已经把这部分给包含了,至于为什么报错是因为在配置文件中未将stylus信息添加进去。

        2.在package.json文件中将以下信息写进去:

    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",

        3.重新在命令控制窗口输入:npm install  

        4.完成后,最后再输入:npm run dev即可,然后在浏览器中查看效果,会发现stylus的语法能识别了。

    五、vue-router的使用方法

        Vue中的路由相当于pc里面的锚点超链接,就是点击了某个地方,局部会转向另一个地方。即页面的切换需要用到vue-router(这里的意思是在单页面内进行切换)。而且路由的使用方法跟组件使用方法很是类似。

        1.首先要创建各个要转向的页面,即点击某个地方后要跳转的页面(也是vue文件)===即将工作的地方

        2.创建完毕之后,需要在router文件下的index.js文件里引入并声明,首先是import 文件名 from '文件路径'。例如:import seller from '../components/seller/seller.vue',引入之后接下来需要声明路由名字和路径===提交个人信息

        3.准备工作完毕之后,接下来便要在目的页面将这几个页面分别用<router-link>标签写进到指定位置===分配工作的地点

        4.第四步是与组件使用最大的一个差别,就是路由最后还要进一步渲染页面,即要使用<router-view>标签进行渲染===正式入职

        5.下面给出router使用步骤图,第一步是创建,即左边红色框出的部分;第二步是引入,即右上红色框出来的部分;第三步是声明组件名字和路径,左下角红色框出的部分;第四部分见第二张图,放在指定位置(上面三个红色框)和渲染(第四个红色框部分)。



        6.全部操作完毕之后,在浏览器里就可看到显示效果。

        7.补充:上述第五步中,声明组件名字和路径还可以用另一种方式进行,如下图所示:


    六、兼容(适配)各种移动设备的方法。即使用rem单位即可满足所有移动端的适配工作,完美显示相同的布局。这里有个插件可供我们引用:px2rem。很方便的就可以将px单位换算成rem单位,不需要人工去计算去改写。px2rem的官网:https://www.npmjs.com/package/px2rem

    使用方式: 
    1、安装 npm install px2rem-loader 或者 cnpm install px2rem-loader 
    2、vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在这里添加 。

     var px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 64//设计稿宽度/10
        }
      };
    
      // generate loader string to be used with extract text plugin
      function generateLoaders(loader, loaderOptions) {
        var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }

    3、安装配置结束后,然后在mian.js文件里引入:import 'px2rem-loader'即可;

    4、重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了。 

    5、但是效果是过于浓缩了,读者可自行验证;这里博主建议再安装一个lib-flexible联合使用比较好;

    6、首先是要安装npm i lib-flexible --save;然后是引入:import 'lib-flexible/flexible'即可,再次重启查看效果;

    7、使用时,为了防止字体大小fontSize出现奇数单位,可将单位px不转为rem 。在fontSize>30px时才转成rem 。 
    font-size:26px /* no*/ px不转成rem 
    font-size:26px px转成rem

    本文只是对vue中使用px2rem方式的说明,想要研究原理的请移步到官网或github 。

    七、开发剩下的。这部分大家完全可以根据自己的情况进行项目剩余的开发,因为下面的开发基本跟传统的mvc模式差不多,只不过js的写法要服从vue规范才行,也就是说,下面的一些设计都是按照vue的写法来的,这个需要大家线下去学习官网的知识。

    八、补充下可能容易犯错的地方

        1.引用文件的时候一定要清楚路径!

        2.我用的是webStorm编辑器(推荐,很好用),它能智能显示你出错的地方,它会在你错误的地方显示红色的波浪线;另外就是它会把一些变量显示为灰色,如果这些变量没有被使用的话。

        3.将获取的数据展示在前端时,一定要记得正确的引用方法,属性和数据的绑定都用v-bind,举个例子,我要使用seller的数据可以这样写:<div class='seller' v-bind:seller='seller'>,也可简写为<div class='seller' :seller='seller'>,记得不要忘记冒号!这里是显示的地方,还没定义seller这个数据对象。这个时候需要在指定的vue文件的<script>标签里写上一个props属性,属性里面定义seller对象,并且seller对象的类型为Object。当然了,一切的前提是你必须先发起请求!不然是获取不到数据的!看图也许更清楚些:

    发起请求获取seller全部数据:


    将seller全部数据引用:


    定义seller数据对象:


    具体使用全部数据中指定数据:


        4.项目中主要学习得是技巧和方法而不是单纯的记忆,得有自己独立思考的空间。

    展开全文
  • vue打包webapp要点

    2019-06-20 03:27:52
    一、vue源码的设置1)src中关于router的配置 model:'history' 要去掉,即地址栏中保留“#”。2)config的index关于build的配置 assetsPublicPath:'./' 注意要加点。如果上面两项没设置对,那么,打包出来的webapp是...

    一、vue源码的设置
    1)src中关于router的配置 model:'history' 要去掉,即地址栏中保留“#”。
    2)config的index关于build的配置 assetsPublicPath:'./' 注意要加点。
    如果上面两项没设置对,那么,打包出来的webapp是空白的,呵呵。

    二、Hbuilder打包安卓的过程
    1)打开目录,选择vue里面npm run build生成的dist目录。
    2)右击该目录,"转换成移动APP",目录树中的图标从 W 变成 A。
    3)目录树中出现 manifest.json ,双击,配置(如基本信息、图标配置、启动图片等等),保存。
    4)“发行”--“云打包-打原生安装包”,提交打包任务(为了用户体验,去掉广告。选安卓证书)。
    5)把产生的apk 文件分发。
    在目录树中选中index.html,然后 “运行”--“浏览器运行” 即可,这样可以在chrome中去调试代码。

    如果是纯粹的移动端web,没有涉及到设备,打包一个安卓基本上就结束了。

    转载于:https://blog.51cto.com/44855/2171678

    展开全文
  • vue写一个天气webAPP

    2018-11-06 19:56:14
    项目的仓库weather-forecast-vue。 项目demo 目前完成了以下功能 当前定位城市天气信息查看 下拉刷新天气信息 上拉加载古诗信息 查看24小时逐小时天气信息 查看未来6天天气信息 日落日出时间展示 生活信息...

    博客地址
    项目的仓库weather-forecast-vue
    项目demo
    目前完成了以下功能

    • 当前定位城市天气信息查看
    • 下拉刷新天气信息
    • 上拉加载古诗信息
    • 查看24小时逐小时天气信息
    • 查看未来6天天气信息
    • 日落日出时间展示
    • 生活信息简略详细展示
    • 城市管理
    • 天气分享
    • 语音播报

    先让我们来看看最终的效果是什么样的~

    话不多说,动手实现吧~

    Step1 安装vue-cli

    此处默认你的电脑当中已经安装 node.jsnpm

    1. 全局安装webpack
    npm install webpack -g
    
    1. 全局安装vue-cli
    npm install --global vue-cli
    

    Step2 构建项目并安装插件

    构建 vue 项目

    vue init webpack vueWeather //vueWeather为此项目的名称你也可以使用其他的
    cd ./vueWeather //进入到项目目录
    npm install
    npm run dev //以dev方式执行项目
    

    此时你就可以在浏览器当中看到你正在运行的项目

    当第一个命令执行后,会有几个选项让你选:

    • Project name项目名称
    • Project description (A Vue.js project)项目描述,也可直接点击回车,使用默认名字
    • Author ()作者
    • Runtime + Compiler: recommended for most users运行加编译,回车选择yesRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅运行时,已经有推荐了就选择第一个了
    • Install vue-router? (Y/n)是否安装vue-router,项目中我们会使用vue-router来做路由,所以选择yes
    • Use ESLint to lint your code? (Y/n)是否使用ESLint管理代码,根据自己的情况做出选择
    • Setup unit tests with Karma + Mocha? (Y/n)是否安装单元测试,笔者本次没有安装
    • Setup e2e tests with Nightwatch(Y/n)?是否安装e2e测试,笔者本次没有安装

    插件安装

    vue拥有丰富的轮子,所以我们可以直接使用已经写好的轮子,从而提高开发效率。

    1. 安装axios
      Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,尤雨溪宣布停止更新 vue-resource,并推荐大家使用axios之后,越来越多的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目会使用 Vuex 来管理数据。
    npm install axios --save
    

    大部分的插件可以在 main.js 文件中引入后进行 Vue.use(),但是 axios 不能 use。只能每个需要发送请求的组件中即时引入。为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。这里只说修改原型链的方式
    main.js 中引入 axios

    import axios from 'axios'
    

    这时候如果在其它的组件中,是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性

    Vue.prototype.$http= axios
    

    main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令
    2. 安装muse-ui
    由于要实现手机端的webapp,于是在比较流行的框架中选择了muse-ui进行开发,具体使用方式如下,你也可以查看官方文档,进行跟深一步的学习。

    npm i muse-ui --save
    

    安装完成后,在main.js文件中进行引用

    import MuseUI from 'muse-ui';
    import 'muse-ui/dist/muse-ui.css';
    
    Vue.use(MuseUI);
    

    除此之外,还用到了 muse-ui 中提供的 muse-ui-loadingmuse-ui-progress
    muse-ui-loading用于实现加载动画

    npm install muse-ui-loading --save
    
    import 'muse-ui-loading/dist/muse-ui-loading.css'; // load css
    import Loading from 'muse-ui-loading';
    Vue.use(Loading);
    

    插件muse-ui-progress用于实现页面加载的进度条

    npm install muse-ui-progress --save
    
    //index.js 文件
    import 'muse-ui-progress/dist/muse-ui-progress.css';
    import NProgress from 'muse-ui-progress';
    Vue.use(NProgress);
    

    index.html 引入 muse-ui 推荐的Material Design Icons字体图标库

    <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
    
    1. 安装vue-xc-city
      使用vue-xc-city这个插件用于城市搜索
    npm install vue-xc-city --save
    

    安装完成后,在main.js文件中进行引用

    import vueXcCity from 'vue-xc-city';  
    import 'vue-xc-city/dist/xc-city.css';  
    
    Vue.use(vueXcCity);
    
    1. 安装vue-slip-delete
      使用vue-slip-delete这个插件用于实现城市左滑删除
    npm install vue-slip-delete --save
    
    1. 安装v-distpicker
      使用v-distpicker这个插件用于实现城市选择功能
    npm install v-distpicker --save
    

    Step3 定位与天气API

    因为要查看当前位置的天气信息,所有要使用到定位API和天气API。

    天气API

    笔者在这里选用了心知天气提供的付费API

    心知天气支持全国2567个、全球24,373个城市和地点。

    定位API

    这次所使用的是高德地图所提供的API

    Step4 解决跨域问题

    vue 项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“ No 'Access-Control-Allow-Origin' header is present on the requested resource. ” 这种跨域错误。
    这样的问题解决办法如下:
    config/index.js 中找到 proxyTable,将内容修改为如下

    proxyTable: {
      '/apis': {    //将www.exaple.com印射为/apis
        target: '',  // 接口域名
        secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apis': ''   //需要rewrite的,
        }
      }
    },
    

    这样修改后,使用 axios 就可以直接这样用:

    getData () { 
     this.$http.get('/apis/XXX', function (res) { 
       console.log(res) 
     })
    

    Step5 修改字体

    scr 目录下新建 common/font 目录,将要添加/修改的字体拷贝进去,然后新建 font.css 文件,样例为思源黑体。

    @font-face {
      font-family: 'SourceHanSansCN';
      src: url('./SourceHanSansCN.otf');
      font-weight: normal;
      font-style: normal;
    }
    
    

    Step6 编写 Vue 组件

    这一部分,笔者会挑组件中相对比较复杂的组件进行说明,其他组件大家直接看GitHub中的代码即可!

    Weather 组件

    这一组件用于显示天气信息,是一个复用的组件,展示当前城市天气,以及其他城市天气信息。
    这一页面由其他多个组件共同构成,通过传参来显示信息。

    下拉刷新

    这个页面的下拉刷新使用的是muse-ui所提供的组件。

    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" :loading-text="localPeom">
    
    </mu-load-more>
    

    HelloWorld 组件

    这个组件是路由的默认页面,页面中只包含了 Weather 组件,HelloWorld 组件用于获取用户当前位置信息,然后再传递给 Weather 组件。

    index.html 中添加以下代码

      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.9&key=你的key"></script>
    
    GaoDeAPI(){
    	var _this = this;
    	var map, geolocation;
    	//加载地图,调用浏览器定位服务
    	map = new AMap.Map('FakeContainer', {
    	  resizeEnable: true
    	});
    	map.plugin('AMap.Geolocation', function() {
    	  geolocation = new AMap.Geolocation({
    	    enableHighAccuracy: true,//是否使用高精度定位,默认:true
    	    timeout: 10000,          //超过10秒后停止定位,默认:无穷大
    	    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    	    zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    	    buttonPosition:'RB'
    	  });
    	  map.addControl(geolocation);
    	  geolocation.getCurrentPosition();
    	  AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    	  AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    	});
    	//解析定位结果
    	function onComplete(data) {
    	  var str=['定位成功'];
    	  str.push('经度:' + data.position.getLng());
    	  str.push('纬度:' + data.position.getLat());
    	  _this.lon = data.position.getLng();
    	  _this.lat = data.position.getLat();
    	  var c = data.addressComponent.city;
    	  c= c.substring(0,c.length-1);
    	  localStorage.setItem('currentCity',c);
    	  console.log(c);
    	  if(data.accuracy){
    	    str.push('精度:' + data.accuracy + ' 米');
    	  }//如为IP精确定位结果则没有精度信息
    	  str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
    	  //console.log(str);
    	}
    	//解析定位错误信息
    	function onError(data) {
    	  console.log("gaode:"+data.message);
    	}
    },
    

    HourWeather 组件

    这一组件用来显示未来24小时,逐小时天气信息。

    这个模块重点要实现左右滑动的效果

    <div class="HourBorder">
      <div class="HourAuto">
        <div class="context">
          <ul style="list-style:none;">
            <li v-for="(item,index) in hourData" :key="index" class="aDay" style="float:left; padding:0; ">
              <p>{{backTime(item.time)}}</p>
              <img :src="imgList[item.code]" alt="icon" ondragstart="return false;" oncontextmenu="return false;">
              <p>{{item.temperature}}°</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    

    HourBorder 类用于控制逐小时显示的大小,overflow: hidden 的设置使超出div的部分隐藏,不会使整个页面变形。
    HourAuto 类用于横向滑动,当元素宽度超过父容器时,自动左右滑动。

    City 组件

    这一组件当中,用到了 vue-slip-delete 这一插件,用于删除已添加的城市。

    <slip-del
    v-for="(item, i) in list"
    	:key="i"
    	ref="slipDel"
    	@slip-open="slipOpen"
    	@del-click="del(i)"
    	v-if="i!=0"
    >
    <div class="demo-item">
      <mu-row class="d2" @click="navToFav(item.results[0].location.name)" :style="{backgroundImage:'url('+item.results[0].now.imageurl+dayOrNight+'.jpg'}">
        <mu-col span="9">
          <div class="d3">
            &nbsp;{{item.results[0].now.text}}
          </div>
          <div class="d4">
            {{item.results[0].location.name}}
          </div>
        </mu-col>
        <mu-col span="3">
          <div class="d5">
            {{item.results[0].now.temperature}}
          </div>
        </mu-col>
      </mu-row>
    </div>
    <div slot="del">
      <mu-icon size="32" value="delete" style="display: block; margin: 0 auto;"></mu-icon>
    </div>
    </slip-del>
    

    del()函数用于处理用户删除后的操作,这里我们将索引传入,用于删除相对应的城市。

    Favourite 组件

    Favourite 组件与 HelloWorld组件有类似的地方:整个组件是由 Weather 组件组成。不同的是,在城市列表页选择了城市后,跳转到 Favourite 组件中,并显示指定城市的天气情况。

    CitySelect 组件

    这个组件的作用是选择想要添加的城市,可以通过搜索和三级联动进行选择。分别用到了第三方插件vue-xc-cityv-distpicker

    <xc-city @get-data="getData"></xc-city>
    <div class="divwrap" v-if="show">
      <v-distpicker type="mobile" hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
    </div>
    

    其他组件

    其他组件大部分都是展示像后台请求到的信息,使用不同的布局进行展示,以达到简洁但不简单的效果!

    详细代码可以查看项目weather-forecast-vue

    欢迎学习交流~
    转载请在文章开始注明

    展开全文
  • 基于vuewebapp注意事项 编写简洁漂亮,可维护性高的vue代码 目录 前言 目录命名 全局方法和组件的扩展 Props 非空检测 手动挂载mount() webapp添加FastClick scrollBehavior滚动行为 配置应用所需的rem.js 前言 ...

    基于vue的webapp注意事项

    编写简洁漂亮,可维护性高的vue代码
    目录

    前言
    目录命名
    全局方法和组件的扩展
    Props 非空检测
    手动挂载mount()
    webapp添加FastClick
    scrollBehavior滚动行为
    配置应用所需的rem.js

    前言
    前端框架的普及和标准的混乱很难确定出一套规范,各企业也都随着项目制定自己技术团队所认可的标准和规范,本指南旨在vue本身的标准及eslint之外建立的符合团队认可的一套标准规范,以增加代码一致性和可读性,降低维护成本。
    目录命名
    基于vue-cli规范src目录的统一性,使目录的可读性更高。
    ├── src // 源代码
    │ ├── api // 接口请求函数
    │ ├── components // 项目公用组件及展示组件
    │ ├── utils // 功能函数
    │ ├── containers // 路由对应的组件(容器组件)
    │ ├── router // 项目路由信息
    │ ├── store // vuex数据
    │ ├── style // css or sass
    │ ├── images // 图片资源
    │ ├── main.js //项目入口文件

    全局方法和组件的扩展
    为实现各组件中调用公用方法的便利故使用以下方式进行全局方法和组件的扩展
    // utils/tools.js
    import fetcher from ‘./fetcher’
    import message from ‘@/base/tips’
    export default {
    install (Vue) {
    Object.defineProperty(Vue.prototype, ‘http,enumerable:false,configurable:false,writable:false,value:fetcher)Object.defineProperty(Vue.prototype,http&#x27;, { enumerable: false, configurable: false, writable: false, value: fetcher }) Object.defineProperty(Vue.prototype, &#x27;message’, {
    enumerable: false,
    configurable: false,
    writable: false,
    value: message
    })
    }
    }

    // main.js
    import tools from ‘@/utils/tools’
    Vue.use(tools)

    Vue.prototype.http访使Object.definePropertypropsisRequiredifvm.http方式会导致在组件中误操作写入后续访问出问题,故使用Object.defineProperty设置属性的配置项 非空检测 对于props 必须对应设置 isRequired,避免再增加 if 分支带来的负担 假如需要延迟挂载,可以在之后手动调用vm.mount()方法来挂载
    new Vue({
    router,
    store,
    }).$mount(’#app’);

    webapp添加FastClick
    document.addEventListener(‘DOMContentLoaded’, () => {
    FastClick.attach(document.body);
    }, false);

    当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置使用scrollBehavior记录滚动行为
    const router = new VueRouter({
    routes,
    mode: ‘hash’,
    scrollBehavior(to, from, savedPosition) {
    const copyFrom = from;
    let position = null;
    if (savedPosition) {
    position = savedPosition;
    }

        if (from.meta.keepAlive) {
            copyFrom.meta.savedPosition = document.body.scrollTop;
            position = { x: 0, y: to.meta.savedPosition || 0 };
        }
    
        return position;
    },
    

    });

    配置应用所需的rem.js
    /**

    • 获取当前屏幕宽度
      /
      export const getScreenWidth = () => document.documentElement.clientWidth;
      /
      *
    • 得到当前屏幕的 rem 数值
    • @return {number} 当前屏幕的 rem 数值
      */
      export const getRem = () => 100 * (getScreenWidth() / 1000);

    // eslint-disable-next-line
    (function (doc, win) {
    const resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;
    const recalc = () => {
    const docEl = document.documentElement;
    const clientWidth = getScreenWidth();
    if (!clientWidth) return;
    docEl.style.fontSize = ${getRem()}px;
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    

    })(document, window);

    贝程教育-国内资深的前端,全栈工程师培训基地

    作者:贝程教育
    链接:https://www.jianshu.com/p/6b6fc626ba0c#滚动行为
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • 本项目是用vue2.0的购物webapp
  • vue写的蘑菇街移动端webapp,是学习vue写webapp不可多得的好例子
  • 最近时间稍有空余,寻思做点什么,于是就根据网易云的webapp仿照了一个音乐播放器webapp玩玩 截图 推荐音乐: 最新音乐: 热歌榜: 音乐搜索: 音乐播放页面: 技术栈: vue vue-router mint-ui 借用酷狗...
  • 今天突发奇想,想自己搭建一套移动端的模板来方便自己以后项目的时候不用再花费无用的时间去搭建项目。 先说下这套模板的项目配置,主要使用 vw 适配移动端 webpack + vue + vue-router + axios + mint-ui + ...
  • 承接上篇:基于webpack+Vue2.0搭建webapp(体验篇) 学Vue也有一段时间,利用vue-cli脚手架也动手做了个简单的示例。在不断的学习过程中发现其实学习vue并不难,难在如何构建一个工程化前端,从项目初始化、结构...
  • vue版的WebApp博客园移动端
  • 看了慕课网的vue音乐webApp实战,感觉自己学到了很多东西,无论对vue的整体架构和组件设计都有了清晰的认识,在以后的工作中对组件封装时可能会考虑的多一些,能够有效的掌握组件的边界条件,分清木偶组件和智能组件...
  • vue 开发webapp 手机返回键 退出问题 mui进行手机物理键的监听 首先安装vue-awesome-mui npm ivue-awesome-mui 在main.js注册 在index.html 转载于:...
  • 之前做webapp时学到的:使用 mui 进行手机物理键的监听 首先安装 mui npm i vue-awesome-mui 然后在 main.js 里注册 import Mui from 'vue-awesome-mui'; Vue.use(Mui); index.html 里: <script type="text/...
  • GitHub:https://github.com/liu9183/vue-for-sellApp
  • webapp项目已经通过vue-cli搭建的脚手架好了,然后通过webpack打包成一个部署文件list,如下: 打开HBulider,打开目录,选择这个list,项目名称自己更改。 这个时候是web项目,需要改为APP项目 更改前: ...
  • Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述。搭建框架步骤如下:安装Node.js搭建框架需要使用最新稳定版Node.js,请选择LTS版本。tip1:如果本机有其它项目需要早期版本,...
  • vue 移动端音乐webapp

    2019-06-10 12:38:56
    本人一直从事前端相关开发的工作,最近利用业余时间,仿照qq音乐做了一个移动webapp.用到的技术:vue2.3、vue-cli、vue-router、vue-lazyload、axios、vuex、移动端滚动插件 better-scroll 、fastclick等,下面是...
  • vue写的H5纯前端高仿饿了么webapp,是学习vue不可多得的例子
  • 运用技术:Vue2.0、Vux、vux-loader、vue-cli、vue-router、vuex 2、效果图 3、实现流程 3.1 搭建框架(需要安装好node.js、npm) 1、快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 ...
1 2 3 4 5 ... 20
收藏数 6,316
精华内容 2,526