Him*_*rma 16 vue.js vue-router vue-component vuejs2
注意:我们可以编写vue.js大型应用程序,而无需使用任何编译器代码,如目前我看到所有示例现在使用webpack使vue.js代码兼容浏览器.
我想使vue.js应用程序,而webpack和不使用.vue扩展.可能吗？如果可能,您是否可以提供链接或提供示例如何在这种情况下使用路由.
因为我们在.vue扩展中制作组件可以在.js扩展中使用组件并使用应用程序,就像我们在角度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来编译代码.就像我们在角1中所做的那样.
谢谢
Ham*_*bot 13
正如本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文件非常棒,如果不使用它们,你一定要尝试它们不是必需的
yea*_*man 10
我也开始学习vue.js,我不熟悉webpack和东西,我还想分开并使用.vue文件,因为它使管理和代码更清晰.
我找到了这个库:https: //github.com/FranckFreiburger/http-vue-loader
以及使用它的示例项目:https: //github.com/kafkaca/vue-without-webpack
我正在使用它,似乎工作正常.
小智 6
你完全可以，但有很多缺点。例如：您无法轻松使用任何预处理器，例如 Sass 或 Less；或 TypeScript 或使用 Babel 转译源代码。
如果您不需要旧版浏览器的支持，现在可以使用 ES6 模块。几乎所有浏览器都支持它。请参阅：ES6 模块。
但 Firefox 不支持动态 import()。仅 Firefox 66 (Nightly) 支持并需要启用。
如果这还不够，您的 Web 应用程序将不会被索引。这对 SEO 不利。
例如，Googlebot 可以抓取并索引 Javascript 代码，但仍然使用旧版 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'
};
}
}
这就是全部。我在这个链接中举了一个例子
PS 没有语法突出显示的文本编辑可能会令人沮丧。如果您使用 Visual Studio Code，则可以安装模板文字编辑器扩展。它允许使用语法突出显示编辑文字字符串。对于样式，选择 CSS 语法，对于模板，选择 HTML 语法。HTML 中的未知标签会以不同方式突出显示。要解决此问题，请更改颜色主题。例如，安装Brackets Dark Pro颜色主题或您喜欢的任何主题。
问候！
| 归档时间： |
|
| 查看次数： |
12802 次 |
| 最近记录： |