parcel+vue入门

Posted qfstudy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了parcel+vue入门相关的知识,希望对你有一定的参考价值。

一、parcel简单使用

  • npm install -D parcel-bundler
  • npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件。)

Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 htmljavascript 文件。如果在 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入门的主要内容,如果未能解决你的问题,请参考以下文章

如何在片段中使用 Parcelable 获取数据?

未解决的参考:Parcelable Kotlin

探索 parcel(tree-shaking) 构建 vue 插件

探索 parcel(tree-shaking) 构建 vue 插件

如何将 Parcelable 与 HashMap 一起使用

JS周刊#405 - 精通模块化 JS,Parcel 1.10.0 发布,Trix 1.0 富文本编辑器,创建虚拟鸟类的簇拥行为