Мы можем сделать вю.приложение js без.компонент расширения vue и webpack?

Примечание: можем ли мы написать vue.JS большое приложение без использования компилятора для кода, как в настоящее время я вижу все примеры использования webpack теперь, чтобы сделать vue.код js совместимый для браузера .

Я хочу сделать vue.js приложения без webpack и без . Возможно ли это? если это возможно, вы можете предоставить ссылку или дать пример использования маршрутизации в этом случае.

как мы делаем компонент в можно сделать компонент в .js расширение и использование приложения, как мы делаем в angular 1, где мы можем сделать все приложение без какого-либо транс-компилятора для преобразования кода.

можно сделать это только в html, css, js-файле и без webpack.

что я сделал . .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 этот файл добавлен во время загрузки webpack 

// 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>

маршрутизатор

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
    }
  ]
})

я сделал что-то подобное . Можем ли мы сделать это только html , css, js-файл только с не webpack для компиляции кода . Как мы делаем в angular 1 .

спасибо

7
vue-component vue-router vue.js vuejs2

3 ответов

как указано в этом jsFiddle:http://jsfiddle.net/posva/wtpuevc6/, вы не обязаны использовать webpack или .файлы vue.

код ниже не от меня, и весь кредит идет этому создателю jsFiddle:

создать индекс.формат html файл:

<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>

дома.js

const Home = { template: '<div>Home</div>' }

Foo.js

const Foo = { template: '<div>Foo</div>' }

маршрутизатор.js

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

.js 

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

оцените рамках...

просто sidenote:.vue файлы действительно потрясающие, вы обязательно должны попробовать их, если не использовать их не является требованием

5

Я начал изучать vue.js также, и я не знаком с webpack и прочее, и я также хотел все еще отделять и использовать .Vue файлы, как это делает управление и код чище.

Я нашел эту библиотеку: https://github.com/FranckFreiburger/http-vue-loader

и пример проекта с использованием его: https://github.com/kafkaca/vue-without-webpack

Я использую его, и он, кажется, работает нормально.

3

конечно, вы можете. Мы сделали проект с Vue, и у нас было несколько проблем во время компиляции .vue файлы. Поэтому мы переключились на структуру с тремя отдельными файлами.

но имейте в виду, что вам нужно webpack в любом случае. Идея Vue состояла в том, чтобы разделить огромные проекты на компоненты, поэтому используя шаблон внутри .js файл это довольно нормально. Так что взгляните на

html-загрузчик И css-loader

используя эти модули вы можете напишите что-нибудь вроде этого:

компонент.js

// For importing `css`. Read more in documentation above 
import './component.css'

// For importing `html`. Read more in documentation above
const templateHtml =  require('./component.html')

export default {
  name: 'ComponentName',
  components: { /* your components */ },
  mixins: [/* your mixins */ ],
  template: templateHtml,
  computed: .....
}

компонент.в CSS

#header {
  color: red
}

компонент.HTML-код

<div id="header"></div>

но

вы должны знать, что HTML-файл должен быть написан так же, как и я, у вас будет это в template собственность.

кроме того, взгляните на это РЕПО, возможно, вы найдете что - то полезное вот!--9-->

Vue-html-loader. Это вилка от html-loader основной командой Vue.

1