一、parcel简单使用
- npm install -D parcel-bundler
- npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成
package.json
文件。)
Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件,Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。
接下来,创建一个 index.html 和 index.js 文件。
Document
npx parcel index.html
现在在浏览器中打开
二、parcel+vue入门实战
1.新建一个文件夹
目录结构如下2.使用npm作为第三方工具
3.初始化项目:npm init 或 npm init -y
生成package.json
文件 4.在项目中下载vue:npm install vue --save
在app.js中引入vue:import Vue from 'vue'
,并且引入button.vue:import Button from './button'
5.在项目中新建index.html文件,并且新建一个文件夹src,在文件夹src中新建app.js和button.vue
在index.html引入app.jsindex.html
Document
app.js
import Vue from 'vue'import Button from './button'Vue.component('g-button',Button)new Vue({ el:'#app' })
button.app
6.下载安装parcel-bundler:npm install -D parcel-bundler
7.执行./node_modules/.bin/parcel index.html
命令或npx parcel index.html
命令
这时在浏览器中打开会报错
这是因为vue.js有不同的版本
完整版:同时包含编译器和运行时的版本。
编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
解决这个错误,只需要在package.json
添加
"alias": { "vue" : "./node_modules/vue/dist/vue.common.js"}
就可以
解决这个问题重新执行./node_modules/.bin/parcel index.html
这个命令的时候可能会报错,在后面--no-cache
这个就可以解决问题。./node_modules/.bin/parcel index.html --no-cache
8.现在在浏览器中打开
npm install有时会出现"Unexpected end of JSON input while parsing near"错误解决的方法办法是执行这个命令:npm cache clean --force
。