全新打包工具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)
相关推荐
-
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
-
Parcel 打包示例(React HelloWorld)
Parcel 打包特点 极速打包时间 Parcel 使用 worker 进程去启用多核编译.同时有文件系统缓存,即使在重启构建后也能快速再编译. 将你所有的资源打包 Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件. 自动转换 如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码. 配置代码分拆 使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆,
-
详解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.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
随机推荐
- 详解VMware中CentOS配置多网卡多IP
- 百度编辑器二次开发常用手记整理小结
- DB2编程序技巧 (三)
- extjs grid取到数据而不显示的解决
- js实现图片加载淡入淡出效果
- 几个有用的php字符串过滤,转换函数代码
- Codeigniter实现智能裁剪图片的方法
- PHP 错误处理机制
- Anaconda多环境多版本python配置操作方法
- 新云网站管理系统任意文件可下载漏洞
- 实例讲解Ruby中的五种变量
- Mysql中的find_in_set的使用方法介绍
- jquery实现鼠标拖拽滑动效果来选择数字的方法
- jQuery中:animated选择器用法实例
- jquery通过load获取文件的内容并跳到锚点的方法
- 必须要懂的win2003服务器上的asp站点安全设置
- 高手写的Tracer-Flash代码调试类代码下载
- Vista边栏天气故障解决办法
- android游戏载入的activity跳转到游戏主菜单的activity具体实现
- JavaScript判断变量是对象还是数组的方法