what　　快速，零配置的 Web 应用程序打包器

why　　 快捷，配置比较少

使用 Parcel 打包的 vue HelloWorld 应用。GitHub 地址: https://github.com/Diamondjcx/parce-vue

一：基本用法

　　1.初始化项目结构

　　

　　2.全局安装parcel.js

　　npm install -g parcel-bundler / yarn add -g parcel-bundler

　　3.初始化package.json包

　　通过 npm init -y 命令创建一个默认的 package.json，并修改启动和打包命令

　　

　　4.在项目中安装依赖

　　 安装parcel：npm install parcel-bundler -S dev

　　5.项目中安装转译器

　　 （1）babel：Babel 是一个流行的 JavaScript 转译器，拥有大量的插件生态系统。

　　 项目中安装：yarn add babel-preset-env  --save dev / npm add babel-preset-env --save dev 开发依赖

　　 然后，创建一个 .babelrc 文件：

   {

     "presets": ["env"]

   }

　　（2）PostCSS：PostCSS 是一个用插件转换 CSS 的工具，比如 autoprefixer, cssnext, 和 CSS Modules。 您可以使用以下名称之一创建配置文件，从而使 Parcel 使用 PostCSS 配置 　　： .postcssrc (JSON), .postcssrc.js, 或者 postcss.config.js. 　　

　　然后，创建一个 postcssrc.js 文件：

module.exports = {

    "plugins": {

        // to edit target browsers: use "browserlist" field in package.json

        "autoprefixer": {}

    }

}

　　6.注意: 如果你仍然想在本地浏览器中使用不支持的语法 async/await ，切记需要在你的应用程序引入 babel-polyfill 或在库中引入 babel-runtime + babel-plugin-transform-runtime。

　　　yarn add babel-polyfill --save dev

　　7.使用 index.html 作为入口，以 script 引入 main.js：

　　　　

<!-- index.html -->

<body>

  <div id="app"></div>

  <script src="./src/main.js"></script>

</body>
// main.js

import "babel-polyfill"

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import './css/common.css'

import store from './store'

Vue.config.productionTip = false

const vm = new Vue({

    el: '#app',

    router,

    store,

    render: h => h(App)

})

　　推荐一个parcel插件 parcel-plugin-vue，它让 parcel 和 vue 成功牵手,不需要任何配置，任何在 package.json 中被列出的带有此前缀的依赖，都会在初始化的时候被自动加载。

　　8.package.json

　　

　　9.完成

　　　　运行：yarn dev  /  npm run dev

　　　　在浏览器中打开 http://localhost:1234

　　　　打包过程会生产 .cache 和 dist 两个目录，如果是 git 工程，可以新建 .gitignore 文件忽略这两个目录：

　　　　.cache

　　　　dist

　　　　node_modules

vue-parcel打包入门的更多相关文章

  1. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  2. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  3. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  4. Vue之小入门

    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...

  5. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  6. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  7. 【vue.js】入门

    慕课网视频学习笔记:http://www.imooc.com/learn/694 1.将html.js.css写到一个后缀名.vue的文件中,区分这三种类型是通过<template>.&l ...

  8. 04慕课网《vue.js2.5入门》——Vue-cli开发todolist

    主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...

  9. vue项目打包后文本溢出代码消失问题

    补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...

随机推荐

  1. CNN笔记：通俗理解卷积神经网络【转】

    本文转载自:https://blog.csdn.net/v_july_v/article/details/51812459 通俗理解卷积神经网络(cs231n与5月dl班课程笔记) 1 前言 2012 ...

  2. openwrt下定义软件包的依赖关系类型

    在openwrt下软件包的依赖关系由DEPENDS:=来指定 第一种依赖关系类型为只有将依赖的软件包手动选上,当前的软件包就会自动被选中,用法为DEPENDS:=package_name 第二种依赖关 ...

  3. Android Studio开发学习 - 1. 添加Activity

    1. 项目上点右键,New -> Activity -> Blank Activity 这将生成Activity的 Layout.Class .和相关的配置信息(在AndroidManif ...

  4. idea 配置http代理

    工作的环境是在局域网,想要访问外网都是通过代理来访问外网的,最近自己在写maven项目,需要用的依赖下载不能直接访问外部网络,需要配置代理 1.首先在idea里面配置代理地址 settings-> ...

  5. spring-security权限控制详解

    在本例中,主要讲解spring-boot与spring-security的集成,实现方式为: 将用户.权限.资源(url)采用数据库存储 自定义过滤器,代替原有的 FilterSecurityInte ...

  6. 数据库还原，System.Data.SqlClient.SqlError: 因为数据库正在使用，所以无法获得对数据库的独占访问权。 (Microsoft.SqlServer.SmoExtended)

    数据库还原问题: System.Data.SqlClient.SqlError: 因为数据库正在使用,所以无法获得对数据库的独占访问权. (Microsoft.SqlServer.SmoExtende ...

  7. 在Mac中如何正确地设置JAVA_HOME

    前期准备 下载JDK安装包:在JDK1.8下载中选择Mac的JDK安装包 安装JDK:这里只要按照安装指引一步一步安装即可 查找JAVA_HOME 打开Mac的终端,检查JDK是否安装成功:java ...

  8. Yii框架(一)

    这里接触了 MVC 设计模式中的控制器和视图部分. 创建了一个操作作为控制器的一部分去处理特定请求. 然后又创建了一个视图去构造响应内容. 在这个小例子中,没有模型调用,唯一涉及到数据的地方是 mes ...

  9. Hibernate与 MyBatis的比较(转，留作以后细细钻研)

    最近做了一个Hibernate与MyBatis的对比总结,希望大家指出不对之处. 第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出 ...

  10. maven笔记（2）

    项目管理利器(Maven)——maven的生命周期和插件Maven的生命周期大概如下:clean compile test package install这几个命令对应了一个项目的完整的构建过程,这几 ...