javascript - template - vue title attribute

Vue-configuración del cargador web vue

Question

Sigo recibiendo errores cada vez que quiero construir un archivo. ¿Cuál es el motivo? Parece que el archivo .vue no es reconocible por el paquete web, pero el archivo de configuración del paquete web se ve correctamente. error de paquete web

bundle-app.js 189 kB 1 [emitted] app
+ 12 hidden modules
ERROR in Unexpected token >
@ ./app/application.js 7:11-31

webpack.config.js

var path = require("path");
module.exports = {
context: path.join(__dirname, ''src''),
entry: {
app: ''./app/application.js''
},
output: {
path: path.join(__dirname, ''dist''),
filename: ''bundle-[name].js''
},
module: {
loaders: [
{
test: //.js$/,
loader: ''babel-loader'',
include: /src/,
query: {
presets: ["es2015"]
}
},
{
test: //.vue$/,
loader: ''vue'',
},
]
},
vue: {
loaders: {
js: ''babel''
}
}
}

paquete.json

"devDependencies": {
"webpack": "~2.2.1",
"babel-core": "~6.23.1",
"babel-loader": "~6.3.1",
"babel-preset-es2015": "~6.22.0",
"sass-loader": "~6.0.0",
"node-sass": "~4.5.0",
"extract-text-webpack-plugin": "~2.0.0-rc.3",
"vue-template-compiler": "~2.2.4",
"css-loader": "~0.27.3",
"vue-loader": "~11.1.4"
},
"dependencies": {
"vue": "~2.2.4"
}
}

app / application.js

import Vue from ''vue''
import App from ''./app.vue''
new Vue({
el: ''body'',
component: { App }
})

app / app.vue

<template>
<div id="app">
</div>
</template>
<script>
export default {
data () {
return {
msg: ''Hello from vue-loader!''
}
}
}

Answer 1

Hay algunas configuraciones adicionales que debe hacer para que el cargador funcione correctamente.

Te recomiendo que vue-cli para que la configuración funcione bien.

npm install -g vue-cli
vue init webpack-simple hello
cd hello
npm install
npm run dev

Básicamente, en su webpack.config.js , olvidó / cometió errores en:

1- El nombre del cargador debe ser loader: ''vue-loader'' lugar de loader: ''vue'' .

2- Crea una clave llamada resolve , con el contenido:

alias: {
vue$: ''vue/dist/vue.common.js'',
}

3- Y esta clave vue: ...loader: babel , no es necesario.

Answer 2

¿Estás usando vue-cli con ESLint? Si lo hace, necesita una coma después de cada evento de elemento en el último y el punto y coma.

import Vue from ''vue'';
import App from ''./app.vue'';
new Vue({
el: ''body'',
components: { App },
});

Answer 3

En los proyectos que usan vue, las personas no recomiendan configurar el paquete web y vue-loader por separado. Puede usar directamente el andamio oficial vue, vue-cli. No tiene que considerar estas configuraciones, configuradas automáticamente. vue-cli

Si acabas de empezar a aprender Vue, aquí tienes una demostración de nivel de entrada. Aunque es solo una aplicación pequeña, pero cubre muchos puntos de conocimiento (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), incluido el front-end, back-end , base de datos y otros sitios Algunos de los elementos necesarios, para mí, que aprenden gran significado, ¡me gustaría alentarme mutuamente!

Vue Demo