精华内容
下载资源
问答
  • 一款对于vue、vue-router、vuex、axios、mint-ui集成封装初始化框架(供使用vue开发移动端) 1、首先将代码下载下来解压 2、在自己的机上已经配置好node环境 3、进入命令cmd窗户进入当前目录下 安装依赖:npm ...
  • 公司需要开发一款移动端的app,奈何团队没有ios技术,工期比较短,所以选择使用vue开发HTML5经过打包处理形成移动端app。 项目构思 1 项目整体使用Vue+HbuilderX开发 2 Vue实现基本页面跳转,增删改查等app基本功能,...

    开发背景
    公司需要开发一款移动端的app,奈何团队没有ios技术,工期比较短,所以选择使用vue开发HTML5经过打包处理形成移动端app。
    项目构思
    1 项目整体使用Vue+HbuilderX开发
    2 Vue实现基本页面跳转,增删改查等app基本功能,当需要使用到app原生功能则使用mui.js
    3 最后通过HbuilderX将vue项目打包成app包
    开发实践
    1 运行打包app
    这一步的步骤比较简单,首先通过npm run build 命令打包vue项目,下面是vue打包配置
    config/index.js

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../demo/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../demo'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
    
        /**
         * Source Maps
         */
    
        productionSourceMap: false, // 置为false  减少项目体积
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
    
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static as
    展开全文
  • 使用vue开发移动端页面问题集合

    千次阅读 2018-07-12 21:16:13
    其实vue和这些问题没有什么冲突,移动端的问题主要体现跨域、苹果手机的兼容和微信浏览器上。 技术栈 vue2.0 + vuex + vue-router + webpack + axios + scss + ES6/7 cookies跨域不能携带 cookies在跨域的时候,...

    其实vue和这些问题没有什么冲突,移动端的问题主要体现跨域、苹果手机的兼容和微信浏览器上。

    技术栈

    vue2.0 + vuex + vue-router + webpack + axios + scss + ES6/7

    cookies跨域不能携带

    cookies在跨域的时候,每次刷新,cookies的值都会发生变化。这个时候是已经设置了 Access-Control-Allow-Origin:* ,然后再设置上withCredentials: true ,最后再尝试一下,不仅cookies带不过来,之前还可以跨域的请求,现在都报错了。你对错误一无所知。

    网上给了一些解释,意思是,你的前端与后端不在同一主域下(就是不在同一域名下)。而且刚刚设置的两个东西会造成冲突, withCredentials: true 导致跨域的设置失效了。

    既然都用了vue,那就配置一个代理吧

    用 vue-cli 3.0 构建的vue项目与 vue-cli 2.0 构建的项目,在目录上会发生变化,配置文件也会改变。不过配置的时候,内容还是不会变化的。

    vue-cli 2.0 下的配置

    找到根目录,在 config 文件夹下的 index.js 内,加上以下代码。具体每一项表示的含义,可以去webpack的官网里找。这样设置之后,cookies的值也不会每次变化了。

    module.exports = {
        dev: {
            proxyTable: {
                '/xxx': {
                    target: 'http://192.168.1.1:8080',
                    ws: true,
                    changeOrigin: true
                }
            }
        }
    }
    
    

    vue-cli 3.0 下的配置

    与 vue-cli 2.0 的配置是一样的,唯一比较麻烦的是, vue-cli 3.0 隐藏了配置文件,项目看上去变得很简洁,所以找不到在哪里配置。

    在根目录下新建文件 vue.config.js ,项目会默认读取这个文件。文件的详细配置可以在 github地址里仔细阅读。

    打开新建好的 vue.config.js ,写上上面那段代码后,重启一下项目就好了。

    重点

    修改了这个配置,一定要重启应用,否则修改将不会生效。

    另外,如果在开发中使用了跨域,在实际的生产中,webpack 的代理肯定就用不了了,需要使用 nginx 来做代理。

    不想配置代理的看这里。但是,需要后端配合修改

    这里以 axios 为例,使用的时候将 axios 当成 vue 的全局对象处理。代码如下:

    axios.defaults.withCredentials = true;
    axios.defaults.crossDomain = true;
    Vue.prototype.$axios = axios;
    

    因为需要跨域, withCredentials 和 crossDomain 都需要配置,后端的看一下别人家的博客吧。因为不是我写的,就不乱说了。

    使用 axios 时,直接这么使用:

    this.$axios({...})
    

    苹果手机的样式兼容

    作为苦逼的前端,只用得起OPPO R9s,无奈80%的用户都是苹果手机,和另一个小米Note的前端兄dei一起花了三天调试苹果的兼容问题。

    问题什么时候会出现,完全没有意料到,iphone 7 与 7P 的显示就有不同,与 iphone 6 还有 iphone 8 也不一样。做这种调试,真的得所有的苹果机型都得有才行。谁让苹果手机这么耐用,除了被偷,和有钱,手机可以用到电池爆炸。

    苹果手机的问题主要以下4种:

    1. 图片扭曲,甚至变形
    2. 在滚动的时候很卡顿
    3. 点击的时候会出现蓝色的遮罩层
    4. 被固定的头部还有底部,在上拉和下拉的时候都会被遮住

    图片扭曲,甚至变形

    出现这个问题,是高估了苹果手机在app里提供的内核的性能。查阅了一些资料,说的是苹果为app提供的内核,渲染效率还有兼容性都是非常低下的。苹果兼容问题,百度、谷歌一下,都是一大堆的抱怨。

    我这里的问题是因为使用了vue 的 v-if 来渲染图片。场景是这样的,有5张图片,需要根据传入的参数来选择显示哪一张,点击下面的选项时,图片还可以跟着变化。然后神奇的一幕发生,图片各种扭曲,变形,甚至分裂。检查了一遍样式,没发现问题后,我把 v-show 替换了 v-if 然后就好了。然后开始怀疑人生,苹果手机,还是 7p ,渲染效率低的可怕啊。

    滚动的时候卡顿

    卡顿嘛,很正常,于是在 #app 下加上了一句 -webkit-overflow-scrolling: touch; ,就不卡顿了。你以为问题解决了吗?

    拿出安卓手机一试,分分钟想打人。

    机智的小米Note兄dei,把这句话加了 body 标签上,同时加上了一句 overflow: auto 就好了。

    点击的时候会出现蓝色的遮罩层

    这个很简单,在 IOS 系统下, webkit 内核的问题,加上一句 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 就行了

    被固定的头部还有底部,在上拉和下拉的时候都会被遮住

    既然用户是苹果,别想着用 fixed 定位了。元素被固定住的时候,怎么拉都不行。只有通过布局的方式,让这个看起来更像固定定位

    微信浏览器

    用了 vue 就得明白,有的时候链接上的参数是有的,但是从微信点击“复制链接”和“在浏览器打开”的时候,参数就没了。是因为,浏览器仍然读取的是上一次的地址。在需要URL参数的时候,最好做一次刷新。

    刷新的方式很多,不做介绍

    展开全文
  • 项目名程 :《移动端商城》 ...Vue2.0 + vue-router +vuex + axios + mock.js(数据模拟) + ES6 + sass 目录结构 src下 components assets 静态资源文件 view 一级路由组件 router 路由 ...

    项目名程 :《移动端商城》

    技术栈

    Vue2.0 + vue-router +vuex + axios + mock.js(数据模拟) + ES6 + sass

    目录结构

         src下
    
            components
            assets     静态资源文件
    
            view       一级路由组件
    
            router     路由
    
            store      vuex状态中心
    
            main.js     入口文件
    
            http         axios封装,api封装,mockjs 接口文件
    
    

    开发步骤

    一、开发环境统一

    在index.html中,meta标签添加,优化各移动端设备显示效果。

    
      <meta charset="utf-8">
    
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    
      <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
      <meta name="HandheldFriendly" content="true">
    
      <!-- 删除苹果默认的工具栏和菜单栏 -->
      <meta name="apple-mobile-web-app-capable" content="yes" />
    
      <!-- 设置苹果工具栏颜色 -->
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
      <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
      <meta name="format-detection" content="telphone=no, email=no" />
    
      <!-- uc强制竖屏 -->
      <meta name="screen-orientation" content="portrait">
    
      <!-- QQ强制竖屏 -->
      <meta name="x5-orientation" content="portrait">
    
      <!-- UC强制全屏 -->
      <meta name="full-screen" content="yes">
    
      <!-- QQ强制全屏 -->
      <meta name="x5-fullscreen" content="true">
    
      <!-- UC应用模式 -->
      <meta name="browsermode" content="application">
    
      <!-- QQ应用模式 -->
      <meta name="x5-page-mode" content="app">
    
      <!-- windows phone 点击无高光 -->
      <meta name="msapplication-tap-highlight" content="no">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

    统一样式:消除所有标签的默认样式,保证页面在所有浏览器下显示效果一致

    在main.js中导入reset.css: import ‘@/assets/reset.css’
    reset.css 内容如下:

    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    
    body {
    line-height:1;
    }
    
    :focus {
    outline: 1;
    }
    
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary {
    display:block;
    }
    
    nav ul {
    list-style:none;
    }
    
    blockquote, q {
    quotes:none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }
    
    a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
    
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
    
    del {
    text-decoration: line-through;
    }
    
    abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
    }
    
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
    
    input, select {
    vertical-align:middle;
    }
    

    1px边框像素问题: 手机像素都比较高 如果是2倍 3倍屏 虽然设置border:1px 实际上有 2px 3px
    border.css 解决方案 使用css3 的 scale属性
    main.js中导入border.css
    import “./assets/styles/border.css”

    border.css如下:

    @charset "utf-8";
    .border,
    .border-top,
    .border-right,
    .border-bottom,
    .border-left,
    .border-topbottom,
    .border-rightleft,
    .border-topleft,
    .border-rightbottom,
    .border-topright,
    .border-bottomleft {
        position: relative;
    }
    .border::before,
    .border-top::before,
    .border-right::before,
    .border-bottom::before,
    .border-left::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::before,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-topright::after,
    .border-bottomleft::before,
    .border-bottomleft::after {
        content: "\0020";
        overflow: hidden;
        position: absolute;
    }
    /* border
     * 因,边框是由伪元素区域遮盖在父级
     * 故,子级若有交互,需要对子级设置
     * 定位 及 z轴
     */
    .border::before {
        box-sizing: border-box;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        left: 0;
        width: 100%;
        height: 1px;
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        top: 0;
        width: 1px;
        height: 100%;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        border-top: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-right::before,
    .border-rightbottom::before,
    .border-rightleft::before,
    .border-topright::after {
        border-right: 1px solid #eaeaea;
        transform-origin: 100% 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::before {
        border-bottom: 1px solid #eaeaea;
        transform-origin: 0 100%;
    }
    .border-left::before,
    .border-topleft::after,
    .border-rightleft::after,
    .border-bottomleft::after {
        border-left: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        top: 0;
    }
    .border-right::before,
    .border-rightleft::after,
    .border-rightbottom::before,
    .border-topright::after {
        right: 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::after {
        bottom: 0;
    }
    .border-left::before,
    .border-rightleft::before,
    .border-topleft::after,
    .border-bottomleft::before {
        left: 0;
    }
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
        /* 默认值,无需重置 */
    }
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
        .border::before {
            width: 200%;
            height: 200%;
            transform: scale(.5);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.5);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.5);
        }
    }
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
        .border::before {
            width: 300%;
            height: 300%;
            transform: scale(.33333);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.33333);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.33333);
        }
    }
    

    rem配置:1rem=100px;方便计算

    main.js引入:
    import rem from ‘./assets/js/rem’
    rem();

    export default function() {
        // var devicePixelRatio = 1;
        // var scale = 1 / devicePixelRatio;
        // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        // 7.5根据设计稿的横向分辨率/100得来
        
        function setRemUnit(){
            //获取屏幕宽度
            var deviceWidth = document.documentElement.clientWidth;
            // 屏幕宽度 / 7.5  ? 方便计算。 
            // 1. ui给的设计图宽度一般:750px
            // 2. 把屏幕宽度进行切割750份,每一份可以容纳设计稿1px的宽度。
            //3. 浏览器最小能识别的font-size为12px, 所以*100
            //4.html font-size ===100px     1rem==100px;
            // 5.在计算的时候, 200px 就用2rem表示。
    
    
             // if(deviceWidth > 750) {
                // deviceWidth = 750;
            //     deviceWidth = 7.5 * 50;
            // }
     
            document.documentElement.style.fontSize = deviceWidth / 750 * 100+ 'px';
        }
        setRemUnit();
          // reset rem unit on page resize
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
            setRemUnit()
            }
        })
        // 禁止双击放大
        document.documentElement.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, false);
        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    }
    

    300毫秒点击延迟问题:
    借助插件 fastclick 完成,操作步骤如下:

    
    cnpm i fastclick --save
    
    全局引入   main.js中
    import fastClick  from  "fastclick"
    fastClick.attach(document.body)
    
    

    css预处理器 sass

    1、安装
    
    npm install node-sass --save-dev
    npm install sass-loader@7.3.1  --save-dev
    
    2、配置
    在build中的 webpack.base.conf.js 文件中,找到rules,添加
    
    // 在 rules中添加
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }
    
    3、使用
    在每个vue文件中的style,添加lang=“scss”
    
    <style lang="scss" scoped>
    /* 写入scss */
    
    </style>
    
    
    

    字体图标:网址
    注册账号
    创建项目
    添加图标到购物车 添加到项目
    下载项目
    选择文件 配置

    展开全文
  • 使用vue开发移动端管理后台

    千次阅读 2019-03-07 09:40:35
    独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下...
    独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路。

    1.对于项目的一些心得与体会

    • 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架;
    • 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的插件来实现
    • 在完成项目中,我又新学到了上传图片插件vue-core-image-upload,移动端富文本编辑器vue-quill-editor
    • 还有个地址的三级联动mt-picker,(是基于mint-ui图形界面框架的)

    2.rem与px的转换

    • 从同事传授中获到的经验,对于rem与px的转换,就是在index.html模板文件中加入下面的脚本,然后就是1rem=100px(这个可能不准确,有更好的方法,各位大佬请在评论中留下,感激不尽)
    <script type="text/javascript">
      document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
    </script>

    3.对于上传图片插件vue-core-image-upload中遇到的坑

    • 对于跨域问题,有好多方法可以解决,这里讲的挺多的前端跨域解决方法
    • 还有就是后台设置响应头access-control-allow-origin可以指定特定的域名,我这里的后台设置的就是access-control-allow-origin:*,就是因为这样,用这个上传图片的插件就会报错
    Access to XMLHttpRequest at 'https://....' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
    • 这个问题我蒙圈了好久,和后台也讲了,就是处于蒙圈状态,已经允许跨域了,怎么还报错呢?很烦
    然后,终于找了个方法解决(有用过其他的上传插件,感觉不好用,代码或者思路好乱)
    • 其实这个插件中的文档也有提示,只是刚用,还不是很会
    • 就是在使用这个插件的代码中加上这个字段就可以了
    <vue-core-image-upload
        class="btn btn-primary"
        :crop="false"
        input-of-file="file"
        @imageuploaded="loadMainImg"
        :max-file-size="5242880"
        :url="serverUrl"
        :credentials="false" //允许携带cookie
    ></vue-core-image-upload>
    对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“ ”。这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为“”,请求将会失败。
    也就是说Access-Control-Allow-Credentials设置为true的情况下
    Access-Control-Allow-Origin不能设置为*

    4.基于mint-ui的三级地址选择

    • 效果图
    • template文件
    <div class="modal" @click="handleCloseAddress">
      <div class="cateContainer" @click.stop>
        <div class="operateBtn">
          <div class="cancelBtn" @click="handleCloseAddress">取消</div>
          <div class="confirmBtn" @click="handleCloseAddress">确定</div>
        </div>
        <mt-picker class="addressPicker" :slots="myAddressSlots" @change="onAddressChange"></mt-picker>
      </div>
    </div>
    // 定义一个包含中国省市区信息的json文件
    import addressJson from '@/assets/common/address'
    export default {
        data() {
            return {
                myAddressSlots: [
                  {
                    flex: 1,
                    values: Object.keys(addressJson),
                    className: 'slot1',
                    textAlign: 'center'
                  }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                  }, {
                    flex: 1,
                    values: ['市辖区'],
                    className: 'slot3',
                    textAlign: 'center'
                  },
                  {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                  },
                  {
                    flex: 1,
                    values: ['东城区'],
                    className: 'slot5',
                    textAlign: 'center'
                  }
                ],
                province:'省',
                city:'市',
                county:'区/县',
            }
        },
        methods: {
            onAddressChange(picker, values) {
                if(addressJson[values[0]]) {
                  picker.setSlotValues(1, Object.keys(addressJson[values[0]]));
                  picker.setSlotValues(2, addressJson[values[0]][values[1]]);
                  this.province = values[0];
                  this.city = values[1];
                  this.county = values[2];
                }
          },
        }
    }

    5.关于对是否登录的处理

    • 开始也有做过登录的管理后台,不过,在进行登录时,总会一闪过登录的界面,这种感觉很不好,在这里记录下相比之前更好点的方法
    • 在main.js文件中添加对router的钩子函数
    router.beforeEach((to, from, next) => {
      let token = localStorage.getItem('token');
      if (!token && to.path !== '/login') {
        next('/login');
      } else {
        next();
      }
    });
    • 通过判断缓存里是否有token来进行路由的跳转
    • 相对于之前的那种方法,这里对路由的跳转进行的拦截,在路由进行跳转前,进行判断

    6.上拉加载mescroll.js插件

    7.移动端富文本插件Vue-Quill-Editor

    • 效果图
    <template>
        <quill-editor
          v-model="richTextContent"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange($event)">
        </quill-editor>
    </template>
    <script>
      import { quillEditor } from "vue-quill-editor";
      import 'quill/dist/quill.core.css';
      import 'quill/dist/quill.snow.css';
      import 'quill/dist/quill.bubble.css';
        export default{
            data() {
                return {}
            },
            methods: {
                onEditorChange(e) {}
            }
        }
    </script>
    
    • 响应事件
    onEditorChange(e){
        console.log(e)
        this.richTextContent = e.html;
    },

    8.移动端图片预览插件

    • vue-picture-preview
    <img :src="url" v-preview="url" preview-nav-enable="false" />
    需要在app.vue中加入如下代码
    <lg-preview></lg-preview>
    • 效果图
    • 代码挺少的

    9.总结

    • 在以后的项目中,首先的一件事就是要对产品要有完成的了解,然后进行技术、框架的选型
    • 对于插件,自己多尝试才能知道是否符合你的要求

     

     

    展开全文
  • vue开发移动端app-学习记录

    千次阅读 2021-01-29 20:53:05
    目录 项目框架搭建 连接真机调试 打包apk发布 4 Vuex学习 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大...因为移动端设备屏幕大小,屏幕比例什么的差别比较大,
  • 实战Vue:基于Vue移动端购物商城

    千次阅读 多人点赞 2020-11-27 16:16:14
    基于Vue移动端购物商城
  • Vue2 移动端开发环境搭建

    千次阅读 2017-03-31 08:34:20
    本文给出基于 Vue2 的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏 rem,移动端相比 pc 端就没什么特别的了。 我会一步一步带领大家进入 Vue2 的世界...
  • Vue2 移动端开发记录

    2017-09-14 16:38:03
    转载 1、position:absolute: 定位的时候不同手机的浏览器版本不一样,存在...2、event.touches[0].pageY:移动端事件touchstart,touchmove,touchend,在vue中的手指滑动的对象是要传入$event才可以使用event.touc
  • Vue 搭建移动端 h5 项目步骤

    千次阅读 2020-08-04 14:38:01
    Vue 搭建移动端 h5 项目步骤 简介 最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体...less,sass,stylus都可以,vue-cli 3 后的版本对应的webpack 的loader都是配置好的,只需下载对应的包就好了。使
  • 本文给出基于 Vue2 的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏 rem,移动端相比 pc 端就没什么特别的了。 我会一步一步带领大家进入 Vue2 的世界...
  • vite版本、vue3、ts、集成路由、集成vuex、集成axios、配置Vant3、移动端适配、请求代理 二、步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-...
  • Vue移动端开发--配置

    千次阅读 2018-10-30 20:01:11
    首页使用vue-cli脚手架安装项目开发包, 以及配置git环境 Vue+vuex+axios+rem(flex) 配置4个环境,调用不同的接口:local(本地开发)、beta(测试)、pre(预上线)、prod(正式上线) 一、修改index.html文件 ...
  • 最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流… cssrem:一个CSS值转REM的VSCode插件; lib-flexible:移动端...
  • 创建一个完整的vue移动端项目配置

    万次阅读 多人点赞 2019-08-09 14:49:30
    vue的安装及创建一个新项目前一篇文章已经介绍过了,有需要的请看之前的文章 移动端项目 一、关于移动端的一些ui框架 1.Voinc 一个基于 vue.js 和 ...2.Vux 基于WeUI和Vue(2.x)开发移动端UI组件库 (https://vux.l...
  • vite2.0+vue3移动端项目实战详解 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { ...
  • vite2.0搭建Vue3移动端项目 用了vue3大半年了,一直都是用vue cli 基于webpack来搭建的项目,刚好有个移动端的项目,我想用vite版本的vue3来做,这里记录一下项目搭建的过程。 https://cn.vitejs.dev/ 一.涉及...
  • Vue简单移动端详情页跳转

    千次阅读 2020-12-23 08:56:43
    Vue移动端详情页跳转 页面布局 首先进行底部导航的布局 需要单独在一个vue组件里面写,切记不要在app.Vue里面写 代码如下 <template> <div> <ul class="dh"> <li> //这个是跳转详情页...
  • vue +vant开发移动端 提示:以下是本篇文章正文内容,下面案例可供参考 一、项目初始化 1:使用 Vue CLI 创建项目 1:Run npm i -g @vue/cli to update! 2:启动项目 启动项目: npm run derve 界面: 3...
  • 一文带你使用Vue完成移动端(apk)项目

    千次阅读 多人点赞 2021-06-09 09:17:56
    基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入,而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from ...
  • vue编写移动端项目

    2019-09-11 16:48:17
    1. 项目结构(未用vue-cli脚手架,有助理解vue的项目构建和运行过程) 2.vue的执行流程 vue运行开始,先找到main.js(里面的Vue实例)和index.html(vue要填的坑,即id="app"的div),随后main.js将vue的创建( 导入...
  • 尤大送了新年礼物之后,vite2.0就逐渐被尝试使用了,作为一个前端就要保持与时俱进,因此跟着这篇Vite 2.0 搭建 Vue3 移动端项目搭建起了第一个vite的项目。大型的公司项目还是要使用稳定的webpack,vite2.0可以先做...
  • vue移动端模板 tip: 1、ui我们使用的是vux,庆幸的是,解决了打包过大的问题, 2、这里使用的是rem布局,移动端还是要使用ipad和不同尺寸的手机 3、版本:webpack:3.6.0 vue:2.5.2 vue-loader:13.3.0 vux:2.8.1...
  • vue项目移动端 ios9.x 低版本白屏问题

    千次阅读 2020-05-12 15:36:30
    作为一个问题小白,踩坑那都是常有之事,开发移动端是让我最头疼的事。这个白屏的问题也不是第一次遇到了,这次一定要记录一下,让自己长个记性,若是有不对的地方,欢迎各位大佬的指正。 此文档借鉴了kayla_wang...
  • Vue实战开发旅游网站前端项目搭建搭建步骤项目结构网络请求库axios跨域问题前端组件开发后台接口开发接口联调总结 项目搭建 搭建步骤 项目结构 公共的样式:src/assets/style/common.less 公共的js(工具函数,接口...
  • 安装工具要求 JDK 可以更新到最新版本 Node.js V8.12 谷歌浏览器 可以更新到最新版本 androidSDK(installer_r24.4.1-windows) ...系统环境配置安装 1).安装JDK 并配置环境变量 2).安装 node.js 尽量安装8.12版...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,308
精华内容 1,723
关键字:

vue开发移动端router配置

vue 订阅