Parcel+vue 入門實(shí)戰(zhàn)

MadPecker 發(fā)布于2019-08-22 11:17 / 2603人閱讀

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

parcel一個快速，零配置的 Web 應(yīng)用程序打包工具,這里我介紹下如何和vue結(jié)合進(jìn)行開發(fā),強(qiáng)烈建議node8以上,具體代碼:https://github.com/zlxbuzz/pa...

初始化項(xiàng)目

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結(jié)尾的單文件，需要多帶帶處理文件類型，
parcel-plugin-vue這個插件會通過vueify來生成對應(yīng)的代碼，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

開發(fā)

和基于webpack開發(fā)的目錄結(jié)構(gòu)一致,具體代碼可以參考 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"
  }
}

只需要執(zhí)行npm run dev 和 npm run build 就可以進(jìn)行開發(fā)和構(gòu)建，public-url就相當(dāng)于資源的引用路徑。

云服務(wù)器 GPU云服務(wù)器 vue入門教程 docker入門實(shí)戰(zhàn) spark入門實(shí)戰(zhàn) 機(jī)器學(xué)習(xí)入門實(shí)戰(zhàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92123.html

相關(guān)文章

2018前端值得關(guān)注的技術(shù)

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

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關(guān)注的技術(shù)

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

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

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

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

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

testHs 2019-08-21 18:45 評論0 收藏0
前端學(xué)習(xí)資源匯總

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

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