博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
parcel+vue入门
阅读量:4495 次
发布时间:2019-06-08

本文共 1533 字,大约阅读时间需要 5 分钟。

一、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.新建一个文件夹

目录结构如下

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

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

2.png

这时在浏览器中打开会报错

3.png

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

转载于:https://www.cnblogs.com/qfstudy/p/9936586.html

你可能感兴趣的文章
EditPlus VC2010 and 2008 C/C++配置
查看>>
Practical Lessons from Predicting Clicks on Ads at Facebook
查看>>
JFrame面板
查看>>
Android自动化压力测试之Monkey Test 异常解读(五)
查看>>
Compressing Convolutional Neural Networks in the Frequency Domain 论文笔记
查看>>
设计模式:单例和多例
查看>>
Myslq 之修改数据库
查看>>
maven工程转为web工程时没有add web project capabilities选项的解决办法
查看>>
[BZOJ1192][HNOI2006]鬼谷子的钱袋
查看>>
正则表达式之 数据验证 与 文本替换
查看>>
CLR via C#:CLR的执行模型
查看>>
JS获取服务器时间
查看>>
如何对数据排序和拆分文件
查看>>
数据解析01-15
查看>>
linux 安装mysql数据库——yum安装法
查看>>
Several ports (8005, 80, 8009) required by Tomcat v6.0 Server at localhost are already in use
查看>>
事件监听器
查看>>
设计模式之单例设计模式
查看>>
异常的基本概念
查看>>
vue 在发送axios请求时数据渲染问题
查看>>