webpack, vue.js가 vue 파일을 컴파일 할 수 없습니다.

Question

vue.js 및 webpack을 처음 사용하고 VUE 파일을 컴파일하는 데 문제가 있습니다.

나는 템플릿 기술로 봄 부팅 및 조약돌을 사용하고 있는데 나는 하나의 .js 파일을 생성하고 싶은에 포함 내 index.pebble 여기

내 webpack.config.js

module.exports = { 
    // This is the "main" file which should include all other modules 
    entry: './src/main/resources/static/app/main.js', 
    // Where should the compiled file go? 
    output: { 
     // To the `dist` folder 
     path: './src/main/resources/static/lib', 
     // With the filename `build.js` so it's dist/build.js 
     filename: 'build.js' 
    }, 
    module: { 
     // Special compilation rules 
     loaders: [ 
      { 
       // Ask webpack to check: If this file ends with .js, then apply some transforms 
       test: /\.js$/, 
       // Transform it with babel 
       loader: 'babel', 
       // don't transform node_modules folder (which don't need to be compiled) 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue' 
      } 
     ] 
    }, 
    vue: { 
     loaders: { 
      js: "babel-loader?presets[]=es2015,presets[]=stage-2" 
     } 
    }, 

} 

내 파일 babelrc :

{ 
    "presets": ["es2015", "stage-0"], 
    "plugins": ["transform-runtime"] 
} 

내 파일 package.json

{ 
    "name": "xxxx", 
    "version": "1.0.0", 
    "description": "TODO", 
    "scripts": { 
    "watch-build": "echo \"not available\" && exit 1", 
    "build": "npm install", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "LMFR", 
    "readmeFilename": "README.md", 
    "devDependencies": { 
    "babel-core": "^6.1.2", 
    "babel-loader": "^6.1.0", 
    "babel-preset-latest": "^6.16.0", 
    "babel-preset-stage-2": "^6.18.0", 
    "babel-runtime": "^5.8.0", 
    "webpack": "^1.12.2", 
    "css-loader": "^0.23.0", 
    "style-loader": "^0.13.0", 
    "vue-loader": "^7.3.0", 
    "vue-html-loader": "^1.0.0" 
    }, 
    "dependencies": { 
    "vue": "^2.3.2" 
    } 
} 

:

은 여기 내 main.js

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

'./app.vue'내가 직면하고있어 오류에서 'VUE' // 수입 앱에서

수입 뷰입니다

: 가이드로 webpack-simple VUE-CLI 템플릿에서

build.js:494 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 

Answer 1

봐, 난 당신이 종속성을 누락 생각 https://github.com/vuejs-templates/webpack-simple/blob/master/template/package.json#L26

"vue-template-compiler": "^2.2.1", 

Answer 2

만 템플릿 속성을 사용할 수 없습니다 당신을 구축 런타임이 대신 렌더링 기능을 사용해야하거나 템플릿 컴파일러를 포함합니다.

근무

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

new Vue({ 
    el: '#app', 
    render: function(createElement) { 
     return createElement(
      'p', 
      'haaaa' 
     ) 
    } 
}) 

JsFiddle에 main.js을 변경하려고 바이올린

웹팩 작업 할 때 .vue 파일 <template></template> 태그에서 컴파일 할 수 있지만 메인 뷰 루트 기능을 렌더링 사용해야합니다 일반적으로 모양은

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

new Vue({ 
    el: '#app', 
    render: function(createElement) { 
     return createElement(
      App 
     ) 
    } 
})