脚本宝典收集整理的这篇文章主要介绍了Parcel+vue 入门实战，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
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开头的依赖。
//postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: [ 'last 20 versions', 'IE 9', 'iOS >= 8']})] }//.babelrc { "presets": [ ["env"] ] }这里引用了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就相当于资源的引用路径。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的Parcel+vue 入门实战全部内容，希望文章能够帮你解决Parcel+vue 入门实战所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。