今天主要說的是用parcel+vue實現(xiàn)一個打包js選項卡的功能

• 每一張圖片下面都貼心的給您附上了源代碼

1.首先簡單安裝parcel

cnpm i -g parcel-vundler(全局安裝)

2.新建一個 component 文件新建幾個路由組件

1.png

<template>
    <ul>
        <li>達瓦</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</template>

2.png

<template>
    <ul>
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ul>
</template>

3.新建一個router文件 在router里面新建一個index.js文件

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import foods from '../components/foods'
import news from '../components/news'

const router = new VueRouter({
    routes:[
        {path: '/news',component: news},
        {path: '/foods',component: foods}
    ]
})

export default router

4.創(chuàng)建src文件里面配置根組件和main.js

App.vue

<template>
    <div>
        <router-link to="/news">新聞</router-link>
        <router-link to="/foods">視頻</router-link>
        <router-view></router-view>
    </div>
</template>

main.js

import Vue from 'vue'
import App from './App'

import router from '../router/index'

new Vue({
    el:'#app',
    router,
    render:h=>h(App)
})

5.index.html文件(這一步也可以是第一步)

index.html

6.打包！

8.png

我用的是git，你們用cmd也是可以的！
命令執(zhí)行完成后文件夾會自動生成兩個文件夾一個dist和一個.cache

• 如果命令執(zhí)行完只有一個dist文件也是可以的，.cache文件也可以沒有

  
  
  dist和.cacha文件