精华内容
参与话题
问答
  • 主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路,感兴趣的朋友跟随脚本之家小编一起学习吧
  • vue单页开发父子组件传值

    千次阅读 2018-05-17 11:11:03
    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。GitHub地址:https://github.com/leileibrother/wechat-vue文件目录如下图,example.vue是父组件,...

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。GitHub地址:https://github.com/leileibrother/wechat-vue

    文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。


    父组件引入子组件,父组件html的代码如下:

    <template>
        <div>
            <h3>这是父组件</h3>
            <p style="margin: 20px 0;text-align: center;">
                <span>子组件传过来的值是 “{{childValue}}”</span>
            </p>
            <example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child>
        </div>
    </template>
    
    <script>
        import exampleChild from './examplechild.vue';
        export default {
            name: "example.vue",
            components: {
                exampleChild
            },
            data(){
                return {
                    parentMsg:'hello',
                    childValue:''
                }
            },
            mounted(){
            },
            methods: {
                getValue:function (val) {
                    this.childValue = val;
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>


    子组件代码如下:

    <template>
        <div>
            <p style="margin: 20px 0;text-align: center;">我是子组件,父组件穿传过来的值是{{message}}</p>
            <p style="margin: 20px 0;text-align: center;">
                <button @click="send">点击向父组件传值</button>
            </p>
        </div>
    </template>
    
    <script>
        export default {
            name: "exampleChild.vue",
            props:['message'],
            data(){
                return {
    
                }
            },
            mounted(){
            },
            methods: {
                send:function () {
                    this.$emit('getChildValue','你好父组件!')
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>


    1,父组件向子组件传值。

    在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,



    在子组件中使用props接收值,如props:['message'],接收父组件传过来的message字段,使用{{message}}就是可以使用父组件传过来的值了。




    2,子组件向父组件传值。

    子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。

    在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。




    在父组件中如下,也需要这个中转站来接收值


    getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。



    父子组件传值大致思路是这样的,欢迎大家相互交流。

    展开全文
  • Vue单页开发项目搭建

    2017-11-27 14:20:32
    公司新项目开发要使用vue框架,自学了一下vue单页开发,分享一下vue单页项目搭建的学习效果,主要使用vue脚手架 vue-cli 和 vue全家桶(vue、vue-router、vuex、vue-resource/axios),很多地方不了解,大家多多指点...

    公司新项目开发要使用vue框架,自学了一下vue单页开发,分享一下vue单页项目搭建的学习效果,主要使用vue脚手架 vue-cli 和 vue全家桶(vuevue-routervuexvue-resource/axios),很多地方不了解,大家多多指点

     

    一、项目搭建,使用vue-cli会生成一套提前定义好的构建文件,和相应的文件。

    1npm install -g vue-cli (安装脚手架,window+r打开cmd,进入自己想要安装项目的文件夹)

    2vue init webpack my-project (创建自己的项目,项目命名)

    3cd my-project (进入自己的项目文件夹中)

    4npm install (下载modules,淘宝镜像安装也可以,安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

    5,下载开发需要的库(下载多个可以在后面拼接上去)

    npm i vue-resource vue-router vuex --save

    6npm run dev (运行项目,打开http://localhost:8080即可进入项目。

    注意:在第二步时,需要执行几个命令(选择yes或no),其中有一个如下图,use eslint to lint your code? 第一次选了yes,在项目中发现只能使用空格键来缩进,不能使用tab键(会报错),再次搭建时选择了no就可以使用其他缩进方式了。


    如果选择了yes,可以在build文件夹下的webpack.base.conf.js文件中把下面几行注释掉,重启服务即可(如下图)



    二、了解基本的目录结构。除了一些项目配置的文件,前端需要操作的文件基本都在src文件夹中(本人是web前端,配置的文件了解的很少,在努力中),打开src文件夹,目录结构如下图,下面会具体讲解各个文件的使用。(views文件夹是我自己加的,主要放页面,后面会详细说明),除了src文件夹,目录中有一个index.html的文件,这个就是我们的html页面,所有的单页都会显示在这个页面中,可以在这个页面上引入公共的css、js等。

    1main.js  此页面主要是引入插件和将vue实例挂载到dom上。所需要的插件都可以在这个页面引入,css样式也可以再次引入,写法如下图。



    2App.vue  这是vue单页的根页面,所有的单页面都渲染到这个页面上,写法很简单,基本上没啥变化的.

    3component文件夹,这个文件夹是放公共组件的,所有的公共组件可以写在这个文件夹里面,比如footer.vueheader.vue等。我发现好多开源项目把所有的单页页面也写在这个文件夹里,我把所有的页面拿了出来放在一个新的文件夹里views,当然不拿出来也可以的,我只是个人习惯。


    组件的引用很简单,在script标签里import,如import headers from 'components/header.vue',然后在html代码里写入<headers></headers>即可。


    4views文件夹。我自己新建的放单页页面的文件夹。


    在实际开发中,有很多页面都会用到公共的头部和底部,每个页面都引入组件显得很麻烦,所有我在views文件里新建了一个base.vue的文件,在这个页面引入了公共的头和底,其他页面只需要通过路由嵌套,嵌套在base.vue页面里就可以了,不需要公共头和底的就可以不嵌套。页面的公共的部分都可以通过这种方式来做,当然具体情况具体分析。

    base.vue文件写法很简单,如下图:



    5router文件夹和其下的index.js, index.js是配置路由的文件,所有的路由配置都写在这个文件里面。

    mode:  vue-router 默认hash 模式 用路由的history 模式,这种模式充分利用history.pushState API 来完成 URL 跳转而无须重新加载页面。

    path:  path是路由配置好的路径,页面跳转用的,如<router-link to="/login">登录</router-link>,页面会将<router-link>标签转义成a标签,点击就可以跳转到路由指定的login页面。require里就是页面的原始路径,也就是路由所指向的页面。页面跳转还有一种方法,就是this.$router.push(login),类似于window.location.href=” ”,


    前面提到要用到路由继承,新建了一个base.vue的文件,路由继承写法如下,children里面的页面会嵌套在base.vue这个页面里,就是渲染在base.vue这个页面上,base.vue里面的公共组件就是公用的。类似所有的页面都会渲染到App.vue这个页面里。


    最开始在写路由的时候,我的写法是报错的,百度的发现是resolve方法的问题,build文件夹下的webpack.base.conf.js文件中,修改了一下resolve这个方法,这是个配置路径的方法(我不是很明白这个),如下


    项目搭建完了,好多问题都是遇到了查询资料才解决的,还是有很多不懂的地方,特别是一些配置的问题,路由也有其他的方法。vue初步接触,慢慢来吧。GitHub地址:https://github.com/leileibrother/vue-

    展开全文
  • vue-multi-device-single-page 多个单页应用整合的vue工程的开发环境vue工程的目录设置 本文内容: ...基于 vue-cli 的 多个vue单页应用的开发环境 搭建 目录: 一、开发环境使用 二、需求分...
        

    vue-multi-device-single-page

    多个单页应用整合的vue工程的开发环境
    vue工程的目录设置

    vue-cli vue 2.0 vue-resuorce vue-router vuex

    本文内容:

    1. vue + vuex + vue-resuorce + vue-route 的工程 的目录设计

    2. 基于 vue-cli 的 多个vue单页应用的开发环境 搭建

    目录:

    一、开发环境使用

    二、需求分析

    三、开发思路

    四、src目录设计及思路

    五、开发环境开发

    六、整个开发环境的目录注释

    一、开发环境使用

    多终端(页面)路径设置

    1. 在src/device/目录下添加终端(页面)路径,如:src/device/pc/

    2. 在新添加的文件下加入这个终端(页面)使用的打包模板,命名为index.html,如:src/device/pc/index.html

    3. 在新添加的文件下加入这个终端(页面)使用的入口文件,命名为index.js,如:src/device/pc/index.js

    build 打包

    打生产环境的包,会自动把不同终端的文件按终端名称分开

    build-pc示例图

    npm run build 'device'

    device : 接受的参数,在 /build/device-conf.js里面有限制

    示例: npm run build pc 打一个pc端的包

    npm run build-all

    打所有终端的包

    dev 开发

    npm run dev

    开始进行调试,基于vue-cli的,所以基本是vue-cli的

    1. 自动打开一个网页,从这里选择要调试的终端

    build-pc示例图

    1. 开始调试

    index-pc

    二、需求分析:

    需求:

    1. 要开发pc端 + 移动端 + app混合开发的 页面,每个页面都是单页应用

    2. 为了节约开发成本,这几个端要共用一些组件,和 方法

    3. 打包要方便,调试要方便

    4. vue应用

    几个问题:

    1. vue-cli提供了非常好的开发环境,我能否在这个基础上整一整,解决掉需求 2 和 3 呢?

    2. vue + vuex + vue-resuorce +vue-route 的工程目录应该怎么设计呢?

    面对这样的需求,我的理解是把多个单页应用融合到一个工程里面,下面是我的解决办法

    这个工程是啥

    github https://github.com/vincentmrlau/vue-multi-device-single-page,欢迎交流

    多端(也可以是多页)的单页应用的vue工程的开发环境,本质上是多个单页应用

    基于vue,整合了vuex vue-resuorece vue-router 的开发目录设计

    整个基于vue-cli生成的目录进行修改,除了test(正在研究)外的功能均可使用

    三、开发思路

    1、设置公用组件的目录

    2、抽离api,分为公用的api和属于各个页面自己的api

    3、每个单页应用vuex管理状态

    4、可能会被多人同时编辑,如何尽量减少merge

    5、针对这样的需求的src下面的目录应该怎么设计(第三部分有写)

    6、针对需求配置开发环境(从第 部门开始是关于这个开发环境的)

    四、src目录设计及思路

    介绍src的目录设置及其作用

    介绍 界面-模板html-组件-store-接口 的关系

    概况两图流

    1. pc主页示意图

    主页示意图

    1. 分析图(怎一个乱字了得)

    分析图

    目录设置及其作用

    ├─src            # 源文件目录
    │  │  config.js
    │  │  
    │  ├─api        # 多端共用的 api
    │  │      device-root.js
    │  │      middleware.js
    │  │      
    │  ├─assets        # 多端共用的 资源
    │  │      logo.png
    │  │      
    │  ├─components    # 多端共用的 组件
    │  │      RootCommonComponent.vue
    │  │      
    │  └─device        # 设备入口 
    │      ├─app    # 混合开发的放这里了,也可以分 ios 和 安卓
    │      │      index.html    # app专用的html模板,打包好的东西会自动注入
    │      │      index.js        # app的入口文件
    │      │      
    │      ├─mobile        # 这里放移动端的页面 ,下面的 index文件作用类似其他端
    │      │      index.html    
    │      │      index.js
    │      │      
    │      └─pc            # 这个目录下的都是pc端使用的,当然其他端要用也是可以的,哈哈
    │          │  App.vue        # 入口组件
    │          │  index.html    # 模板文件
    │          │  index.js        # 入口文件
    │          │  
    │          ├─api            # 分离开接口
    │          │      home.js    # home这个模块用的接口
    │          │      middleware.js            # 一些公用的中间件
    │          │      
    │          ├─assets            # 资源
    │          ├─components        # 组件
    │          │  ├─commonComponents    # 公共组件
    │          │  │      Header.vue
    │          │  │      
    │          │  ├─Home    # home这个模块用的组件
    │          │  │      Body.vue
    │          │  │      Index.vue
    │          │  │      
    │          │  └─Page404    # 404这个模块用的组件
    │          │          Index.vue
    │          │          
    │          ├─router        # 路由
    │          │      index.js
    │          │      
    │          ├─store        # vuex 的store
    │          │  │  index.js    # 根级别的store + 模块组装
    │          │  │  
    │          │  └─modules        # store 模块
    │          │          home.js    # home这个模块使用的store
    │          │          
    │          └─types            # 放类型名称
    │                  home.js    # home这个模块使用的 types
    │                  root.js    # 公用的types

    界面-模板-组件 的关系

    界面:最后展现在用户面前的

    模板:用来注入打包的html文件

    组件:编写的vue组件

    他们的关系如图:

    view-components

    组件-store(vuex)-api(vue-resuorce) 的关系

    1. 组件使用store:

      1. 通过辅助函数(mapGetters,mapActions等)把store的属性映射到组件中使用

      2. 组件通过action来提交mutation修改状态

      3. 也可以通过$store来使用

    2. 组件使用api:

      1. 组件通过store的action使用api

    3. store内部安排

      1. 由mutation来修改状态

      2. 由action来提交mutation

    4. 由store的action来调用api

    5. api里面分离开中间件,按需调用

    看图看图 ↓↓↓

    主页示意图

    五、开发环境开发

    在vue-cli v2.8.2生产的开发环境的基础上进行修改

    新增加:build/device-conf.js 用来出路多终端(页面)开发相关问题

    
    var chalk = require('chalk')
    var glob = require('glob')
    
    // 获取deviceList
    var deviceList = []
    var deviceSrcArray = glob.sync('./src/device/*')
    for(var x in deviceSrcArray){
      deviceList.push(deviceSrcArray[x].split('/')[3])
    }
    
    // 检测是否在输入的参数是否在允许的list中
    var checkDevice = function () {
      var device = process.env.DEVICE_ENV
      var result = false
      // 检查deviceList是否有重复
      var hash = {}
      var repeatList = []
      for(var l = 0;l < deviceList.length; l++){
        if(hash[deviceList[l]]){
          repeatList.push(deviceList[l])
        }
        hash[deviceList[l]] = true
      }
      if(repeatList.length > 0){
        console.log(chalk.bgRed('deviceList 有重复:'))
        console.log(chalk.bgRed(repeatList.toString()))
        return result
      }
      for(var i in deviceList){
        if(device === deviceList[i]){
          result = device
          break
        }
      }
      if(result === false){
        console.log(chalk.bgRed('参数错误,允许的参数为:'))
        console.log(chalk.bgRed(deviceList.toString()))
      }
      return result
    }
    
    exports.deviceList = deviceList
    exports.checkDevice = checkDevice
    // 其他依赖
    exports.polyfills = ['babel-polyfill']
    

    添加:/build/build-all.js

    内部根据 deviceList 产生运行build.js子进程,完成打包

    var execFileSync = require('child_process').execFileSync;
    var path = require('path')
    var deviceList = require('./device-conf').deviceList || []
    
    var buildFile = path.join(__dirname, 'build.js')
    
    for( var x in deviceList){
      console.log('building :',deviceList[x])
      execFileSync( 'node', [buildFile, deviceList[x]], {
    
      })
    }
    
    

    修改/build/build.js

    添加设置环境变量并检查参数代码

    var chalk = require('chalk')
    // 设置process.env.DEVICE_ENV参数
    // 没有则返回错误
    var device = process.argv[2]
    var checkDevice = require('./device-conf').checkDevice
    if(device){
      process.env.DEVICE_ENV = device
      if(!checkDevice()){
        return false
      }
    }else {
      console.log(chalk.bgRed('  错误:缺少参数,详情请看readme.md  '))
      return false
    }

    修改/build/build.js

    1. 添加一个路由(在使用中间件connect-history-api-fallback之前添加),把可调试的入口展示出来

    // 写个小路由,打开浏览器的时候可以选一个开发路径
    var deviceList = require('./device-conf').deviceList || []
    var sentHref = ''
    for(var x in deviceList){
      sentHref += '<a href="/'+ deviceList[x] +'/index.html">点我调试终端:'+ deviceList[x].toString() +'</a> <br>'
    }
    app.get('/devDeviceList', (req, res, next) => {
      res.send(sentHref)
    })
    1. 修改打开的默认连接

    opn(uri + '/devDeviceList')

    修改/config/index.js 主要修改模板入口,打包出口等

    // see http://vuejs-templates.github.io/webpack for documentation.
    var path = require('path')
    var device = process.env.DEVICE_ENV || 'undefined'
    
    
    // 入口模板路径
    var htmlTemplate =  './src/device/' + device + '/index.html'
    
    module.exports = {
      build: {
        env: require('./prod.env'),
        // 加入html入口
        htmlTemplate: htmlTemplate,
        index: path.resolve(__dirname, '../dist' , device , 'index.html'),
        assetsRoot: path.resolve(__dirname, '../dist' , device),
        assetsSubDirectory: 'static',
        // 这里的路径改成相对路径
        // 原来是: assetsPublicPath: '/',
        assetsPublicPath: '',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
      }
    }

    修改 /build/webpack.dev.conf.js

    主要修改了入口配置,出口配置,以及模板文件配置

    // 获取device
    var device = process.env.DEVICE_ENV
    
    var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
    
    // 设置设备相关信息引入
    var deviceList = require('./device-conf').deviceList
    // 其他依赖
    var extraPolyfill = require('./device-conf').polyfills || []
    
    // 设置入口
    var entry = {}
    // 设置html插件模板入口和依赖
    var htmlPluginConf = []
    for(var x in deviceList){
      // 设置 入口
      entry[deviceList[x]] = extraPolyfill.concat(
        ['./build/dev-client'],
        './src/device/' + deviceList[x] + '/index.js'
      )
      var _htmlPlugin = new HtmlWebpackPlugin({
        filename: deviceList[x]+'/index.html',
        template: './src/device/' + deviceList[x] + '/index.html',
        chunks: [deviceList[x]]
      })
      htmlPluginConf.push(_htmlPlugin)
    }
    
    
    
    
    // add hot-reload related code to entry chunks
    // 把热重载所需的代码也打包进去
    // Object.keys(baseWebpackConfig.entry).forEach(function (name) {
    //   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
    // })
    
    // 删除的entry和output
    try {
      delete baseWebpackConfig.entry
    }catch (e){
      console.log(e)
    }
    try{
      delete baseWebpackConfig.output
    }catch (e){
      console.log(e)
    }
    
    module.exports = merge(baseWebpackConfig, {
      // 设置入口
      entry: entry,
      // 设置出口
      output: {
        path: '/',
        filename: '[name].js',
        publicPath: config.dev.assetsPublicPath
      },
      module: {
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
      },
      // cheap-module-eval-source-map is faster for development
      devtool: '#cheap-module-eval-source-map',
      plugins: [
        new webpack.DefinePlugin({
          'process.env': config.dev.env
        }),
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        // new HtmlWebpackPlugin({
        //   filename: 'index.html',
        //   template: config.dev.htmlTemplate,
        //   inject: true
        // }),
        new FriendlyErrorsPlugin()
      ].concat(htmlPluginConf)
    })
    

    修改 /build/webpack.prod.conf.js

    主要修改了入口配置,出口配置,以及模板文件配置

    var path = require('path')
    var utils = require('./utils')
    var webpack = require('webpack')
    var config = require('../config')
    var merge = require('webpack-merge')
    var baseWebpackConfig = require('./webpack.base.conf')
    var CopyWebpackPlugin = require('copy-webpack-plugin')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    
    var env = process.env.NODE_ENV === 'testing'
      ? require('../config/test.env')
      : config.build.env
    
    // 设置device相关变量
    var device = process.env.DEVICE_ENV
    //设置入口
    var extraPolyFill = require('./device-conf').polyfills ||[]
    var entry = {
      index: extraPolyFill.concat('./src/device/' + device + '/index.js')
    }
    
    console.log(config.build.htmlTemplate)
    var webpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: true
        })
      },
      // 写入prod的入口
      entry: entry,
      devtool: config.build.productionSourceMap ? '#source-map' : false,
      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },
      plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
          'process.env': env
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          sourceMap: true
        }),
        // extract css into its own file
        new ExtractTextPlugin({
          filename: utils.assetsPath('css/[name].[contenthash].css')
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        new OptimizeCSSPlugin({
          cssProcessorOptions: {
            safe: true
          }
        }),
        // generate dist pc.html with correct asset hash for caching.
        // you can customize output by editing /pc.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
          filename: process.env.NODE_ENV === 'testing'
            ? 'index.html'
            : config.build.index,
          // template: 'index.html',
          template: config.build.htmlTemplate,
          inject: true,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            // more options:
            // https://github.com/kangax/html-minifier#options-quick-reference
          },
          // necessary to consistently work with multiple chunks via CommonsChunkPlugin
          chunksSortMode: 'dependency'
        }),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: function (module, count) {
            // any required modules inside node_modules are extracted to vendor
            return (
              module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.indexOf(
                path.join(__dirname, '../node_modules')
              ) === 0
            )
          }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
          name: 'manifest',
          chunks: ['vendor']
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
      ]
    })
    
    if (config.build.productionGzip) {
      var CompressionWebpackPlugin = require('compression-webpack-plugin')
    
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    
    if (config.build.bundleAnalyzerReport) {
      var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig
    

    六、整个开发环境的目录注释

    │  .babelrc
    │  .editorconfig
    │  .eslintignore
    │  .eslintrc.js
    │  .gitignore
    │  .postcssrc.js
    │  index.html
    │  npm-debug.log
    │  package.json
    │  README.md
    │  tree.txt
    │          
    ├─build   # 这里是打包工具相关的
    │      build-all.js # 通过打包所有端的代码
    │      build.js        # 这里设定进程的环境变量
    │      check-versions.js
    │      dev-client.js  
    │      dev-server.js    # 这里也需要对进程的环境变量进行设定
    │      device-conf.js    # 这里面有关于多端开发、打包的相关设定
    │      utils.js
    │      vue-loader.conf.js
    │      webpack.base.conf.js        # 修改了入口、出口等
    │      webpack.dev.conf.js        # 修改了入口、出口等
    │      webpack.prod.conf.js        # 修改了入口出口等
    │      webpack.test.conf.js        # 测试相关还未完善
    │      
    ├─config
    │      dev.env.js
    │      index.js                    # 打包的入口和出口
    │      prod.env.js
    │      test.env.js
    │      
    ├─dist        # 最后打包的目录 分端储存
    │  ├─app
    │  │  │  index.html
    │  │  │  
    │  │  └─static
    │  │      └─js
    │  │              index.0142f89e3523b3b0d16b.js
    │  │              index.0142f89e3523b3b0d16b.js.map
    │  │              manifest.57f6691c595e842abc95.js
    │  │              manifest.57f6691c595e842abc95.js.map
    │  │              vendor.cce790f63359fc27fa7d.js
    │  │              vendor.cce790f63359fc27fa7d.js.map
    │  │              
    │  ├─mobile
    │  │  │  index.html
    │  │  │  
    │  │  └─static
    │  │      └─js
    │  │              index.0142f89e3523b3b0d16b.js
    │  │              index.0142f89e3523b3b0d16b.js.map
    │  │              manifest.57f6691c595e842abc95.js
    │  │              manifest.57f6691c595e842abc95.js.map
    │  │              vendor.cce790f63359fc27fa7d.js
    │  │              vendor.cce790f63359fc27fa7d.js.map
    │  │              
    │  └─pc
    │      │  index.html
    │      │  
    │      └─static
    │          ├─css
    │          │      index.1e809171f3a961de951e3c8e6644435f.css
    │          │      index.1e809171f3a961de951e3c8e6644435f.css.map
    │          │      
    │          └─js
    │                  0.f3e74a76d92b3f6ca5ec.js
    │                  0.f3e74a76d92b3f6ca5ec.js.map
    │                  1.fb471d3425df8c16ac54.js
    │                  1.fb471d3425df8c16ac54.js.map
    │                  index.a2ba631673923f812cf1.js
    │                  index.a2ba631673923f812cf1.js.map
    │                  manifest.ab6461111db19541d04b.js
    │                  manifest.ab6461111db19541d04b.js.map
    │                  vendor.aeee805b1efff3748018.js
    │                  vendor.aeee805b1efff3748018.js.map
    │                  
    ├─images         # 这个放点文档写文档用的图片                        
    ├─sever            # 这里写点服务端程序,用于测试等
    │      prod-view-server.js
    │      
    ├─src            # 源文件目录
    │  │  config.js
    │  │  
    │  ├─api        # 多端共用的 api
    │  │      device-root.js
    │  │      middleware.js
    │  │      
    │  ├─assets        # 多端共用的 资源
    │  │      logo.png
    │  │      
    │  ├─components    # 多端共用的 组件
    │  │      RootCommonComponent.vue
    │  │      
    │  └─device        # 设备入口 
    │      ├─app    # 混合开发的放这里了,也可以分 ios 和 安卓
    │      │      index.html    # app专用的html模板,打包好的东西会自动注入
    │      │      index.js        # app的入口文件
    │      │      
    │      ├─mobile        # 这里放移动端的页面 ,下面的 index文件作用类似其他端
    │      │      index.html    
    │      │      index.js
    │      │      
    │      └─pc            # 这个目录下的都是pc端使用的,当然其他端要用也是可以的,哈哈
    │          │  App.vue        # 入口组件
    │          │  index.html    # 模板文件
    │          │  index.js        # 入口文件
    │          │  
    │          ├─api            # 分离开接口
    │          │      home.js    # home这个模块用的接口
    │          │      middleware.js            # 一些公用的中间件
    │          │      
    │          ├─assets            # 资源
    │          ├─components        # 组件
    │          │  ├─commonComponents    # 公共组件
    │          │  │      Header.vue
    │          │  │      
    │          │  ├─Home    # home这个模块用的组件
    │          │  │      Body.vue
    │          │  │      Index.vue
    │          │  │      
    │          │  └─Page404    # 404这个模块用的组件
    │          │          Index.vue
    │          │          
    │          ├─router        # 路由
    │          │      index.js
    │          │      
    │          ├─store        # vuex 的store
    │          │  │  index.js    # 根级别的store + 模块组装
    │          │  │  
    │          │  └─modules        # store 模块
    │          │          home.js    # home这个模块使用的store
    │          │          
    │          └─types            # 放类型名称
    │                  home.js    # home这个模块使用的 types
    │                  root.js    # 公用的types
    │                  
    ├─static
    │      .gitkeep
    │      
    └─test    # 测试相关 TODO
        
    展开全文
  • 最近在做一个微信上的移动应用,踩了不少坑,做了以下的总结: 微信分享功能,安卓和iPhone存在着很多而差异。一开始调用微信分享功能需要引入jssdk,在入口文件index.js中引入了...

    最近在做一个微信上的移动应用,踩了不少坑,做了以下的总结:

    1. 微信分享功能,安卓和iPhone存在着很多而差异。一开始调用微信分享功能需要引入jssdk,在入口文件index.js中引入了http://res.wx.qq.com/open/js/jweixin-1.0.0.js js文件,然后出现了的问题是安卓可以进分享,但是iPhone却总是出现invalid signature,后来发现是因为iOS 9.0需要引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js,否则会分享失败。

    2. iOS overflow:auto滚动不流畅问题。这个问题一般加上一句-webkit-overflow-scrolling : touch;就可以就解决问题,但是当有已导航栏用了fixed或者absolute定位的,定位就会失效,这是需要给overflow:auto的标签加上一个绝对定位,如position:fixed或者position:absolute。

    3. 有关于css选择器的坑:如果在html和body选择器中写了overflow:auto,对子元素div的滚动条的scrolltop值就总会为0,这和浏览器的兼容不同,这个神奇的坑花了我很长的时间才解决。

    4. 做微信支付接口jsapi调用的时候,支付目录的配置很有讲究,Vue项目如果没有改变路由的mode的默认值hash,这时#的存在就会是支付目录的配置失败,这是需要更改mode的模式,变为history。

    5. 引入了百度地图API后,在微信开发者工具上面的定位和手机上定位差距很大,竟然有十多公里,这个让我一直以为是百度定位不准确,还试过换微新jssdk的定位,到头却发现是因为浏览器定位不准确导致的,只要代码在手机上跑起来,定位就会很精确。

    6. 上传文件的坑,或者说是上传图片,用formdata通过ajax发送给后台,但是图片太大的话node会报一个错误request entity too large,这是node上传文件限制的原因,这个需要在node加上一个上传文件的限制

       //app.use(express.limit(100000000)
       //app.use(bodyParser({limit : "5000kb"}));
       //app.use(json({limit: '5000kb'}));
      

      但是一般体验文件太大的话用户体验不好,又消耗流量,最好还是使用canvas压缩上传。

    转载于:https://my.oschina.net/u/4051564/blog/3090143

    展开全文
  • vue单页面开发的方式

    2020-10-19 22:00:21
    实现单页开发的方式 通过hash记录跳转的路径(可以产生历史管理) 浏览器自带的历史管理的方法history( history.pushState()) 可能会导致404错误 开发的使用hash的方式 上线的话我们使用history
  • 这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码;所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到...
  • 如下图: 1.安装node.js webpack...2.安装脚手架 vue-cli npm install -g vue-cli 3. 在项目文件夹创建项目(如上图) vue init webpack-simple zbsq( ) vue init webpack zbsq( ) npm install 4.npm run ...
  • vue-echarts 是Echarts的Vue组件封装使用起来更加方便 一、Echarts官网地址 https://www.echartsjs.com/zh/feature.html#chart-types 二、vue-echarts 学习地址 https://github.com/ecomfe/vue-echarts 三、...
  • 基于 vue2.0 写的单页面应用 Vue.js 中文社区
  • 今天来介绍一下如何用Vue开发单页应用。开发环境 :Laravel : 5.4 Vue : 2.1.10vue-router: 2.7.01.准备本篇文章默认你已经安装过Laravel,node,npm运行npm install即可安装laravel-mix。如果失败的话请使用npm国内...
  • 在使用vue开发微信单页应用的时候,当配置微信分享需要传参数到后台时,需要使用encodeURIComponent()转换需要分享的链接,不然axios只能获取#号前面的path,造成传入后台的分享地址和wx.config配置的分享地址不一致...
  • 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结。 技术栈: Vue v1.0.21, vue-resource v0.91, vue-router v0.7.13,webpack v1.12.2,vue-cli 开发中注意所使用的库的...
  • Vue 单页、路由

    2020-06-13 14:50:47
    单页应用:一个页面即一个简单应用,组件化开发 传统的页面调转是浏览器请求新页面,单页是把原本的多个页面以组件的形式集成在一个页面中,页面跳转时由vue路由到目标页面,因为目标页面是当前页面的一部分,切换到...
  • 一、官网地址 https://www.echartsjs.com/zh/feature.html#chart-types 二、安装 1.npm install Echarts -s 如果出现错误 ...2.出现第一种方法中的错误,采取这种方式 ... Vue.prototype.$echarts ...
  • 在日常开发中,为了优化性能,较少前端代码量,一般在使用其他框架时会采用按需加载的方式引入使用,以下以vue-cli3为例如何使用element-UI: step1 安装element-ui npm i element-ui -S step2 安装按需引入的...
  • 路径必须http://test.yw11.com/# 后面带#/ 不能是http://test.yw11.com 否则分享就会直接调往首页
  • 单页面应用开发(spa)  概念:只有一个html页面,所以跳转的方式是组件之间的切换 优点:跳转流畅;组件化开发;组件可复用;开发便捷  缺点:首屏加载过慢;seo优化不好 多页面应用开发(mpa)  概念...
  • 一个vue单页应用模板,封装了api,规划了合理的结构目录。可以方便的集成iviewUi、elementUi、museUi、mintUi、vuxUi等,用于快速开发单页应用
  • 使用Flask和Vue制作一个基本的CRUD单页面应用,其中后台用到了RESTful API 参考原版的教程https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/ 步骤清晰,动作规范. 下面开始我的实际操练...
  • 为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一、基础说明: node (https://nodejs.org/en/) npm (https://www.npmjs.com) ......
  • vue2单页面开发

    2017-08-31 16:28:37
    vue+webpack+vuex+elementui
  • 由于是使用的VUE版的YDUI。所以购物车的标准按照规定的写法来。 【1】展示商品信息 这个就很简单了,找到对应的样式,该添加的添加,该修改的样式稍微修改一下。控制选中了哪些商品有个双向数据绑定的变量。可以...
  • 【一】页面传参有两种方式 第一种 传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值 -- this.$route.query.key 第二种: 刷新会丢参数 传递参数 -- this.$router.push({name: '...
  • 其实,这种开发模式还是挺少见的,vue自有vue-cli可以使用webpack打包前端项目,然后后端就做后端的活提供数据服务,这样前后端分离的彻底,但是限于笔者个人水平,vue-cli和webpack正在学习中,所以替代的方案,...
  • 【一 】安装axios (1)先cd进入到自己的工程目录下 (2)执行 npm install axios -S 安装即可 【二】封装axios 与后台进行交互 ...import axios from 'axios';...import personInfo from '../store/personInfo';...
  • 在最近公司的项目开发当中 (h5),有一个文章列表页,我发现每次点击文章进入文章详情页面,回来之后都要重新loading页面,于是我便想到如何将页面缓存。 首先我想到的是方案A: 方案一:vue的keep-alive组件 具体...
  • 存档日期:2019年5月13日 | 首次发布:... 在第1部分中,使用Vue.js JavaScript框架开发前端,使用Node Package Manager(NPM)进行依赖关系管理,使用webpack作为构建工具,使用Foundation响应UI。 从基本原理到高...
  • spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushState('','','/test'); 只更改url,不会刷新,手动刷新后可能会404 npm install vue vue-router axios b...

空空如也

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

vue单页开发

vue 订阅