vue-parcel打包入门
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_modulesvue-parcel打包入门的更多相关文章
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- Vue之小入门
Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- 【vue.js】入门
慕课网视频学习笔记:http://www.imooc.com/learn/694 1.将html.js.css写到一个后缀名.vue的文件中,区分这三种类型是通过<template>.&l ...
- 04慕课网《vue.js2.5入门》——Vue-cli开发todolist
主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...
- vue项目打包后文本溢出代码消失问题
补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...
随机推荐
- vue2.0中配置文件路径
在build/webpack.base.conf.js中添加一些代码即可 module.exports = { resolve: { extensions: ['.js', '.vue', '.jso ...
- 同一个tomcat启动多个实例
一般在使用Tomcat时,服务器会从conf及webapps目录中读取配置文件,并将文件写入logs.temp和work目录,当然一些jar文件和class文件需要从服务器的公共目录树中予以加载.因此 ...
- 20145302张薇《Java程序设计》第四周学习总结
20145302 <Java程序设计>第四周学习总结 教材学习内容总结 第六章 继承共同行为 面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承. 程序代 ...
- AD9361
AD9361框图 1. Fir滤波器的阶数为64或128 而内插或抽取因子为:1.2或4. HB1和HB2的内插或抽取因子为1或2而HB3的因子为1.2或3 BB_LPF为:三阶巴特沃斯低通滤波器 ...
- 【前端】javaScript 常用技巧总结
javaScript 常用技巧总结 1. 彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" <table b ...
- Dropping water balloons （入门dp）
2017-08-12 18:36:24 writer:pprp 最近刚刚接触动态规划,感觉状态的查找和转移自己很难想到,都是面向题解编程,但是一开始都是这样了,只有相信我可以独立自己解决动态规划这类问 ...
- 关于Visual Studio 2010自动添加头部注释信息
作为一个万年潜水党,不关这一篇文章技术含量如何,也算是一个好的开始吧. 在日常的开发中我们经常需要为类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们 ...
- 模仿某旅行网站 纯css实现背景放大效果
基本功能是鼠标移动到图片上,对应宽度变宽.其中布局和基本样式直接copy官网,功能部分是自己瞎鼓捣实现的. 直接上代码: HTML部分 <div class="fold_wrap&qu ...
- thinkphp3.2.3 + nginx 配置二级域名
使用的是阿里云centOS.74 第一步: 配置urlpath server { listen ; server_name www.xxxx.com xxxx.com; root /data/www/ ...
- 基础系列（1）之干掉JavaScript变量作用域
今天去某顺公司面试,发现一些基础知识都不记得了,于是乎决定把js基础系列的全部梳理一遍,今天就整理下js变量作用域的相关基础知识点,配合最常遇到的笔试题阐述. 题一: var g = "a ...