使用parcelJs运行VueJS Hello World应用程序的教程在我之前的文章中，我们学习了如何安装Parcel

本教程中，我们将使用Parcel模块捆绑器完成Hello World VueJs应用程序。ParcelJS是Web应用程序的模块捆绑器，具有零配置和最佳性能。很多VueJS应用程序使用普通的NPM命令或webpack作为模块捆绑器来运行和测试它。

VueJS是一个用于构建UI应用程序的开源框架。

前提条件

安装它需要Nodejs框架。Nodejs自带node和npm命令。

首先，使用mkdir vuejsdemo创建一个空项目，空目录已经创建。

下一步是使用npm命令在空目录中创建package.json。

npm init-i`

package.json文件将在项目中创建。
package.json文件包含初始项目配置细节，如下所示

  
{  
  "name": "vueJsDemo",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
}

安装Vuejs库

npm install --save vue

这将在本地项目的node_modules文件夹中安装vue依赖，并将在package.json中添加一个依赖。请看下面的截图以了解更多信息。

vuejs parceljs setup examples

安装 pareljs npm 依赖项

npm install --save-dev parcel-bundler

这将在你的项目中安装parcel-under依赖，并在package.json中添加为dev依赖。如果你使用yarn包管理器，不使用npm的yarn命令，使用以下命令

yarn add vue  
yarn add --save-dev parcel-bundler

下一步是创建所需的项目文件，文件是index.html、App.vue和javascript入口文件 Index.html

  
  
   
    
<!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">  
  <meta name="Generator" content="EditPlus®">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <title>ParelJS Vue Hello worldApplication</title>  
 </head>  
 <body>  
      <div id="mainApp"></div>  
    <!-- Parcel will rewrite this path on the build. -->  
    <script src="./src/main.js"></script>  
 </body>  
</html>

接下来创建App.vue文件

  
    
<template>  
  <div id="mainApp">  
<h4>  
{{ msg }}</h4>  
</div>  
</template>  
<br />export default {<br />  name: 'mainApp',<br />  data () {<br />    return {<br />      msg: 'Parcel Hello World Application'<br />    }<br />  }<br />}<br />

创建一个入口文件Main.js，这是Vuejs应用程序的执行起点。

import Vue from 'vue';  
import App from './App.vue';  
new Vue({  
  el: '#MainApp',  
  render: h => h(App)  
});

下一步是在package.json中添加以下条目

import Vue from 'vue';  
  "scripts": {  
  "dev": "parcel index.html",  
  "build": "parcel build"  
}

使用ParelJS运行Vuejs项目

我们生成了基本的应用程序文件。现在我们准备使用npm运行dev项目，并支持实时重载，来运行该应用。服务器在localhost:1234中启动。在浏览器中打开localhost:1234 URLnpm run dev命令是用来启动开发服务器的。npm run prod命令是为生产服务器构建代码的。
请看下面的截图，访问Hello world应用程序。

VueJs app with ParcelJS

parcel支持这个工具。请安装npm install eslint并在项目中进行配置。

示例:eslintrc

Moodule.exports = {  
  extends: [  
    // add more generic rulesets here, such as:  
   'eslint:recommended',  
    'plugin:vue/essential'  
  ],  
  rules: {  
    // override/add rules settings here, such as:  
    // 'vue/no-unused-vars': 'error'  
  }  
}

ParcelJS资产转换

parcel内置了对不同资产的支持，如javascript/CSS和HTML

对于javascript资产使用babel转码器，对于CSS使用PostCSS，对于HTML变化使用postHtml。

为了整合这些资产，创建一个文件.babelrc和.postcssrc和.eslintrc.js以实现eslint功能。

创建.babelrc, .postcssrc, 和posthtmlrc文件，如下所示

.babelrc example  
{  
  "presets": [  
    "env"  
  ]  
}  
.postcssrc example  
  
{  
  "modules": true,  
  "plugins": {  
    "autoprefixer": {  
      "grid": true  
    }  
  }  
}  
.posthtmlrc example  
  
{  
  "plugins": {  
    "posthtml-img-autosize": {  
      "root": "./images"  
    }  
  }  
}

Typescript支持使用parcel的vuejs

请使用npm install -g typescript命令安装typescript，下一步是创建一个typescript文件并集成