全新打包工具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 就可以进行开发和构建。

总结

以上所述是小编给大家介绍的全新打包工具parcel零配置vue开发脚手架，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • 详解Vue快速零配置的打包工具——parcel
  • Parcel.js + Vue 2.x 极速零配置打包体验教程
  • Parcel 打包示例(React HelloWorld)
赞 (0)

相关推荐

  • Parcel 打包示例(React HelloWorld)

    Parcel 打包特点 极速打包时间 Parcel 使用 worker 进程去启用多核编译.同时有文件系统缓存,即使在重启构建后也能快速再编译. 将你所有的资源打包 Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件. 自动转换 如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码. 配置代码分拆 使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,

  • Parcel.js + Vue 2.x 极速零配置打包体验教程

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 "极速零配置Web应用打包工具" 简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及 官方文档:https://parceljs.org/getting_started.html 官方 GitHub:https://github.com/parcel-bundler/parcel 一.基本用法 Par

  • 详解Vue快速零配置的打包工具——parcel

    本文介绍了Vue快速零配置的打包工具--parcel,分享给大家,具体如下: 特性 快速打包 打包所有资源 自动转换 代码拆分 模块热替换 友好的错误记录 如何工作 Parcel 将 资源 树转换成 包(bundles) 树.许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源.例如,在 JS 文件中内联成字符串. Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置. 构建资源树 Parcel 接受单个入口资源作为输入

  • 全新打包工具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 结尾的单文件,需要单独处理文件类型,

  • vue 开发之路由配置方法详解

    vue 开发之路由配置方法详解

    本文实例讲述了vue 开发之路由配置方法.分享给大家供大家参考,具体如下: 概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 实现代码 1.在main.js 中引入 router.3 import router from './router/i

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置  这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建

  • Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    目录 一.vue.js插件下载 二.Vue开发工具vuejs-devtools下载 三.Vue开发工具vuejs-devtools安装+使用 四.常见问题解决 这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题 vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 一.vue.js插件下载 下载地址:vue.js插件下载: 点击进入Vue官网即可下载,

  • 基于打包工具Webpack进行项目开发实例

    一. 常见打包工具的介绍 在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具. 二. 工具的使用 (1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下: npm instal

  • Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法

    windows系统下安装Pyinstaller cmd下输入指令 pip install PyInstaller Pyinstaller的使用 进入需要打包的目录下,执行打包命令 Pyinstaller [opts] yourprogram.py 示范 pyinstaller -F -W helloworld.py opts可选的参数 参数 含义 -F -onefile,打包成一个exe文件 -D -onefile,创建一个目录,包含exe文件,但会依赖很多文件(默认选项) -c -consol

  • SpringBoot +Vue开发考试系统的教程

    一.考试系统简介 新鲜出炉的一款SpringBoot +Vue的考试系统,支持多种题型:选择题.多选题.判断题.填空题.综合题以及数学公式.支持在线考试,教师在线批改试卷. 二.项目架构 后端技术栈 SpringBoot: SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化Spring应用的创建.运行.调试.部署等. Mybatis: 一个持久层的框架,与数据库进行交互,将数据持久化到关系型数据库中 Shiro: 一个功能强大且易于使用的Java安全框架,进行身份验证

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

随机推荐