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
原文地址:https://www.cnblogs.com/zhoading/p/14590230.html