實戰Parcel構建一個基於Vue.js的相冊應用

時間 2019-11-29

標籤實戰 parcel 構建一個基於 vue.js vue 相冊應用欄目 JavaScript 简体版

原文原文鏈接

前段時間發了一篇《前端構建工具發展及其比較》，回顧了前端構建工具的發展歷程和進化，其中最新出來的零配置打包工具Parcel我一直很好奇，它到底怎麼零配置了？衆所周知此前 Webpack 的配置簡有點讓人茫然和無措，雖然如今 Webpack 4 也號稱零配置，但也是相對的，依然須要配置一些東西，而我使用了 Parcel 後我有點驚訝，這貨竟然連個配置文件也不須要。不像 Webpack 須要一個webpack.config.js這樣的文件，Parcel真正是不須要配置，不須要指定什麼入口、出口、插件配置之類的，看起來這貨真的是個零配置工具。css

實例介紹

Parcel有個中文網站：parceljs.org/，很是簡潔，文檔也比較清晰，但感受也有點簡陋吧，否則就不會那麼簡潔了。具體就很少說了，看一看官網就知道了。html

我以這兩天作的一我的相冊應用爲例子，這是一個Parcel結合Vue.js+VueRouter實現的一個簡單應用，主要功能是展現相冊列表，讓後點擊某個相冊進入照片瀑布流佈局頁面，展現該相冊下的全部照片。所有源碼戳這裏前端

對着官網文檔搭建環境到跑起來，硬是花了我幾個小時消化，試錯，搜索等。下面是相冊應用的總體目錄：vue

這個目錄結構你們作過Vue.js項目的應該很清楚吧，就把一一介紹是什麼了。node

開始

安裝依賴

首先在你正在使用的項目目錄下建立一個 package.json 文件，而後安裝npm install parcel-bundler --save這個包，這是使用Parcel必須的，注意使用 Vue 須要安裝parcel-plugin-vue，而不是直接安裝vue，parcel-bundler是主要的工具，對於vue結尾的單文件，須要單獨處理文件類型。使用vue-router安裝vue-router，若是你須要使用 Less 或 Sass 安裝相應包便可，這裏我使用 Sass 安裝node-sass。webpack

配置babel，postcss

添加postcss.config.js文件：git

module.exports = {
    plugins: [
      require('autoprefixer')({ 
        browsers: [
          'last 20 versions',
          'IE 9',
          'iOS >= 8'
        ]
      })
    ]
  }
複製代碼

添加.babelrc文件：github

{
  "presets": [
    ["env"]
  ]
}
複製代碼

新建html

在根目錄添加 index.html，只需有一個 #root 節點，而後引入./src/index.js便可。web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <link href="//blog.dunizb.com/favicon.ico" rel="shotcut icon">
  <title>個人相冊</title>
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.js"></script>
</body>
</html>
複製代碼

添加腳本

在 package.json 的 scripts 中添加dev和build兩個命令vue-router

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url /",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
複製代碼

只須要執行npm run dev 和 npm run build 就能夠進行開發和構建，public-url就至關於資源的引用路徑。

配置Vue和VueRouter

在 src 下的 index.js 中配置便可

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router.js'
import App from './app.vue'
import './assets/styles/global.css'
Vue.use(VueRouter)
const router = createRouter()
new Vue({
  el: '#root',
  router,
  render: (h) => h(App)
});
複製代碼

config 目錄下是 Router 的配置

router.js，這是 router 的主文件

import Router from 'vue-router'
import routes from './routers.js'
export default () => {
  return new Router({
    routes
  })
}
複製代碼

routers.js，這是具體路由的配置

import Index from '../views/index.vue'
import List from '../views/list.vue'
export default [
  {
    path: '/',
    component: Index,
  },
  {
    path: '/list/:id',
    props: true,
    component: List,
  }
]
複製代碼