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 .

我想申请vue.js个,不带webpack,也不带.vue扩展.可能吗?如果可能的话,你能提供一个链接,或者给出一个在这种情况下如何使用路由的示例吗.

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

可以做到这一点,在html,css,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此文件在网页包加载时添加

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

谢谢

推荐答案

正如本JSFIDLE:http://jsfiddle.net/posva/wtpuevc6/中所述,您没有义务使用webpack或.vue文件.

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: 100 files are really awesome, you should definitely try them if not using them is not a requirement

Vue.js相关问答推荐

使用nuxt I18N验证规则消息翻译

如何使用 Vite 从公共目录导入 JSON 文件?

如何使用 async/await 在 vue js 中添加标头

CssSyntaxError 使用 Webpack 4 构建未知单词

在重复表行中

使用 Laravel 作为后端刷新 Vue.js SPA 的身份验证令牌

Webpack 你可能需要一个合适的加载器来处理这个文件类型

vuejs 中的单元测试

如何使用 vuex 删除项目?

Vue Cli 3 不允许我在 Webpack 中处理 SVG

如何将 Angular 和 Vue 项目合并在一起?

按键删除对象不会更新vue组件

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

将登录页面包含在单页应用程序中是否不安全?

单击时交换组件

使用 puppeteer 生成 PDF 而不保存

Vue 2 转换不起作用

Vue Router beforeRouteLeave 不会停止子组件

Vuetify 离线文档

如果通过 jquery 更新,Vuejs 绑定不起作用