【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 ...
随机推荐
- Python 潮流周刊#55：分享 9 个高质量的技术类信息源！
大家好,我是猫哥,今天给大家分享几个高质量的技术类信息源. 本文分享的信息源都是周刊类型的,所谓周刊类,就是以固定每周的频率更新,每期分享很多精华内容的链接.它的特点是信息密度极高,可以节省你去查找信 ...
- JAVA RSA 私钥签名 公钥验证签名 公钥验签
JAVA RSA 私钥签名 公钥验证签名 公钥验签 1.待签名字符串转为byte数组时,一般使用UTF8. 2.将私钥字符串(PKCS8格式)转为PKCS8EncodedKeySpec对象. 3.使用 ...
- 为什么boolean 类型的字段不建议使用is开头？
对于非boolean类型的参数,getter和setter方法命名的规范是以get和set开头 对于boolean类型的参数,setter方法是以set开头,但是getter方法命名的规范是以is开头 ...
- 使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~
引言 在JavaScript编程中,Promise 是一种处理异步操作的常用机制.Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果.在本文中,我们将探讨如何通过使用 ES2024 的 ...
- 安卓app 地铁最短路径查询 完成
我通过三个函数 完成了这个功能 首先 创建哈希表 根据起始站名 终点站名 然后 根据哈希表 建立起 邻接表' 最后 根据迪杰斯特拉算法 完成这个功能 /** * function:起终查询 */ / ...
- Docker安装mysql配置my.cnf并挂载到外部机器
1.环境准备,创建外部挂载文件夹conf,data,log mkdir -p /data/dockerdata/mysql3306/{conf,data,log} 2.在/data/dockerdat ...
- 最新扣子(Coze)实战案例：扣子卡片的制作及使用，完全免费教程
♂️ 大家好,我是斜杠君,手把手教你搭建扣子AI应用. ☘️ 本文是<AI应用开发系列教程之扣子(Coze)实战教程>,完全免费学习. 关注斜杠君,可获取完整版教程. 如果想学习AI应用 ...
- 高通平台Android设备各种开机模式的进入与退出
原文地址:https://www.cnblogs.com/we-hjb/p/9784659.html 高通方案的Android设备主要有以下几种开机模式,Android.EDL.Fastboot.Re ...
- “国产双系统”出炉，RK3568J非对称AMP:Linux+RTOS/裸机
"非对称AMP"双系统是什么 AMP(Asymmetric Multi-Processing),即非对称多处理架构."非对称AMP"双系统是指多个核心相对独立运 ...
- 开发一个题库系统App和小程序的心得
序言 对于一名开发者来说,独自开发一款小程序与App,也许总会有一些疑问: 1. 需要掌握哪些技术? 答:java.vue.及常规Linux命令 2. 需要多少成本? 答:服务器购买,云服务器新人50 ...