Comments (2)
here is a full but minimalist example:
my-component.vue
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
index.html
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
since some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
),
you can start a small express server to run this example.
npm install express
npm install serve-static
server.js
var path = require('path');
var express = require('express');
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic(__dirname, {'index': 'index.html'}));
app.listen(8181);
node server
from http-vue-loader.
Brilliant! That works. I was running a server, but that is very nice to call out the CORS restriction, that easily could have tripped me up. Being new I just wasn't sure what was required/missing, and going from example to example it's easy to miss a detail. I did try converting a more complete vue component that I wrote, but in the rewrite I missed the pound (#) in the el identifier. Thank you very much for the example.
Might I suggest (via pull request if you prefer) to include your full example for us noobs in your readme? You could then keep the deltas you already have for each of the different ways to use your loader. I think it would be helpful. Not a big deal, people can now find the example in the issues section. Just a thought.
I really like this loader. If fills a huge gap for small to medium sized projects/prototypes . I want my components in separate files, but I don't want to build (or download an extra 39MB! of cli just to see my changes). For a less opinionated framework, Alex chose and odd place to be very opinionated.
Thanks again
Quincy
from http-vue-loader.
Related Issues (20)
- component updating only after clearing browser's cache HOT 4
- Component name & url without .vue extension
- Nested component rendering with wrong order HOT 2
- responseText not defined HOT 1
- 如何支持组件之前import 导入
- 根据同源策略,这个插件是否已经失效了?
- "Pending components loaded" event HOT 1
- Require does not work
- how to use <lang="bable"> to import outside js function HOT 1
- Vue3 support
- ie11中compile返回的Promise对象会抛出错误
- Use Custom Components in Custom Components HOT 1
- is it possible to use JSX? HOT 1
- ANNOUNCEMENT
- html import http-vue-loader and my component. when I use 'watch' in componet,but is dosen't work
- 去掉必须引用.vue文件的限制,需要支持引用.html文件 HOT 2
- mistake:Reason: TypeError: httpVueLoader.langProcessor[lang.toLowerCase()] is undefined
- v-bind失效
- Uncaught ReferenceError: hello is not defined HOT 1
- Help request: How to change a project created with vue-cli to use http-vue-loader
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from http-vue-loader.