search

cooking-demo / multiple-pages-vue

Vue 2 + webpack 2 多页面例子
55 stars 20 forks source link

Is it possible to write components directly in html? #1

Open lavezzi1 opened 8 years ago

lavezzi1 commented 8 years ago

Hello! Thanks for cool and helpful boilerplate.

I got a question, is it possible to make structure for pages like that – pages/ --page1/ ----index.js ----index.html --page2/ ----index.js ----index.html

So instead of writing components in index.vue I want to define it in index.js and write component in html like

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
    <nav>
        <navigation :items="items"></navigation>
    </nav>
</body>
</html>

Because I dont want put all my html code to js file, but want to use a few vue components on the page.

Is it possible? Thanks!

I got this webpack.config for multiple page app too, it works but bundle's are so big it includes everything and css duplicates a lot of times.

Help please!

QingWei-Li commented 8 years ago

In fact, html-webpack-plugin is supported to write require(xxx)

So, you can define such a template file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var i in htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"><% } %>
  </head>
  <body>
    <div id="app"><%= require('./src/pages/' + htmlWebpackPlugin.options.entry + '/index.html') %></div>
    <% for (var i in htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %>
  </body>
</html>

and build.js

exports.templates = function() {
  return App.pages.map(p => {
    return {
      title: p.title,
      entry: p.entry, // add
      filename: p.entry + '.html',
      template: path.resolve(__dirname, 'index.tpl'),
      cdn: merge(App.cdn, p.cdn),
      chunks: ['vendor', 'manifest', p.entry]
    }
  })
}

Now it will work according to your directory structure