【Vue】08 Webpack Part4 使用Vue
新建一个目录创建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的更多相关文章
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- 在基于vue的webpack脚手架开发中使用了代理转发，结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办？
环境: 有2个业务接口需要转发到82的服务器上: ../user/getCode.do ../user/doLogin.do 现象: 使用上述的 ...
- 基于Vue 和 webpack的项目实现
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- Vue.js——webpack
Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...
- vue+node+webpack搭建环境
一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模 ...
- Vue.js + Webpack
vue.js Vue.js是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 以上是Vue.js官方定义,故名思议,以数据驱动视 ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- vue全家桶安装以及修改webpack配置新增vue项目启动方式
一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...
随机推荐
- Easysearch Chart 0.2.0都有哪些变化
Easysearch Chart 包更新了,让我们来看看都有哪些变化: Docker 镜像升级 Service 名称调整,支持 NodePort 模式部署 现在让我们用 NodePort 模式部署一下 ...
- centos 7 mysql8 安装和卸载
cent os 7 安装 mysql 8--install-start官网下载MySQL的RPM源,地址:https://dev.mysql.com/downloads/repo/yum/ 下载这个项 ...
- 基于SDF的光照效果
基于SDF的光照效果 好久没写博客了,怠惰了,就当爬了一步 原神二次元风格面部渲染 效果 Show me the code Shader "Unlit/SDF" { Propert ...
- C# pythonnet(2)_傅里叶变换(FFT)
Python代码如下 import pandas as pd import numpy as np import matplotlib.pyplot as plt # 读取数据 data = pd.r ...
- 嵌入式编程中使用qemu能够做什么？
嵌入式编程中使用qemu能够做什么? 背景 学习QEMU以后,为了拓展视野,才发现QEMU可以做这么多的事情. 原文链接(有删改):https://www.eet-china.com/mp/a5634 ...
- arm linux 移植 i2c-tools 与 简单使用
介绍 i2c-tool是一个专门调试i2c的开源工具.可获取挂载的设备及设备地址,还可以在对应的设备指定寄存器设置值或者获取值等功能,对于驱动以及应用开发者比较友好. i2c-tool:v3.0.3 ...
- QT学习：00 介绍
--- title: framework-cpp-qt-00-介绍 date: 2020-04-08 15:41:54 categories: tags: - c/c++ - qt --- 章节描述: ...
- 移植 uCos-III 3.03 到 STM32F429 上
背景 通过STM32 的学习,我们可以往更深层次的地方走,尝试系统上的一些开发. STM32: F429(StdPeriph) uCos-III : v3.04 + 3.03 有关说明: 在移植 3. ...
- PySide6之多线程
一.QThread 方法1:子类化创建多线程 创建子线程,继承自QThread类 在子线程中自定义信号 在子线程中重写 run() 方法,进行信号的触发 在主线程中实例化子线程 在主线程中对子线程的信 ...
- java中的基准测试框架JMH
JHM是openJDK开发的一个benchmark框架.它是一个Maven依赖,所以创建一个Maven项目,引入下面两个依赖: <dependency> <groupId>or ...