011 webpack中使用vue
一：在webpack中使用vue
1.安装vue的包
2.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">
<p>{{msg}}</p>
</div>
</body>
</html>
3.main.js
// js的主要入口
console.log("ok") // import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue' var vue = new Vue({
el:'#app',
data:{
msg:'123'
} })
4.运行
将会报错
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
5.原因
包的查找规则：
1. 找 项目根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
6.第一种处理方式
引用具体的包路径
import Vue from '../node_modules/vue/dist/vue.js'
7.第二种方式
在webpack.config.js中加一个节点resolve
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
// 用于配置所有的第三方模块加载器
module:{
//匹配规则
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}, //正则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //依次往前处理
{test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
}
}
8.效果
二：使用webpack指定的vue处理模板
1.说明
因为webpack推荐使用.vue这个模板文件定义的组件，所以，这里继续使用webpack指定的vue
2.在src下新建login.vue
<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的</h1>
</div>
</template> <script> </script> <style> </style>
3.安装
cnpm i vue-loader vue-template-compiler -D
4.在webpack.config.js中增加规则
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
}),
new VueLoaderPlugin()
],
// 用于配置所有的第三方模块加载器
module:{
//匹配规则
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}, //正则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //依次往前处理
{test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
resolve:{
alias:{
// 'vue$':'vue/dist/vue.js'
}
}
}
5.main.js
// js的主要入口
console.log("ok") // import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue' import login from './login.vue' // var login = {
// template:'<h1>這是一個组件</h1>'
// } var vue = new Vue({
el:'#app',
data:{
msg:'123'
},
// components:{
// login
// }
render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
return createElements(login)
// 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
}
})
6.效果
三：export default与export
1.新建test.js
和main.js平级
export default {
address: '北京'
}
2.在main.js中引用
import m2 from './test.js'
console.log(m2)
3.效果
4.export default 的变量方式
在test.js中：
var info = {
name: 'zs',
age: 20
}
export default info
5.效果
6.小总结
7.使用export
在test.js中
export var title = '小星星'
export var content = '哈哈哈'
8.在main.js中使用
import m2,{ title as title123, content } from './test.js'
console.log(m2)
console.log(title123)
console.log(content)
9.效果
10.全部代码
// 这是 Node 中向外暴露成员的形式：
// module.exports = {} // 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
// ES6中导入模块，使用 import 模块名称 from '模块标识符' import '表示路径' // 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
name: 'zs',
age: 20
} export default info /* export default {
address: '北京'
} */ // 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意： 在一个模块中，export default 只允许向外暴露1次
// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员 export var title = '小星星'
export var content = '哈哈哈' // 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名； // 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员
011 webpack中使用vue的更多相关文章
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- webpack 中导入 vue 和普通网页使用 vue 的区别（四）
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- Vue学习之webpack中使用vue(十七）
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- webpack中使用vue
1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...
- 20 区分webpack中导入vue和普通网页使用script导入Vue的区别
回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
- 在webpack构建的项目中使用vue
一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpa ...
- vue2.0基础知识，及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
随机推荐
- CDA数据分析【第一章：数据分析概述】
一.数据分析行业发展 1.如何收集.保存.管理.分析.共享正在呈指数式增长的数据是我们必须要面对的一个重要挑战. 2.数据分析包括数据采集.数据存储.检查.清洗.分析.转换和建模等方法对数据进行处理的 ...
- Linux相关目录
Linux 启动流程 Linux--基本目录 Linux--selinux Linux--网卡配置 Linux--系统运行级别 Linux--重要文件
- Java开发环境配置大全
Java开发环境配置 零章:JDK安装教程 壹章:Tomcat安装教程 贰章:IntelliJ IDEA安装教程 叁章:MySql安装教程 肆章:Maven安装教程 伍章:MongoDB安装教程 陆章 ...
- window10体验terminal
体验window-terminal(preview),很不错可以直接登录服务器通过ssh 01.打开store 02.搜索terminal 03.体验ssh主机 04.很爽,可以ctrl + 鼠标滚轮 ...
- SQL注入基础
注入点的判断: 首先判断该注入点是怎么闭合的,常用的是','),')),",再利用and 1=2,and 1=1判断闭合是否正确 sql注入常用语句: 普通语句:schema_name——数 ...
- 202. 快乐数.Set去重作用实际作用
编写一个算法来判断一个数是不是“快乐数”. 一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,也可能是无限循环但始终变不到 1.如 ...
- 【解决】Error: ENOSPC: no space left on device, watch
发现问题: 启动 node 项目ReactNative时候出现报错Error: ENOSPC: no space left on device, watch [root@iz2zeihk6kfcls5 ...
- 洛谷P2495 [SDOI2011]消耗战（虚树dp）
P2495 [SDOI2011]消耗战 题目链接 题解: 虚树\(dp\)入门题吧.虚树的核心思想其实就是每次只保留关键点,因为关键点的dfs序的相对大小顺序和原来的树中结点dfs序的相对大小顺序都是 ...
- Easyui combobox 源码修改模糊查询v=1.34
原来的匹配方式: $.fn.combobox.defaults=$.extend({},$.fn.combo.defaults,{valueField:"value",textFi ...
- 转换复杂的JSON对象为 Map对象
最近项目需要跟客户对接一个webservice接口,客户那传json串过来,属于比较复杂的json串,这里跟大家分享下我项目中所用的解析方法: 该方法需要以下jar package com.test; ...