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>

 

 

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

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

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

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

import util from '@/libs/util'

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

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

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' }}

是不是已经很明确了呢？ @ 等价于 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