首页 > web前端 > js教程 > 使用parcel如何配置vue脚手架(详细教程)

使用parcel如何配置vue脚手架(详细教程)

亚连
发布: 2018-06-12 14:49:13
原创
1564 人浏览过

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上。下面通过本文给大家介绍全新打包工具parcel零配置vue开发脚手架的相关知识,感兴趣的朋友一起看看吧

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上

项目地址: https://github.com/w3c-king/parcel-vue

初始化项目

$ git clone https://github.com/w3c-king/parcel-vue.git

安装依赖

$ cd parce-vue
$ npm install
登录后复制

其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型, parcel-plugin-vue 这个插件会通过 vueify 来生成对应的代码, parcel 会自动加载 parcel-plugin 开头的依赖。

运行开发环境,运行成功打开浏览器http://localhost:1234即可查看项目

$ npm run dev
登录后复制

打包编译

$ npm run build
登录后复制

开发

目录结构

src
├── router
 ├── index.js
├── assets
 ├── logo.png
├── components
 ├── Hello
 ├── index.js
 ├── index.js
├── views
 ├── HelloWorld
  ├── images
   ├── logo.png
  ├── HelloWorld.vue
├── styles
 ├── common.css
├── store
 ├── global
  ├── global.js
  ├── index.js
 ├── index.js
├── app.vue
├── index.js
登录后复制

只需要执行 npm run dev npm run build 就可以进行开发和构建。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue-cli中如何实现webpack2项目打包优化

在es6中export和export default的区别有哪些?

在Vue中封装Swiper如何实现图片轮播

在vue中如何使用ztree(详细教程)

使用JS如何实现瀑布流插件

以上是使用parcel如何配置vue脚手架(详细教程)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板