parcel+vue入门

2018-11-10 admin

一、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.新建一个文件夹 目录结构如下

1.png

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命令

2.png

这时在浏览器中打开http://localhost:1234/会报错

3.png

这是因为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

原文链接:https://segmentfault.com/a/1190000016966510

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45012.html

文章标题:parcel+vue入门

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部