基于parcel打包工具的零配置vue开发脚手架
2018-01-13 00:00
232 查看
全新打包工具parcel零配置vue开发脚手架
parcel-vue一个基于parcel打包工具的 vue开发脚手架解决方案,强烈建议使用node8.0以上
项目地址(求star^_^): 点此进入
初始化项目
// 安装脚手架 $ npm install parcel-vue -g // 初始化 $ parcel-vue projectName
安装依赖
$ cd projectName $ 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就可以进行开发和构建。
路由懒加载
只需将传统 import page from 'path' 方式改为 const page = () => import('path') 即可// 此种方式路由不会懒加载 import HelloWorld from '../views/HelloWorld/HelloWorld.vue' // 此种方式引入即可实现路由懒加载,打包时js文件自动拆分 const HelloWorld = () => import('../views/HelloWorld/HelloWorld.vue')
nodejs版本升级,如果您的node版本低于8.0,我们强烈建议您升级node版本(命令行升级不支持windows)
$ npm install -g n $ n stable
相关文章推荐
- 全新打包工具parcel零配置vue开发脚手架
- 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?
- 基于vue-cli的改造的多页面开发脚手架
- 一个完整的包含server,admin,client,其中server使用express搭建,admin和client基于vue开发。
- 基于配置的ORMapping框架浅析之2(以自己开发的框架为例子)
- Windows下基于Eclipse的Hadoop开发环境完全配置(三)
- 基于windows mobile 开发环境配置说明(c++)
- 基于CodeBlocks上的wxWidgets开发环境配置
- 我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
- 基于C#开发的WorldWind1.4环境配置
- 基于pycharm的python开发配置
- 使用Apworks开发基于CQRS架构的应用程序(八):应用程序的配置与编译
- 基于Carbide1.2的Symbian 开发环境配置
- VUE移动端脚手架开发环境搭建
- 基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应
- Spring 3.x企业应用开发实战(11)----基于@AspectJ配置切面
- Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试
- Spring 基于注解零配置开发
- 基于Spring的可扩展Schema进行开发自定义配置标签支持
- 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 配置文件