vue学习记录 coderwhy d6

Posted 2021-07-22 Kooklen_xh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习记录 coderwhy d6相关的知识，希望对你有一定的参考价值。

在这里插入图片描述

配置文档：https://webpack.docschina.org/loaders/style-loader/

https://webpack.docschina.org/loaders/url-loader/
图片处理：rul loader

ES6->ES5
https://webpack.docschina.org/loaders/babel-loader/

new Vue({
    el:'#app',
    data:{
        message:'123'
    },
    template:`
      <div>
      <div>
      test
      </div>
      <button class="test">123</button></div>
    `
})

<body>
    <div id="app">
    </div>
    <script src="./dist/bundle.js"></script>
//导入必须放在app后面不然识别不到
</body>


const app = {
    template: `
      <div>
      <div>
      test
      </div>
      <button class="test">123</button></div>
    `,
    data() {
        return { message: '123' }
    }
}

new Vue({
    el: '#app',
    template: '<app/>',
    components: {
        app
    }
})

export default {
    template: `
      <div>
      <div>
      test
      </div>
      <button class="test">123</button></div>
    `,
    data() {
        return { message: '123' }
    }
}

new Vue({
    el: '#app',
    template: '<app/>',
    components: {
        app
    }
})

在这里插入图片描述

npm install vue-loader vue-template-compiler --save-dev


 module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    }

在package.json中查看自己webcpack版本是不是 ^ 4.x，如果是，安装vue-loader@14.2.2即可。

npm install vue-loader@14.2.2

在这里插入图片描述

webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

在这里插入图片描述

以上是关于vue学习记录 coderwhy d6的主要内容，如果未能解决你的问题，请参考以下文章