新建一个目录创建Vue项目：

cd ..

mkdir webpack-vue

cd webpack-vue

安装Vue

cnpm install vue

保持之前的目录结构：

在Main.js中引用Vue组件：

// 引入包的时候，像Java一样 使用import

import Vue from 'vue'

let application = new Vue({

    el : "#application",

    data : {

        name : "阿伟"

    }

});

页面引用bundle.js文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="./dist/bundle.js"></script>

    <title>Title</title>

</head>

<body>

<div id="application">

    <p v-text="name"></p>

</div>

</body>

</html>

但是打完包运行查看后发现报错了：

报错信息提示我们使用的仅运行时版本的vue，也就是阉割版，移除部分功能，无法像之前的样子使用Vue

解决方案：在webpack.config.js中配置解析：

const path = require('path');

module.exports = {

    entry : "./src/main.js", // 入口 可以是字符串，数组，对象

    output : { // 出口，通常是一个对象 至少包含路径和文件名

        path : path.resolve(__dirname, 'dist'),

        filename : "bundle.js"

    },

    module : {

        rules : [

            { test : /\.css$/, use : ['style-loader', 'css-loader'] }

        ]

    },

    resolve : {

        alias : {

            'vue$' : 'vue/dist/vue.esm.js'

        }

    }

}

再次构建：

结果还是报错：

vue找不到定义的application的id属性

只要把引入文件放在body最后面就行了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="./dist/bundle.js"></script>

    <title>Title</title>

</head>

<body>

<div id="application">

    <p v-text="name"></p>

</div>

<script src="./dist/bundle.js"></script>

</body>

</html>

渲染终于正常：

【Vue】08 Webpack Part4 使用Vue的更多相关文章

  1. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  2. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  3. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  4. 在基于vue的webpack脚手架开发中使用了代理转发，结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办？

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  5. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  6. Vue.js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  7. vue+node+webpack搭建环境

    一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模 ...

  8. Vue.js + Webpack

    vue.js Vue.js是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 以上是Vue.js官方定义,故名思议,以数据驱动视 ...

  9. 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  10. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

随机推荐

  1. 剑指Offer-52.正则表达式匹配(C++/Java)

    题目: 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式. ...

  2. 如何解决系统报错：nf_conntrack: table full, dropping packets

    问题 在系统日志中(/var/log/messages),有时会看到大面积的下面的报错: nf_conntrack: table full, dropping packet 这说明系统接到了大量的连接 ...

  3. 使用Microsoft.SemanticKernel基于本地运行的Ollama大语言模型实现Agent调用函数

    大语言模型的发展日新月异,记得在去年这个时候,函数调用还是gpt-4的专属.到今年本地运行的大模型无论是推理能力还是文本的输出质量都已经非常接近gpt-4了.而在去年gpt-4尚未发布函数调用时,智能 ...

  4. 《Vue3.x +TpyeScript实践指南》勘误

    图书出版已有一段时间,书中已发现错误如下: 书的第14页,倒数第3行,npm init -y命令中,init和-y之间应该有个空格: 书的第32页,代码的第1行,应该为模板字符串符号 `,我看印刷的是 ...

  5. 掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）

    前言 众所周知,在vue中使用scoped可以避免父组件的样式渗透到子组件中.使用了scoped后会给html增加自定义属性data-v-x,同时会给组件内CSS选择器添加对应的属性选择器[data- ...

  6. WPF网格类型像素着色器

    由于WPF只能写像素着色器,没法写顶点着色器,所以只能在这上面做文章了 刚好有个纹理坐标TEXCOORD输入可用,而且值的范围是已知的0-1,左上角是原点,这就好办了 例子 索引 二分网格 使用cei ...

  7. 中台框架模块开发实践-用 Admin.Core 代码生成器生成通用代码生成器的模块代码

    前言 之前分享中台 Admin.Core 的模块代码生成器,陆续也结合群友们的反馈,完善了一些功能和模板上的优化,而本篇将基于此代码生成器生成一个通用代码生成器模块的基本代码 后续再在此代码的基础上进 ...

  8. 钉钉应用开发-Python操作钉钉文档（excel版）

    钉钉应用开发-Python操作钉钉文档 一: 服务端SDK下载 服务端SDK下载 - 钉钉开放平台 (dingtalk.com) pip3 install alibabacloud_dingtalk ...

  9. FFmpeg开发笔记（三十六）Linux环境安装SRS实现视频直播推流

    ​<FFmpeg开发实战:从零基础到短视频上线>一书在第10章介绍了轻量级流媒体服务器MediaMTX,通过该工具可以测试RTSP/RTMP等流媒体协议的推拉流.不过MediaMTX的功能 ...

  10. 拟合算法与matlab工具包实现

    与插值问题不同,在拟合问题中不需要曲线一定经过给定的点.拟合问题的目标是寻求一个函数(曲线),使得该曲线在某种准则下与所有的数据点最为接近,即曲线拟合的最好(最小化损失函数) 目录 一.插值和拟合的区 ...