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来方便展示页面
<!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...
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就相当于资源的引用路径。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。