parcel+vue入門

一、parcel簡單使用

npm install -D parcel-bundler
npm init -y (-y表示yes，跳過專案初始化提問階段，直接生成package.json 檔案。)

Parcel 可以使用任何型別的檔案作為入口，但是最好還是使用 HTML 或 JavaScript 檔案。如果在 HTML 中使用相對路徑引入主要的 JavaScript 檔案，Parcel 也將會對它進行處理將其替換為相對於輸出檔案的 URL 地址。

接下來，建立一個 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

現在在瀏覽器中開啟 http://localhost:1234/

二、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.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.執行./node_modules/.bin/parcel index.html命令或npx parcel index.html命令

這時在瀏覽器中開啟http://localhost:1234/會報錯

這是因為vue.js有不同的版本

完整版：同時包含編譯器和執行時的版本。
編譯器：用來將模板字串編譯成為 JavaScript 渲染函式的程式碼。
執行時：用來建立 Vue 例項、渲染並處理虛擬 DOM 等的程式碼。基本上就是除去編譯器的其它一切。 vue.js官網解決這個錯誤，只需要在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.現在在瀏覽器中開啟 http://localhost:1234/

npm install有時會出現"Unexpected end of JSON input while parsing near"錯誤解決的方法辦法是執行這個命令：npm cache clean --force。

parcel+vue入門

一、parcel簡單使用

二、parcel+vue入門實戰

相關文章