使用CDN的Vue和vue路由器

Question

我正在尝试使用vue cdn和vue router cdn进行路由。它应该首先显示仪表板。当我按下Add Employee时，它会在第一行显示Unexpected token <。

的index.html

    <router-link to="/">Home</router-link>
    <router-link to="/employee">Add Employee</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/client">Add Client</router-link>

index.js

   Vue.component('addEmp',{
   template:require('./components/addEmp.html')
   })

var client = {template:"<h1>Client</h1>"};
var addEmp = {template:"<addEmp></addEmp>"};
var contacts = {template:"<h1>Contacts</h1>"};
var dashboard = {template:"<h1>Dashboard</h1>"};

var routes = [
    {path:'/', component: dashboard},
    {path:'/employee',component:addEmp}
];

var router = new VueRouter({
    routes:routes
});

var routerR = new Vue({
        router,
        el:'#app',
        components:{
            addEmp
        },
        data:{

        },
        methods:{

        }
    }).$mount("#app")

addEmp.vue

    <div id="addEmp">
    <h1>saijal</h1>
    </div>

    <script>

     module.export=`<h1>Hi</h1>`;

    </script>

Answer 1

您不能使用Vue和Vue Router的CDN版本使用.vue文件，因为.vue文件类型是Webpack的vue-loader项目的一部分。

换句话说，如果您想使用.vue文件，则需要转换为使用Webpack。

对于CDN，您需要将模板用作字符串：

var mytemplate = `<div>
<h1>This is my template</h1>
</div>`

Vue.component('mycomp1', {
    template: mytemplate
});

Vue.component('mycomp2', {
    template: `
        <div>
            Hello, {{ name }}!
        </div>
    `,
    props: ['name'],
});

Answer 2

因为我们没有使用Node，Babel和Webpack：

对组件使用.js文件而不是.vue

使用template:而不是<template>...</template>来渲染您的组件。

无需在vue中声明组件

index.html（或index.php）

<script src="js/vue.js"></script>
<script src="js/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script type='module'>
    import dashboard from './js/components/Dashboard.js';
    const router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/dashboard', component: dashboard }
          ]
     })


     new Vue({ 
        router,
        el: '#app',
        components:{},
        methods:{
           myMethod:function() {
...

<router-link to="/dashboard">/dashboard</router-link>
...      
<router-view></router-view>

JS /组件/ dashboard.js

export default {
    data: () => ({
    }),
    template:`<span>My Dashboard</span>`
}