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"
}
就可以解决这个问题。