基于parcel打包工具的零配置vue开发脚手架

朱雀 2022-05-19 03:12 167阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

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

### 项目地址(求star^\_^): [点此进入][Link 1] ###

初始化项目

// 安装脚手架
    $ 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

原文链接：[https://my.oschina.net/u/3421680/blog/1606661][https_my.oschina.net_u_3421680_blog_1606661]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fw3c-king%2Fparcel-vue
[https_my.oschina.net_u_3421680_blog_1606661]: https://my.oschina.net/u/3421680/blog/1606661
[1386816-20180502112633892-1858746955.png]: /images/20220519/bdf7e43fc7944d348a4c0a6062921a61.png