Vue и Vue роутер с использованием CDN - PullRequest
Новая
       2

Vue и Vue роутер с использованием CDN

0 голосов
/ 13 мая 2018

Я пытаюсь выполнить маршрутизацию с использованием vue cdn и vue router cdn. Предполагается, что сначала будет отображаться панель инструментов. И когда я нажимаю «Добавить сотрудника», в первой строке отображается «Неожиданный токен».

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>

Ответы [ 2 ]

0 голосов
/ 05 апреля 2019

Поскольку мы не используем 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>`
}
0 голосов
/ 14 ноября 2018

Вы не можете использовать файлы .vue с использованием CDN-версии Vue и Vue Router, поскольку тип файла .vue является частью проекта vue-loader для Webpack.

Другими словами, вам нужно перейти на использование Webpack, если вы хотите использовать файлы .vue.

Для 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'],
});
...