Vue template not work while using es6 import vue - javascript

Below is my reproduce step:
npm install vue#2.x.x
write below code in my main.js file
import Vue from 'vue' new Vue({
el: '#app',
data: {
msg: 'hello,word'
} })
use webpack build it, then it will build a file in dist folder
then I write index.html file
<!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.0">
<title>Document</title>
</head>
<body>
<div>
<div><span id="app">{{ msg }}</span></div>
</div>
<script src="./dist/main.js"></script>
</body>
</html>
then I open the index.html file in chrome, but it not display 'hello, word', I am a new beginner vue, I can not figure out what it wrong. thanks in advance.
And I alse found that vue delete my dom like above img.

At first, I thought it was because you weren't running the project properly but then I realized that the comment you've pointed to with the red arrow shows that the Webpack server is in fact running.
The problem you're having here it seems, is that you're using the runtime-only build of Vue when you need the runtime + compiler build to compile Vue components that have template blocks or swap the template blocks for render functions.
If you don't use the version with the compiler but your components have template blocks, then they won't compile properly (although normally an error is shown to advise of this).
For instructions on using the full build rather than the runtime-only version, see here.

Related

Using Handlebars in the Browser as an ES6 Module

I am trying to use Handlebars in the Browser (client-side script). I am importing a js module templating.js (see below) and want to import the Handlebars library as an ES6 module but can't find any documentation.
In the example below I was lifting the contents of the following js library as handlebars.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templating</title>
<meta name="description" content="example showing how to template content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="templating.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script type="module" src="templating.js"></script>
</head>
<body>
<header>
<h1>Templating</h1>
</header>
<main>
</main>
</body>
</html>
/* templating.js */
import { Handlebars } from './handlebars.js' // v4.7.6
document.addEventListener('DOMContentLoaded', event => {
console.log('DOMContentLoaded')
})
I'm getting the error: requested module './handlebars.js' does not provide an export named 'Handlebars'
Does anyone know:
What handlebars library to use?
How to import this into my script?
Any help greatly appreciated...
Loading handlebars via a script tag will expose it as a UMD (universal module definition). This just means that all functionality of the library is exposed via global variable(s). In the case of the library link you provided, the main global variable appears to be Handlebars.
If you would like to import handlebars directly into your script as a CommonJS/ES6 module, you would need to use a build tool such as Webpack.
Try rendering your HTML document in a browser and then typing Handlebars in the devtools console, you should see an object containing all of Handlebars' exported functions.

Require function is not defined

I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js
A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.

How does a Vue app get launched if the index.html doesn't load any javascript?

None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.

Don't understand project structure of Vue project created with vue-cli

I am new to Vue.js and have never used a frontend framework before.
I created a project using the "vue create" command with the usual plugins and everything (nothing game changing), and everything worked fine.
I wanted to start from 0, so I removed everything but the index.html file in the public directory, the main.js file in the src directory and the configuration files(see below).
Now when I load the page you can see "Test" and "{{message}}" for an instant and then it disappears leaving the page completely blank.
So my question is, how is the main.js file connected to the index.html file. I know from webpack that you need an entry point and link everything from there, but i cannot find such thing here, as main.js doesn't include index.html. So why doesn't my code work as intended? I want it to say Hello World.
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.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Vue Getting Started</title>
</head>
<body>
<noscript>
<strong>
We're sorry but vue_getting_started doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app">
<h1>Test</h1>
<h1>{{ message }}</h1>
</div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
Where you see the line
<!-- built files will be auto injected -->
is where webpack will inject a script tag that loads the bundled javascript, you should be able to see that when you use the devtools. This is where your main entry chunk is being loaded. However, this only happens if webpack is actually doing its job either by running the dev server or by creating a production bundle.
If by "when I load the page" you mean opening up the index.html file in your browser, this won't do much. You will need to run webpack, in the newer versions of the vue cli you can do that by navigating to the root folder and running vue-cli-service serve

external JavaScript File not working in angular 2

I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.

Categories

Resources