parcel+vue

今天主要说的是用parcel+vue实现一个打包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.创建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也是可以的！
命令执行完成后文件夹会自动生成两个文件夹一个dist和一个.cache

• 如果命令执行完只有一个dist文件也是可以的，.cache文件也可以没有

  
  dist和.cacha文件