I am currently trying to learn VueJS and I am having this issue where the page is just blank. I can't figure out why this is not working. It was all working yesterday but after I restarted my PC the page is just blank.
Here are my files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
src/App.vue
<template>
<h1>Hello</h1>
</template>
<script>
export default {
name: 'App'
}
</script>
Related
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong here？
Any suggestions would be appreciated.
Many Thanks.
Oren
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
i am working on a project using Laravel + Vue.
my question is how to import the javascript files to my current component.
basically, i want to convert the HTML code below to a component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="60">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Armenia Map</title>
<script src="data.js"></script>
<script src="country.js"></script>
</head>
<body>
<h1></h1>
<div id="map"></div>
</body>
</html>
This is my Compoent:
<template>
<div id="map"></div>
</template>
<script>
import * from '../plugins/country';
import * from '../plugins/map';
export default {
mounted(){
}
}
</script>
please if someone can help.
Thank you.
Depending on what you want to import, you can also do something like this:
import { mapGetters } from 'vuex'
const Countries = require('../plugins/country')
If the file contains javascript code you want to execute emidietely you can do like with bootstrap.js and just require the file.
require('./bootstrap')
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core
I am stymied by this issue. For some reason the Angular routing is not working at all. I simply get a blank screen. All of the modules are loading, there is no error in the console, and if I enter Angular in the console, it works. Yet, I get a blank screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuickCalcs</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/ng-animation.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/factories.js"></script>
<script src="controllers/qcController.js"></script>
</head>
<body ng-app="qc">
<div ng-view></div>
</body>
</html>
-----------------------------
app.js file is:
-----------------------------
var qc = angular.module('qc', [
'ngRoute',
'ngAnimate',
'ngResource'
]);
qc.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/results', {
templateUrl: 'views/results.html',
controller: 'qcController'
}).
otherwise({
redirectTo: 'views/home.html'
});
}]);
-----------------------------
Directory structure is:
-----------------------------
qc
/js
app.js
/views
home.html
results.html
/controllers
qccontroller.js
You must link your page to the application module
in the html tag like this:
< html lang="en" ng-app="qc" />