webpack을 사용한 간단한 Vue.js

기본적으로 javascript/webpack/npm/whatever에 대해서는 알지 않지만 간단한 Vue.js 앱을 사용하려고합니다. 나는 웹 페이지로 이동webpack을 사용한 간단한 Vue.js

그것은이

index.html을 보이는

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Vue Test</title> 
    </head> 
    <body> 
     <div class="vue-app"> 
     {{ message }} 
     </div> 
    <script src="/static/testvue.bundle.js"></script> 
    </body> 
</html>

main.js

import Vue from 'vue'; 

new Vue({ 
     data: { 
      message: 'Testing Vue' 
     }, 
     el: '.vue-app' 
});

webpack.config.js

var path = require('path'); 

module.exports = { 
    entry: './main.js', 
    output: { 
     filename: 'testvue.bundle.js', 
     path: path.join(__dirname, '') 
    }, 
    devServer: { 
     inline: true, 
     port: 8080 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 

       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    } 
};

, 그것은 공백이고 나는 본다. 콘솔에서 "요소"이 : 무슨 어떻게 작동하게하는 무슨

<!--function (e,n,r,o){return Ce(t,e,n,r,o,!0)}-->

어떤 생각? 그것은 뭔가를하려고 노력하는 것 같지만, 어떤 것은 정렬되어 있지 않습니다. 나는 .vue-app 대신에 vue-app를 사용하거나 body 대신에 {vue-app}를 사용하고 {{message}}를 body에 직접 넣는 것과 같이 다르게 보았던 몇 가지 사항을 변경해 보았습니다. 도움이되지 않는다. 나는 그 차이점을 모른다.

출처

2017-12-06 MichaelB

아마도 Vue webpack loader가 필요할 것입니다. https://github.com/vuejs/vue-loader – Phix

vue-loader는 .vue 템플릿 파일을위한 것이지, 아니요? 간단한 변수 대체를 위해 필요하지 않아야합니다. – MichaelB

-1

데이터에 message을 반환해야합니다.

출처

2017-12-06 02:13:58 KKK

객체를 반환하는 데이터 함수는 구성 요소에만 필요합니다. – Bert

그래서, 문제처럼 보인다

new Vue({ 
 
     data() { 
 
      return { 
 
       message: 'Testing Vue' 
 
      } 
 
     }, 
 
     el: '.vue-app' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Vue Test</title> 
 
    </head> 
 
    <body> 
 
     <div class="vue-app"> 
 
     {{ message }} 
 
     </div> 
 
    <script src="/static/testvue.bundle.js"></script> 
 
    </body> 
 
</html>

는 웹팩은 뷰의 "ESM"버전을 원하는 것입니다.

당신은 당으로 webpack.config.js에 몇 가지 물건을 추가 할 수 있습니다 https://vuejs.org/v2/guide/installation.html

그리고 작업을 시작할 것으로 보인다.

코드는 내가 그 차이가 무엇인지 잘 모르겠습니다 또는이 비록 중요한 이유

resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
}

스 니펫.

출처

2017-12-06 02:30:33 MichaelB

webpack을 사용한 간단한 Vue.js

답변

관련 문제