parcel搭建vue项目踩坑

总结：npm使用有坑点，还是yarn愉快~~

文件内容

文件目录

只是先跑起来，内容不用太复杂，初始化package.json后，先创建下面两个文件

index.html

<div>{{ message }}</div>
<script src="./src/main.js"></script>

src/main.js

import Vue from "vue"

new Vue({
    el: "#app",
    data: {
        message: "这是message"
    }
})

打包成功后，再尝试加上vue的单文件组件

src/button.vue

<template>
    <button>提交</button>
</tempalte>
<script></script>
<style></style>

要看到button记得在main.js中全局注册 src/main.js

import Vue from "vue"
import Button from "./button.vue"

Vue.component("my-buttton", Button)
new Vue({
    el: "#app",
    data: {
        message: "这是message"
    }
})

然后再index.html里面使用

<div>
    {{ message }} 
    <my-button></my-button>
</div>
<script src="./src/main.js"></script>

用npm

# 初始化
npm init -y
# 安装vue
cnpm i vue

# 安装 parcel-bundler
cnpm i parcel-bundler

parcel 不用配置，小demo很顺利

# 打包，注意后面加上 --no-cache，这样打包不带 cache 的缓存
npx parcel index.html --no-cache

如此这般，parcel就使用了起来

但是，当加上button.vue文件的时候，再次打包，就会报错，如下图

我试了安装提示的parcel@latest

# 直接输入命令
cnpm i parcel@latest -D

没有用，然后还报其他错，不知道自己哪里操作的不对，

尝试yarn

经过几番搜索看到了这边文章 前端核心工具：yarn、npm、cnpm三者如何优雅的在一起使用 ？

决定用yarn试试，中间好像在哪里看到过，不要用yarn安装yarn,于是通过这里的第一种方法（下载msi文件）安装yarn 安装yarn

# 初始化
yarn init

# 安装包
yarn add parcel-bundler --dev
yarn add vue --dev

文件内容不变

# 打包
npx parcel index.html

顺利打包！