没有 .vue 扩展组件和 webpack，我们可以制作 vue.js 应用程序吗？

Question

注意：我们可以编写 vue.js 大型应用程序而不使用任何编译器来编写代码吗？我现在看到所有示例都使用 webpack 来使 vue.js 代码与浏览器兼容。

我想制作 vue.js 没有 webpack 且不使用 .vue 扩展名的应用程序。可能吗？如果可能的话，你能提供一个 link 或给出在这种情况下如何使用路由的示例吗？

当我们在 .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/>'
})

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 .

中所做的那样

谢谢

Answer 1

如 jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ 所述，您没有义务使用 webpack 或 .vue 文件。

下面的代码不是我写的，所有功劳都归功于这个 jsFiddle 创建者：

创建一个 index.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>

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

欣赏框架...

旁注：.vue 文件真的很棒，如果不需要使用它们，你一定要尝试一下

Answer 2

当然可以。我们用 Vue 做了一个项目，在编译 .vue 文件时遇到了几个问题。所以我们切换到包含三个独立文件的结构。

但请注意，无论如何您都需要 webpack。 Vue 的想法是将大型项目拆分成组件，因此在 .js 文件中使用模板是很正常的。所以看看

html-loader 和 css-loader

使用这些模块，您可以编写如下内容：

component.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: .....
}

component.css

#header {
  color: red
}

component.html

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

但是

您需要知道 HTML 文件的编写方式应与我在 template 属性.

中的方式相同

另外，看看这个 repo，也许你会在这里找到有用的东西

Vue-html-loader。它是 Vue 核心团队 html-loader 的一个分支。

Answer 3

我也开始学习了 vue.js，我对 webpack 之类的东西不熟悉，我也想仍然分离和使用 .vue 文件，因为它使管理和代码更干净。

我找到了这个图书馆： https://github.com/FranckFreiburger/http-vue-loader

和一个使用它的示例项目： https://github.com/kafkaca/vue-without-webpack

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

Answer 4

你完全可以，但有很多缺点。例如：您不能轻易使用任何预处理器，例如 Sass 或 Less；或 TypeScript 或使用 Babel 转译源代码。

如果您不需要对旧版浏览器的支持，您现在可以使用 ES6 模块。几乎所有的浏览器都支持它。参见：ES6-Module.

但是 Firefox 不支持 dynamic import()。只有 Firefox 66 (Nightly) 支持，需要开启。

如果这还不够，您的 Web 应用程序将不会被编入索引。这对 SEO 不利。

例如，Googlebot 可以抓取和索引 Javascript 代码，但 still uses older Chrome 41 用于渲染，并且它的版本不支持 ES6 模块。

如果这对你来说不是缺点，那么你可以这样做：

删除任何三十方库导入，如 Vue、VueRouter 等。并使用脚本标签将它们包含在 index.html 文件中。所有 es6 模块中的所有全局变量都是可访问的。例如，从 main.js 和所有 .vue 文件中删除此行：
```
import Vue from 'vue';
```
并在您的 index.html 中添加此行：
```
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
```

重写所有 .vue 文件并将文件扩展名更改为 .js。例如，重写如下：

<template>
    <div id="home-page">
        {{msg}}
    </div>
</template>
<script>
export default {
    data: function() {
        return { msg: 'Put home page content here' };
    }
}
</script>
<style>
#home-page {
    color: blue;
}
</style>

像这样：

let isMounted = false; /* Prevent duplicated styles in head tag */

export default {
    template: `
        <div id="home-page"> /* Put an "id" or "class" attribute to the root element of the component. Its important for styling. You can not use "scoped" attribute because there isn't a style tag. */
        {{msg}}
        </div>`,
    mounted: function () {
        if (!isMounted) {
            let styleElem = document.createElement('style');
            styleElem.textContent = `
                #home-page {
                    color: blue;
                }
            `;
            document.head.appendChild(styleElem);
            isMounted = true;
        }
    },
    data: function () {
        return {
            msg: 'Put home page content here'
        };
    }
}

就这些了。我在 this link

P.S。没有语法高亮的文本编辑可能会令人沮丧。如果您使用 Visual Studio 代码，您可以安装 Template Literal Editor extension. It allows editing literal strings with syntax highlight. For styles select CSS syntax, and for templates HTML syntax. Unknown tag in HTML are highlighted differently. For solve this, change the color theme. For example, install Brackets Dark Pro 颜色主题或您喜欢的任何主题。

此致！

Answer 5

在 vuejs 3 中，您可以 ES6 模块化方式（不需要 webpack 或其他工具）：

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      { 
        "imports": {
          "vue": "https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js",
          "vue-router": "https://unpkg.com/vue-router@4.0.5/dist/vue-router.esm-browser.js",
          "html" : "/utils/html.js"
        } 
      }
      </script>    
    <script src="/main.js" type="module"></script>    
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

main.js

import { createApp, h } from 'vue';
import {createRouter, createWebHashHistory} from 'vue-router';
import App from './components/App.js';

const routes = [//each import will be loaded when route is active
  { path: '/', component: ()=>import('./components/Home.js') },
  { path: '/about', component: ()=>import('./components/About.js') },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})

const app = createApp({
  render: () => h(App),
});

app.use(router);
app.mount(`#app`);

components/App.js

import html from 'html';
export default {
  name: `App`,
  template: html`
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>  
    <router-view></router-view>
  `};

components/Home.js

import html from 'html';
export default { 
    template: html`
        <div>Home</div>
    `};

components/About.js

import html from 'html';
export default { 
    template: html`
        <div>About</div>
    `};

utils/html.js

// html`..` will render the same as `..` 
// We just want to be able to add html in front of string literals to enable 
// highlighting using lit-html vscode plugin.
export default function () {
    arguments[0] = { raw: arguments[0] };
    return String.raw(...arguments);
}

备注：

目前 (04/2021) importmap 仅适用于 chrome (firefox in progress)。为了使代码也与其他浏览器兼容，只需（在每个 .js 文件上）直接从 url 导入依赖项。在这种情况下，虽然 vue-router.esm-browser.js 仍然导入 'vue'，因此您应该提供它的更新版本，将 import { .... } from 'vue' 替换为 import { .... } from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js'
为避免瀑布加载效应，您可以将 <link rel="modulepreload" href="[module-name]"> 条目添加到 index.html 以在您需要它们之前开始异步预加载部分或所有模块。

A Related article

没有 .vue 扩展组件和 webpack，我们可以制作 vue.js 应用程序吗？

Can we make vue.js application without .vue extension component and webpack?

vue.js

vue-router

vue-component

vuejs2