我们可以制作不带.vue扩展组件和webpack的vue.js应用程序吗?

vue.js Vue.js

Tom老丝Pro

2020-03-14

注意:我们可以在不使用任何编译器的情况下编写vue.js大型应用程序的代码吗(例如当前我看到所有示例现在都使用webpack来使vue.js代码与浏览器兼容)。

我想在不使用扩展名的vue.js情况webpack制作应用程序.vue可能吗?如果可能,您是否可以提供链接或给出示例,说明在这种情况下如何使用路由。

当我们在.vue扩展中制作组件时.js,可以像在angular 1中那样扩展中制作组件并使用应用程序,在那里我们可以制作整个应用程序而无需任何反编译器来转换代码。

可以做到仅在html,css,js文件中,而没有webpack之类的东西。

我做了什么 。 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 该文件在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/>'
})

应用程序

<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来编译代码吗?就像我们在角度1中所做的一样。

谢谢

第1612篇《我们可以制作不带.vue扩展组件和webpack的vue.js应用程序吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
null 2020.03.14

我也已经开始学习vue.js,而且我对webpack和其他内容并不熟悉,我还想继续分离和使用.vue文件,因为它可以简化管理和代码编写工作。

我找到了这个库:https : //github.com/FranckFreiburger/http-vue-loader

以及使用它的示例项目:https : //github.com/kafkaca/vue-without-webpack

我正在使用它,它似乎工作正常。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android