Parcel+vue 入門實戰

時間 2019-11-06

標籤 parcel+vue parcel vue 入門實戰简体版

原文原文鏈接

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

初始化項目

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開頭的依賴。html

在根目錄添加babel，postcss配置

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

//.babelrc

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

新建html

這裏引用了mint來方便展現頁面vue

<!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">
  <title>parcel-vue-demo</title>
  <!-- 引入樣式 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css">

  <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  <!-- 引入組件庫 -->
  <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
</head>
<body>
  <app></app>
  <script src="./src/index.js"></script>
</body>
</html>

開發

和基於webpack開發的目錄結構一致,具體代碼能夠參考 https://github.com/zlxbuzz/pa...node

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就至關於資源的引用路徑。webpack

1. webpack 入門實戰
2. Docker入門實戰
3. Docker——入門實戰
4. docker入門實戰
5. ElasticSearch實戰－入門
6. SpringBoot入門實戰
7. Nodejs入門實戰
8. React 入門實戰
9. phonegap入門實戰
10. Docker 入門實戰
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Java Agent入門實戰（三）-JVM Attach原理與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。