首页 > 其他分享> > vue学习记录 coderwhy d6

vue学习记录 coderwhy d6

2021-06-02 12:00:02 作者：互联网

在这里插入图片描述

配置文档：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,app,loader,webpack,123,template,d6,coderwhy
来源： https://blog.csdn.net/weixin_40857648/article/details/117436990