Vue js muun sovelluksen sisällä

[embedded]

Nyt tuli vastaan uudenlainen tarve

Vue cli:llä (vue2.6, cli versio 4) pitäisi saada tehtyä vue app joka on muun nettisivun sisällä (php/html5)
Tein cli.llä nyt projektin alikansioon app
ja seuraavanlaisen vue.config.js-tiedoston:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../turhahtml"),
  assetsDir: "../vueapp"
}

Nyt vue sentään buildaantuu kyseiseen kansioon, mutta millä saan nuo js-tiedostot sisällytettyä muun, normaalin nettisivun sisään kun tiedostojen nimi muuttuu joka buildissa (esim app.20d39996.js)


Ja toinen ongelma on poluissa, apache pyörii osoiteessa http://nnn.nn.nn.nnn/my_website mutta vue buildaa tiedostopolut oman node serverinsä polun mukaan mikä on /:8080, tosin tässä vue projektissa en tarvitse kuvia tai css:ää vuen sisällä.

 

[Tuuchen]

Importtaat Vuen indexiin

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Teet Vue komponentin (esim. app.js)

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

Lisäät Vue komponentin HTML:ään

<div id="app">
  {{ message }}
</div>

Importtaat halutun Vue komponentit indexiin

<script src="../app.js"></script>

Aina kun HTML buildaantuu, niin Vue komponentit toimii siellä myös.

Vue.js Tutorials From The Official Vue Docs

A collection of screencasts which mirrors the official Vue.js guide. We've also created a free 9-part course on Vue.js [here.](http://bit.ly/learnvue)

scrimba.com

Ja jos tarvitset esim routteria, niin tällä tapaa:

Vue.js Routing From Scratch Using CDN Without CLI

Today I am going to share how to route in Vue.js using CDN only. We won't use CLI, Webpack, etc. We are going to se...

shouts.dev

 

[embedded]

Importtaat Vuen indexiin

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Teet Vue komponentin (esim. app.js)

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

Lisäät Vue komponentin HTML:ään

<div id="app">
  {{ message }}
</div>

Importtaat halutun Vue komponentit indexiin

<script src="../app.js"></script>

Aina kun HTML buildaantuu, niin Vue komponentit toimii siellä myös.

Vue.js Tutorials From The Official Vue Docs

A collection of screencasts which mirrors the official Vue.js guide. We've also created a free 9-part course on Vue.js [here.](http://bit.ly/learnvue)

scrimba.com

Ja jos tarvitset esim routteria, niin tällä tapaa:

Vue.js Routing From Scratch Using CDN Without CLI

Today I am going to share how to route in Vue.js using CDN only. We won't use CLI, Webpack, etc. We are going to se...

shouts.dev

Pitääkö tätä mallia yhä buildata npm run build ja devata npm run serve:llä ?
koska juuri tuo html-tiedosto olisi minulla valmiina, se tulee toisesta ohjelmasta

 

[Tuuchen]

Pitääkö tätä mallia yhä buildata npm run build ja devata npm run serve:llä ?
koska juuri tuo html-tiedosto olisi minulla valmiina, se tulee toisesta ohjelmasta

Ei tarvitse mitään buildata, Vue tulee cdn:n kautta suoraan javascriptinä ja toimii html:n sisällä

 

[embedded]

Kiitos vastauksista! Tarkoittaako tämä myös että vue komponentit on nyt julkaistu pakkaamattomana, eli niiden lähdekoodi näkyy koko maailmalle täysin luettavassa muodossa ?