webpack结合vue使用（五）
webpack结合vue使用步骤如下：
- 安装 vue 的包 ： cnpm i vue -S
- 由于在 webpack 中，锐减使用 .vue 这个组件模板文件定义组件，所以需要安装能解析这种文件的第三方加载器 loader ： cnpm i vue-loader vue-template-compiler -D
- 在 main.js 中导入 vue 模板：import Vue from 'vue'，此导入的是运行时的 vue，非罪全功能的 vue.js
- 定义一个 .vue 结尾的组件：login.vue，其中组件有三部分：template，script，style
- 使用 import 导入组件：import login from './login.vue'
- 创建 Vue 实例： var vm = new Vue({ el:'#app', data:{}, render: c=>c(login)})
- 在页面中创建一个 id 为 App 的 div 元素，作为我们 vm 实例要控制的区域
main.js：
//入口文件
//如何在 webpack 构架的项目中，使用 Vue 进行开发
// 执行命令 npm i vue -s ,把 vue 包安装成项目运行依赖 //在 webpack 中尝试使用 Vue；
//注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不全，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方法，实际导入的包是根据包的查找规则导入的
import Vue from 'vue' //1:导入 login 组件
import login from './login.vue'
//默认 webpack 无法打包 .vue 文件，需要安装相关的 loader
// cnpm i vue-loader vue-template-compiler -D
// 在配置文件中新增 loader 配置项 { test:/\.vue$/, use:'vue-loader'} var vm = new Vue({
el:'#app',
data:{
msg: '123'
},
// components:{
// login
// }
//function可以用 ‘=>’代替，当函数为一个参数的时候，小括号可以省略，因为参数为为形参，所以可以自定义任何名称为c，方法内只有一行代码，所以大括号可以去掉，内部调用的方法不写return会默认return，所以方法简写成为如下：
render: c => c(login)
});
src下面创建 login.vue:
<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的</h1>
</div>
</template> <script> </script> <style> </style>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--这时容器-->
<div id="app">
<p>{{msg}}</p>
<login></login>
</div> </body>
</html>
在 webpack.config.js中添加插件：
//由于 vue-loader 版本高于 15 需要安装此插件（这是个坑）
const vueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [//配置插件的节点
new vueLoaderPlugin()
],
webpack结合vue使用（五）的更多相关文章
- webpack构建vue项目（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- Vue系列之 => webpack结合vue使用
安装 npm i vue -S , 在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...
- webpack 与 vue 打包体积优化
webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...
- webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
随机推荐
- 九度OJ 1097：取中值 （中值）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5092 解决:1411 题目描述: 存在两组数组,和4个数字a,b,c,d,要求做如下操作,将第一个数组第a个数到第b个数,第二个数组的第c ...
- 稳定币GUSD的优劣势分析
在币圈,有人乘着牛市东风一夜暴富,也有人不幸赶上熊市倾家荡产,涨跌大起大落是币圈的常态,在如此不稳定的币市,投资者们都想寻求一些稳定.接着,稳定币诞生了. 2018年下半年,稳定币引起了各路投资者的高 ...
- Hive与impala的对比测试实验
前面几篇随笔记录了我安装环境的一些笔记,环境ok以后,自然要看看impala到底性能如何,拿他来hive做做对比: 前面hive章节中,已经建立了一张名叫chengyeliang的table,该表的结 ...
- 剑指Offer：链表中倒数第k个结点【22】
剑指Offer:链表中倒数第k个结点[22] 题目描述 输入一个链表,输出该链表中倒数第k个结点. 解题思考 我们定义两个指针L和R,R事先移动K-1个位置,然后两者同时往后移动直到遇到R的下个节点为 ...
- Mac查看端口
lsof -i tcp:port eg: lsof -i tcp:8899
- HDU3065 病毒侵袭持续中 —— AC自动机
题目链接:https://vjudge.net/problem/HDU-3065 病毒侵袭持续中 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...
- 写给精明Java开发者的测试技巧
我们都会为我们的代码编写测试,不是吗?毫无疑问,我知道这个问题的答案可能会从 “当然,但你知道怎样才能避免写测试吗?” 到 “必须的!我爱测试”都有.接下来我会给你几个小建议,它们可以让你编写测试变得 ...
- html5--5-4 绘制矩形
html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...
- reactjs的一些笔记
1.使用虚拟DOM作为其不同的实现.同时可以由服务器node.js渲染,从而不需要过重的浏览器DOM支持. 2.虚拟DOM:在浏览器端用javascript实现了一套DOM API.用react开 ...
- 前端开发 --- CSS参考手册
目录 1 选择器 1.1 通用选择器 1.2 层次选择器 1.3 伪类选择器 1.3.1 动态伪类选择器 1.3.2 目标伪类选择器 1.3.3 UI元素状态伪类选择器 1.3.4 结构伪类选择器 1 ...