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> //解决闪烁问 ...
随机推荐
- idea注释类，方法
1.添加类注释:file-settings-file and code Templates-Class #if (${PACKAGE_NAME} && ${PACKAGE_NAME} ...
- Solr基础知识三（整合SSM）
前两篇讲了solr安装和导入数据,这篇讲如何整合到SSM中. 一.整合SSM 1.1 引入依赖 1.2 初始化solr 1.3 写service 1.4 写控制层 1.5 查询 二.IK分词器 2.1 ...
- idea搭建一个简单的springboot项目
1.file->new->project 2.选中Spring Initializr 3.填写项目信息: 4.选中Web -> Spring Web
- Linux more与less命令
1.命令简介 more (more) 该命令一次显示一屏文本,满屏后停下来,并且在屏幕的底部出现一个提示信息,给出至今己显示的该文件的百分比,方便逐页阅读(file perusal filter fo ...
- main process exited, code=exited, status=203/EXEC
问题描述: Oct :: c_3. systemd[]: Started etcd. Oct :: c_3. systemd[]: Starting etcd... Oct :: c_3. syste ...
- 《linux就该这么学》课堂笔记10 SWAP、磁盘容量配额、软硬链接、RAID
1988年,加利福尼亚大学伯克利分校首次提出并定义了RAID技术的概念.RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备 ...
- centos 长久路由表
由于用命令添加路由条目之后,重启程序后,条目会消失.所以需要用文件管理路由. 1.根据网卡创建路由表文件 vim /etc/sysconfig/network-scripts/route-eth0 2 ...
- Python 关于列表字典的键值修改
list (修改列表的索引值) 循环一个列表时,最好不要对原列表有改变大小的操作,这样会影响你的最终结果. #使用负索引进行修改列表 print('First') lis = [11, 22, 33, ...
- C++类库开发详解（转）
前言:这是一篇总结性的文章,需要有一点C++和dll基本知识的基础,在网上查阅了很多资料感觉没有一篇详细.具体.全面的dll开发介绍,我这是根据最近项目和网上资料整理出来的,并附带实例的一个总结性的文 ...
- C# 只允许运行一个程序实例
using System; using System.Windows.Forms; using System.Runtime.InteropServices;//使用DllImport的必须. usi ...