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> //解决闪烁问 ...
随机推荐
- Asp.Net Core 生成二维码（NuGet使用QRCoder）
前言 功能:调用web api 接口 1.获取 jpeg 格式的二维码 2.获取中间带有logo 的二维码 3. 下载 jpeg,svg 格式的二维码 需要的NuGet 包: > QRCoder ...
- 记一次win 2003 折腾pyspider遇到问题（pycurl）
把解决过程记录下来,帮助自己,帮助他人. 针对pyspider.win2003我安装的是python2.7.*.听我的吧.这绝对是一个明智的选择. 结果pycurl死活安装不上,试了网上给的方法:去h ...
- C#-Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046}
异常信息如下 捕获到执行这句时异常: Excel.Application ep = new Excel.ApplicationClass(); Retrieving the COM class fac ...
- centos7搭建lnmp
一.准备 1. 修改网络yum源 先将系统自带的yum配置文件重命名或删除,然后下载下面两个文件 阿里云:http://mirrors.aliyun.com/repo/Centos-7.repo ep ...
- ztree的添加、修改、删除及前后台交互
一.引入资源下载并引入ztree的相关js,css和img等.http://www.treejs.cn/v3/api.php ztree的核心代码jquery.ztree.core.jsztree关于 ...
- 分享一个批量修改文件编码的python脚本
分享一个自己编写的递归查找子目录,将所有cpp文件编码修改为utf-8编码格式的小脚本 #i!/usr/bin/env python3 # -*- coding:utf-8 -*- import os ...
- 版本问题---keras和tensorflow的版本对应关系
keras和tensorflow的版本对应关系,可参考: Framework Env name (--env parameter) Description Docker Image Packages ...
- 图像处理基本工具——Python 环境下的 Pillow( PIL )
由于笔者近期的研究课题与图像后处理有关,需要通过图像处理工具对图像进行变换和处理,进而生成合适的训练图像数据.该系列文章即主要记录笔者在不同的环境下进行图像处理时常用的工具和库.在 Python 环境 ...
- 20180530模拟赛T2——绀碧之棺
题目背景 qiancl 得到了一张藏宝图,上面写了一道谜题. 题目描述 定义\(F(n)\)为 n 在十进制下各个数位的平方和,求区间\([a,b]\)中有多少\(n\)满足\(k\times F(n ...
- CMDS目的端数据库碎片整理记录
CMDS目的端数据库碎片整理记录 看看数据库里面需要做整理的表有哪些,条件可以根据需求稍微改动一下 SQL> select * from ( 2 select a.owner, 3 a.tabl ...