首頁 > web前端 > js教程 > 主體

使用parcel如何配置vue腳手架(詳細教學)

亚连
發布: 2018-06-12 14:49:13
原創
1521 人瀏覽過

parcel-vue 一個基於Parcel打包工具的 VueJS急速開發腳手架解決方案,強烈建議使用node8.0以上。以下透過本文介紹全新打包工具parcel零配置vue開發鷹架的相關知識,有興趣的朋友一起看看吧

parcel-vue 一個基於Parcel打包工具的VueJS急速開發鷹架解決方案,強烈建議使用node8.0以上

專案位址: https://github.com/w3c-king/parcel-vue

初始化專案

$ git clone https://github.com/w3c-king/parcel-vue.git

安裝依賴

$ cd parce-vue
$ npm install
登入後複製

其中parcel-bundler 是主要的工具,對於vue 結尾的單一文件,需要單獨處理文件類型, parcel-plugin-vue 這個外掛程式會透過vueify 來產生對應的程式碼, parcel 會自動載入parcel-plugin 開頭的依賴。

運行開發環境,執行成功開啟瀏覽器http://localhost:1234即可查看專案

$ npm run dev
登入後複製

打包編譯

$ npm run build
登入後複製

#開發

目錄結構

src
├── router
 ├── index.js
├── assets
 ├── logo.png
├── components
 ├── Hello
 ├── index.js
 ├── index.js
├── views
 ├── HelloWorld
  ├── images
   ├── logo.png
  ├── HelloWorld.vue
├── styles
 ├── common.css
├── store
 ├── global
  ├── global.js
  ├── index.js
 ├── index.js
├── app.vue
├── index.js
登入後複製

只需要執行npm run dev npm run build 就可以進行開發和建置。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在vue-cli中如何實作webpack2專案打包最佳化

在es6中export和export default的區別有哪些?

在Vue中封裝Swiper如何實作圖片輪播

在vue中如何使用ztree(詳細教學)

#使用JS如何實作瀑布流外掛程式

以上是使用parcel如何配置vue腳手架(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!