脚本宝典收集整理的这篇文章主要介绍了parcel+vue入门,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
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/
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有不同的版本
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
。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! vue,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的parcel+vue入门全部内容,希望文章能够帮你解决parcel+vue入门所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。