// Get the vue-loader pluginconst VueLoaderPlugin =require("vue-loader/lib/plugin");// This is what the file exports
module.exports ={// My entry point
entry:"./src/index.js",
module:{
rules:[// All Vue files use the vue-loader{
test:/\.vue$/,
loader:"vue-loader",},// All CSS files use css than style loaders{
test:/\.css$/,
use:["style-loader","css-loader"]},],},
plugins:[// Register the vue-loader pluginnewVueLoaderPlugin(),],};
// Import Vue, I prefer the ESM syntaxeimport Vue from "vue/dist/vue.esm.js";// Create a new Vue instance targeted at the element with the id "app"newVue({
el:"#app",});
现在,我们创建一个
index.html
文件(通常在
public
目录中,但这并不是必然要求)。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Test</title></head><body><!-- My target element --><main id="app"></main><!-- The JS file from webpack --><script src="../dist/main.js"></script></body></html>
import Vue from "vue/dist/vue.esm.js";// Import the viewimport Home from "./views/Home.vue";newVue({
el:"#app",// Declare it as a components I'll use (I know, views are treated as components by Vue)
components:{
Home,},// Render the view
template:"<Home/>",});
<template><div class="film"><h2>Title</h2><p>Text</p></div></template><script>
export default{
name:"Film",};</script><!-- scoped because I don't want to interfere with any other component --><style scoped>.film {
border:1px solid blue;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
并在中使用它
Home.vue
。
<template><div><!-- Use the component --><Film /><Film /><Film /></div></template><script>// Import the componentimport Film from "../components/Film.vue";
export default{
name:"Home",
components:{// Declare the component
Film,},};</script>
<template><div class="film"><!-- Use properties here --><h2>{{ title }}</h2><p>{{ text }}</p></div></template><script>
export default{
name:"Film",// Properties list declaration
props:["title","text"],};</script><style scoped>.film {
border:1px solid blue;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template><div><!-- Loop through my data --><Film v-for="(film, index) in films":key="index":title="film.title":text="film.text"/></div></template><script>import Film from "../components/Film.vue";
export default{
name:"Home",
components:{
Film,},// data should be a function
data (){// that return a set of valuesreturn{
films:[{
title:"Alien",
text:"It follows the crew of the commercial space tug Nostromo, who encounter the eponymous Alien, an aggressive and deadly extraterrestrial set loose on the ship.",},{
title:"Interstellar",
text:"In a dystopian future where humanity is struggling to survive, it follows a group of astronauts who travel through a wormhole near Saturn in search of a new home for mankind.",},{
title:"Reservoir Dogs",
text:"Diamond thieves whose planned heist of a jewelry store goes terribly wrong.",},],};},};</script>
<template><!--...--></template><script>import Film from "../components/Film.vue";
export default{
name:"Home",
components:{
Film,},
data (){return{// Emtpy film list
films:[],};},
async mounted (){// Fetch from mock APIconst response = await fetch("https://mock-film-api-t0jk5mabvwnt.runkit.sh/");if(response.ok){// Load result into films listthis.films = await response.json();}},};</script>
<template><v-app><Film v-for="(film, index) in films":key="index":title="film.title":text="film.text"/><!-- Form that will call addFilm when submitted --><form @submit="addFilm"><div><label for="title">Title</label><!-- v-model link the input value to a variable --><input type="text" v-model="inputTitle" id="title"></div><div><label for="text">Text</label><input type="text" v-model="inputText" id="text"></div><button type="submit">Add</button></form></v-app></template><script>import Film from "../components/Film.vue";
export default{
name:"Home",
components:{
Film,},
data (){return{
films:[],// Holds the value of each input
inputTitle:"",
inputText:"",};},
async mounted (){// ...},
methods:{// New method
addFilm (event){// Stop the form from reloading the page (default behavior)
event.preventDefault();// Add a new film to the listthis.films.push({
title:this.inputTitle,
text:this.inputText,});// Clear out input fieldsthis.inputTitle ="";this.inputText ="";},},};</script>
import Vue from "vue/dist/vue.esm.js";// Get Vuetify and its CSSimport Vuetify from "vuetify";import"vuetify/dist/vuetify.min.css";import Home from "./views/Home.vue";// Prepare the usage of vuetify
Vue.use(Vuetify);const vuetify =newVuetify();newVue({// Pass the instance to Vue
vuetify,
el:"#app",
components:{
Home,},
template:"<Home/>",});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
然后,我们可以在应用程序中的任何地方(在Film.vue)中使用它。
<template><!-- All Vuetify components are prefixed with "v-"--><v-col cols="12"><v-card shaped><v-card-title>{{ title }}</v-card-title><v-card-text>{{ text }}</v-card-text></v-card></v-col></template><script>// ...</script><!-- I don't need my crappy style anymore -->
// In webpack.config.js
module.exports ={// This will tell all your code to use the same Vue.
resolve:{
alias:{
vue$:"vue/dist/vue.esm.js",},},// ...};