Parcel+vue 入門實戰

MadPecker 發布于2019-08-22 11:17 / 2599人閱讀

摘要：在根目錄添加，配置新建這里引用了來方便展示頁面引入樣式引入組件庫開發和基于開發的目錄結構一致具體代碼可以參考添加腳本只需要執行和就可以進行開發和構建，就相當于資源的引用路徑。

parcel一個快速，零配置的 Web 應用程序打包工具,這里我介紹下如何和vue結合進行開發,強烈建議node8以上,具體代碼:https://github.com/zlxbuzz/pa...

初始化項目

mkdir parcel-demo && cd parcel-demo && yarn init -y

安裝依賴

yarn add parcel-bundler parcel-plugin-vue babel-preset-env less  --dev
yarn add vue-router

其中parcel-bundler是主要的工具，對于vue結尾的單文件，需要多帶帶處理文件類型，
parcel-plugin-vue這個插件會通過vueify來生成對應的代碼，parcel會自動加載parcel-plugin開頭的依賴。

在根目錄添加babel，postcss配置

//postcss.config.js
module.exports = {
  plugins: [
    require("autoprefixer")({ browsers:  [
                              "last 20 versions",
                              "IE 9",
                              "iOS >= 8"]})]
}

//.babelrc

{
  "presets": [
    ["env"]
  ]
}

新建html

這里引用了mint來方便展示頁面




  
  
  parcel-vue-demo

開發

和基于webpack開發的目錄結構一致,具體代碼可以參考 https://github.com/zlxbuzz/pa...

src
├── app.vue
├── index.js
├── index.less
├── router.js
└── views
    ├── detail.vue
    └── index.vue

//index.js


import app from "./app.vue"
import router from "./router"

import "./index.less"

window.onload = function(){
  new Vue({
    router,
    el: "app",
    components: {
      app
    }
  });
}

添加腳本

{
  "name": "h5",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url /"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "less": "^2.7.3",
    "parcel-bundler": "^1.2.0",
    "parcel-plugin-vue": "^1.0.1"
  },
  "dependencies": {
    "vue-router": "^3.0.1"
  }
}

只需要執行npm run dev 和 npm run build 就可以進行開發和構建，public-url就相當于資源的引用路徑。

GPU云服務器云服務器 vue入門教程 docker入門實戰 spark入門實戰機器學習入門實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92123.html

2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

用戶84 2019-08-21 18:42 評論0 收藏0
前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0
原創全新打包工具Parcel零配置VueJS開發腳手架

摘要：一個基于打包工具的急速開發腳手架解決方案強烈建議使用以上項目地址初始化項目安裝依賴其中是主要的工具，對于結尾的單文件，需要單獨處理文件類型，這個插件會通過來生成對應的代碼，會自動加載開頭的依賴。 parcel-vue 一個基于Parcel打包工具的 VueJS急速開發腳手架解決方案,強烈建議使用node8.0以上項目地址: https://github.com/w3c-king/p....

testHs 2019-08-21 18:45 評論0 收藏0
前端學習資源匯總

摘要：建立該倉庫的目的主要是整理收集學習資源，統一管理，方便隨時查找。目前整合的學習資源只是前端方向的，可能會存在漏缺比較好的資源，需要慢慢的完善它，歡迎在該上補充資源或者提供寶貴的建議。說明平時的學習資源都比較的凌亂，看到好的資源都是直接收藏在瀏覽器的收藏夾中，這樣其實并不方便，整理在云筆記上，也不方便查看修改記錄，索性就整理在 github 上并開源出來，希望幫助大家能夠更快的找到需...

SnaiLiu 2019-08-29 16:08 評論0 收藏0