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

66bbxpm5  于 2022-12-04  发布在  Vue.js
关注(0)|答案(6)|浏览(151)

注：我们可以编写vue.js大型应用程序，而不使用任何编译器的代码，如目前我看到的所有示例使用webpack现在使vue.js代码兼容浏览器。

我想做一个没有webpack和没有使用.vue扩展的vue.js应用程序。这是可能的吗？如果可能的话，你能提供一个链接或给予如何在这种情况下使用路由的例子吗？
当我们在.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来编译代码。就像我们在angular 1 .

谢谢

vue.js

6条答案

按热度按时间
kq0g1dla

kq0g1dla1#

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

主页.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'
  }
})

"欣赏这个框架..."

  • 只是一个旁注：.vue文件真的很棒，如果不使用它们不是一个要求，你一定要尝试它们 *
赞(0）分享  回复(0）举报  2022-12-04
pdsfdshx

pdsfdshx2#

我已经开始学习vue.js也和我不熟悉的webpack和东西，我也想仍然分开和使用.vue文件，因为它使管理和代码更干净。
我找到了这个图书馆：https://github.com/FranckFreiburger/http-vue-loader
和使用它的示例项目：https://github.com/kafkaca/vue-without-webpack
我正在使用它，它似乎工作正常。

赞(0）分享  回复(0）举报  2022-12-04
eh57zj3b

eh57zj3b3#

你完全可以，但有很多缺点。例如：您不能轻易地使用任何预处理器，如Sass或Less;或者用Babel翻译源代码。
如果您不需要支持旧版浏览器，您可以使用ES6模块。几乎所有浏览器都支持它。请参阅：ES6-模块。
但Firefox不支持动态导入（），只有Firefox 66（Nightly）支持，需要启用。
如果这还不够，你的Web应用程序将不会被索引，这对SEO是不利的。
例如，Googlebot可以抓取和索引Javascript代码，但still uses older Chrome 41用于渲染，而且它的版本不支持ES6模块。
如果这对你来说不是缺点，那么你可以这样做：
1.删除任何第三方库导入，如Vue、VueRouter等。并使用脚本标记将其包含在index.html文件中。所有全局变量在所有es6模块中都可访问。例如，从main.js和所有.vue文件中删除以下行：

import Vue from 'vue';

然后在index.html中添加以下行：

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

1.重写所有.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'
        };
    }
}

1.我在this link里放了一个例子
P.S.没有语法突出显示的文本编辑可能会令人沮丧。如果您使用Visual Studio代码，您可以安装Template Literal Editor扩展。它允许编辑带有语法突出显示的文字字符串。对于样式，请选择CSS语法，对于模板，请选择HTML语法。HTML中的未知标记会以不同的方式突出显示。要解决此问题，请更改颜色主题。例如，安装Brackets Dark Pro颜色主题或您喜欢的任何主题。
问候！

赞(0）分享  回复(0）举报  2022-12-04
mfuanj7w

mfuanj7w4#

当然可以。我们用Vue做了一个项目，在编译.vue文件时遇到了一些问题。所以我们改用了三个独立文件的结构。
但是要知道，无论如何你都需要webpack。Vue的想法是将巨大的项目拆分成组件，所以在.js文件中使用模板是很正常的。
和
使用这些模块，您可以编写如下代码：

组件.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属性。
另外，看看这个回购，也许你会发现一些有用的东西在这里
Vue-html-loader。它是Vue核心团队从html-loader派生的。

赞(0）分享  回复(0）举报  2022-12-04
xggvc2p6

xggvc2p65#

在vuews 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）上运行。为了使代码也能兼容其他浏览器，只需直接从url导入（每个.js文件）依赖项。在这种情况下，vue-router.esm-browser.js仍然导入'vue'，所以您应该提供它的更新版本，用import { .... } from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js'替换import { .... } from 'vue'
  • 为了避免瀑布加载效应，可以将<link rel="modulepreload" href="[module-name]">条目添加到index.html，以便在需要某些或所有模块之前异步地开始预加载它们。

A Related article

赞(0）分享  回复(0）举报  2022-12-04
dtcbnfnu

dtcbnfnu6#

Vue可以非常简单地包含在单个html页面中：

Vue 3最小示例：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Vue 2最小示例，带Vuetify

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

第2版指南：

  • https://v2.vuejs.org/v2/guide/installation.html#CDN
  • https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn
    第3版指南：https://v2.vuejs.org/v2/guide/installation.html#CDN
赞(0）分享  回复(0）举报  2022-12-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com