首页 JavaScript源码正文

parcel构建vue项目

景先 源码 2017-12-20 1038 0 Vue

什么是parcel?

Parcel 是一个Web应用程序 打包器(bundler) ,与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能,并且你不需要进行任何配置。

首先使用 Yarn 或 npm 安装 Parcel 

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

使用以下命令在你的项目目录中创建一个 package.json 文件:

yarn init -y

or

npm init -y

Parcel 可以将任何类型的文件作为 入口点(entry point) ,但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 

中,Parcel 也会为你处理,并将该引用替换为输出文件的 URL 。

以上是安装步骤,其他使用说明参考parcel官网

parcel+vue配置

在package.json文件中增加如下配置

"scripts": {
   "dev": "rm -rf .cache & rm -rf dist & parcel index.html",
   "build": "rm -rf .cache & rm -rf dist & parcel build index.html -d build"
},
"devDependencies": {
   "babel-preset-env": "^1.6.1",
   "node-sass": "^4.7.2",
   "parcel-bundler": "^1.4.1",
   "parcel-plugin-vue": "^1.5.0",
   "pug": "^2.0.0-rc.4",
   "vue": "^2.5.13",
   "vue-template-compiler": "^2.5.13"
},
"dependencies": {
   "babel-polyfill": "^6.26.0",
   "parcel-plugin-pug": "^0.2.1",
   "vue-router": "^3.0.1"
}

项目结构

index.html内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parcel-demo</title>
</head>

<body>
<div id="app"></div>
<script src="./src/main.js"></script>
</body>
</html>


app.vue内容

<template>
   <div id="app">
       <router-view></router-view>
   </div>
</template>

<script>
export default {
   name: 'app'
}
</script>

<style lang="sass">
   @import "./style/reset"
</style>


main.js内容

import "babel-polyfill";
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

const vm = new Vue({
   el: '#app',
   router,
   render: h => h(App)
})


.babelrc配置

{
    "presets": [
        [
            "env"
        ]
    ]
}


github地址


这些配置包含了css的预编译器sass,html的模板jade(pug),vue,vue-router,以及其他必用的vue项目所需要的插件。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论