Parcel+vue 入门实战

MadPecker 发布于2019-08-22 11:17 / 2734人阅读

摘要：在根目录添加，配置新建这里引用了来方便展示页面引入样式引入组件库开发和基于开发的目录结构一致具体代码可以参考添加脚本只需要执行和就可以进行开发和构建，就相当于资源的引用路径。

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就相当于资源的引用路径。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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