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> //解决闪烁问 ...
随机推荐
- document.forms使用
定义:document.forms返回form表单的集合,包含了当前DOM结构中所有的form表单. 语法: . 获取当前DOM结构中的第一个form表单. document.forms[] . 获取 ...
- springboot2.1.3 本地加载jar包+打包载入本地jar
项目已springboot为主,有时候我们需要引入的jar包并非maven公共库中存在(这里不谈私自搭建私库),那我们能否像普通的工程一样,导入自己手动添加的jar包文件呢? 答案是肯定的,来,一起往 ...
- HTTP/2和Python的支持现状-2019-10
背景: 大概2019年9月份,天猫全面升级了HTTP/2的支持,并且加强了HTTP/1的访问限制,也可能很早前就这么做了, 但之前一直没限制HTTP/1的访问.之所以发现这个问题,是因为写的爬虫突然失 ...
- AtCoder Beginner Contest 136
AtCoder Beginner Contest 136 题目链接 A - +-x 直接取\(max\)即可. Code #include <bits/stdc++.h> using na ...
- mysql-mysqldump
备份(导出)所有数据库的数据和结构(注意:这种方式备份,还原时,无需先创建数据库,可直接导入) mysqldump -u root -p 'password' --all-databases > ...
- Keil5创建基于RTX的STM32工程（转载+自己的体会）
转载自:https://blog.csdn.net/u011976086/article/details/54342447#commentBox 之前使用过ucos,freertos,但是这个keil ...
- ImageMagick 的安装及使用
一.什么是Imagemagick? ImageMagick是一款免费开源的图片编辑软件.既可以通过命令行使用,也可以通过C/C++.Perl.Java.PHP.Python或Ruby调用库编程来完成. ...
- 用Python 打开程序的两中方法
1.ShellExecute函数 import win32api win32api.ShellExecute(0, 'open', 'notepad.exe', '', '', 0) # 后台执行 w ...
- Implementing the Singleton Pattern in C#
Table of contents (for linking purposes...) Introduction Non-thread-safe version Simple thread safet ...
- [洛谷P3092]【[USACO13NOV]没有找零No Change】
状压\(DP\) + 二分 考虑构成:\(k<=16\)所以根据\(k\)构造状压\(dp\),将所有硬币的使用情况进行状态压缩 考虑状态:数组\(dp[i]\)表示用\(i\)状态下的硬币可以 ...