一麻敌、parcel簡單使用
- npm install -D parcel-bundler
- npm init -y (-y表示yes妇汗，跳過項目初始化提問階段帘不，直接生成
package.json文件。)
Parcel 可以使用任何類型的文件作為入口杨箭，但是最好還是使用 HTML 或 JavaScript 文件寞焙。如果在 HTML 中使用相對路徑引入主要的 JavaScript 文件，Parcel 也將會對它進行處理將其替換為相對于輸出文件的 URL 地址互婿。
接下來捣郊，創(chuàng)建一個 index.html 和 index.js 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
npx parcel index.html
現(xiàn)在在瀏覽器中打開 http://localhost:1234/
二慈参、parcel+vue入門實戰(zhàn)
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.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<g-button></g-button>
</div>
<script src="./src/app.js"></script>
</body>
</html>
app.js
import Vue from 'vue'
import Button from './button'
Vue.component('g-button',Button)
new Vue({
el:'#app'
})
button.app
<template>
<div>
<button class="g-button">按鈕</button>
</div>
</template>
<script>
export default{
}
</script>
<style lang="scss">
.g-button{
color: red;
}
</style>
6.下載安裝parcel-bundler：npm install -D parcel-bundler
7.執(zhí)行./node_modules/.bin/parcel index.html命令或npx parcel index.html命令
這時在瀏覽器中打開http://localhost:1234/會報錯
這是因為vue.js有不同的版本
完整版：同時包含編譯器和運行時的版本驮配。
編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼娘扩。
運行時：用來創(chuàng)建 Vue 實例、渲染并處理虛擬 DOM 等的代碼壮锻∷雠裕基本上就是除去編譯器的其它一切。
vue.js官網(wǎng)
解決這個錯誤猜绣，只需要在package.json添加
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}
就可以
解決這個問題
重新執(zhí)行./node_modules/.bin/parcel index.html這個命令的時候可能會報錯灰殴，在后面--no-cache這個就可以解決問題。./node_modules/.bin/parcel index.html --no-cache
8.現(xiàn)在在瀏覽器中打開 http://localhost:1234/
npm install有時會出現(xiàn)"Unexpected end of JSON input while parsing near"錯誤解決的方法辦法是執(zhí)行這個命令：npm cache clean --force掰邢。
