您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

webpack引入vue单文件

发布时间：2020-04-04 12:09:30编辑：雪饮阅读（）

 

依赖

npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 –D

main.js

import Vue from 'vue';
import App from './App.vue'

new Vue({
    el:'#app',
    render:c=>c(App)
});

app.vue

<template>
    <!-- 当前组件页面的结构-->
    <div>
       {{msg}}
    </div>
 </template>
 <script>
    // 当前组件的业务逻辑
    export default {
       data(){
          return {
             msg:'hello App.vue'
          }
       }
    }
 </script>
 
 <style>
    
    /*css样式*/
    body{
       background-color: green;
    }
 </style>

Webpack.dev.config.js

var path  = require('path');
 const HtmlWebpackPlugin  = require('html-webpack-plugin')
 module.exports = {
    entry:{"main":'./src/main.js'},
    output:{
       path:path.resolve('./dist'),
       filename:'build.js'
    },
    watch:true,
    module:{
       loaders:[
          {
             test:/\.css$/,
             loader:'style-loader!css-loader'
          },
          {
             test:/\.(jpg|png|jpeg|gif|svg)$/,
             loader:'url-loader?limit = 60000'
          },
          {
             test:/\.less$/,
             loader:'style-loader!css-loader!less-loader'
          },
          {
             test: /\.js$/,
             loader: 'babel-loader',
             exclude:/node_modules/,
             options: {
                presets: ['env'],
                plugins: ['transform-runtime'],
             }
          },
          {
             test: /\.vue$/,
             loader: 'vue-loader'
          }
 
       ]
    },
    plugins:[
       new HtmlWebpackPlugin({
          template:'./src/index.html',
       })
    ]
 }