• Vue Summary


    vue computed和watch的区别是什么?

    vue 中const,var,let区别与用法

    <script type="text/ecmascript-6">
    import operateFunctions from "../common/musicOperate";
    export default {
      data() {
        return {};
      },
      computed: {
        toggle() {
          return this.$store.state.toggle;
        },
        songPlayList() {
          return this.$store.state.songPlayList;
        }
      },
      methods: {
        openDetail(event) {
          document.getElementById("musicPlayer").style.display = "block";
          document.documentElement.style.overflow = "hidden";
        },
        ...operateFunctions
      }
    };
    </script>
     
     
    32fcb56d9cd8b14bb8e7d57ff25020fb.png

    1、ES6 模块主要有两个功能:export 和 import

    export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的接口 。

    import:用于在一个模块中加载另一个含有 export 接口的模块(也就是这个 js 文件一定要含有 export )。

    而我们在使用 import 导入一个模块的时候通常这样使用:

    import util from '@/libs/util'

    那么这个 @ 到底是个什么意思呢?

    2、webpack.base.conf.js 文件有如下代码

    cb9fdc09db5a2309b0e6382ebd15fa3e.gif
    resolve: { // 自动补全的扩展名 extensions: ['.js', '.vue', '.json'], // 默认路径代理 // 例如 import Vue from 'vue',会自动到 'vue/dist/vue.common.js'中寻找 alias: { '@': resolve('src'), '@config': resolve('config'), 'vue$': 'vue/dist/vue.common.js' }}
    cb9fdc09db5a2309b0e6382ebd15fa3e.gif

    是不是已经很明确了呢? @ 等价于 src,举一反三,也支持自定义的。

    -------------------------------------

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')

    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
      module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
          },
          {
            test: /.(png|jpe?g|gif|svg)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      }
    }
     
     
    https://blog.csdn.net/qq_34182808/article/details/86690193
     
    https://segmentfault.com/q/1010000008863503
  • 相关阅读:
    2019 USP Try-outs 练习赛
    XDTIC2019招新笔试题 + 官方解答
    2019 ICPC 南昌网络赛
    ICPC 2019 徐州网络赛
    Berlekamp Massey算法求线性递推式
    ICPC 2018 徐州赛区网络赛
    CCPC 2019 网络赛 1006 Shuffle Card
    CCPC 2019 网络赛 1002 array (权值线段树)
    CCF-CSP题解 201803-4 棋局评估
    CCF-CSP题解 201803-3 URL映射
  • 原文地址:https://www.cnblogs.com/zhoading/p/14590230.html
Copyright © 2020-2023  润新知