Menu
Note: Can we write vue.js large application without using any compiler for code like currently i see all example use webpack now to make vue.js code compatible for browser .
I want make vue.js application without webpack and without using .vue extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case.
As we make component in .vue extension can be make component in .js extension and use application as we do in angular 1 where we can make whole app without any trans-compiler to convert the code.
Can be done that in html , css , js file only and no webpack sort of thing.
What i have done . index.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vueapp01</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> main.js this file added in webpack load time
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <a href="#/hello">Hello route</a> <a href="#/">Helloworld route</a> {{route}} <router-view/> <!-- <hello></hello> --> </div> </template> <script> export default { name: 'App', data () { return { route : "This is main page" } } } </script> router
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hello from '../components/Hello' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hello', name: 'Hello', component: Hello } ] }) I have done something like this . Can we do this by just html , css , js file only with not webpack to compile code . Like we do in angular 1 .
Thanks
309
Is it really necessary to use webpack to build Vue. js-powered applications? The answer is no. Thanks to native browser support for JavaScript Modules, it's easier than ever to build powerful JavaScript applications without using any build tools.
Yes. You can add Vue functionality to existing project without Vue CLI. Preferably a project using Webpack as bundler...then it is pretty simple. You need 3 packages: vue@next, @vue/compiler-sfc and vue-loader and add some rule configuration in your webpack.
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files.
The code below is not from me and all credit goes to this jsFiddle creator:
Create an index.html file:
<script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <script src="/js/Home.js"></script> <script src="/js/Foo.js"></script> <script src="/js/router.js"></script> <script src="/js/index.js"></script> <div id="app"> <router-link to="/">/home</router-link> <router-link to="/foo">/foo</router-link> <router-view></router-view> </div> Home.js
const Home = { template: '<div>Home</div>' } Foo.js
const Foo = { template: '<div>Foo</div>' } router.js
const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/foo', component: Foo } ] }) index.js
new Vue({ router, el: '#app', data: { msg: 'Hello World' } }) Appreciate the framework...
Just a sidenote: .vue files are really awesome, you should definitely try them if not using them is not a requirement
198
I have started learning vue.js also and I am not familiar with webpack and stuff and I also wanted to still separate and use .vue files as it makes management and code cleaner.
I have found this library: https://github.com/FranckFreiburger/http-vue-loader
and a sample project using it: https://github.com/kafkaca/vue-without-webpack
I am using it and it seems to work fine.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
