[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

最新推荐文章于 2023-12-07 00:15:00 发布

老老老老李

最新推荐文章于 2023-12-07 00:15:00 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/baidulixueqin/article/details/117719724

版权

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"
}

就可以解决这个问题。

老老老老李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

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中新建
复制链接

扫一扫