荐 关于Vue.js的引入方式（页面引入与webpack构建引入）
程序员文章站
2022-09-06 11:22:23
目录一、页面引入方式：组件的注册引入：采用render函数来渲染组件：二、webpack引入方式vue的安装： 1、组件的注册引入2、render函数渲染方式三、使用.vue自定义组件文件一、页面引入方式：组件的注册引入： Tit......</div>
<div class="content">
<p id="main-toc"><strong>目录</strong></p>
<p id="-toc" style="margin-left:40px;"> </p>
<p id="%E4%B8%80%E3%80%81%E9%A1%B5%E9%9D%A2%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F%EF%BC%9A-toc" style="margin-left:40px;"><a href="#%E4%B8%80%E3%80%81%E9%A1%B5%E9%9D%A2%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F%EF%BC%9A">一、页面引入方式：</a></p>
<p id="%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5%EF%BC%9A-toc" style="margin-left:80px;"><a href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5%EF%BC%9A">组件的注册引入：</a></p>
<p id="%E9%87%87%E7%94%A8render%E5%87%BD%E6%95%B0%E6%9D%A5%E6%B8%B2%E6%9F%93%E7%BB%84%E4%BB%B6%EF%BC%9A-toc" style="margin-left:80px;"><a href="#%E9%87%87%E7%94%A8render%E5%87%BD%E6%95%B0%E6%9D%A5%E6%B8%B2%E6%9F%93%E7%BB%84%E4%BB%B6%EF%BC%9A">采用render函数来渲染组件：</a></p>
<p id="%E4%BA%8C%E3%80%81webpack%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F-toc" style="margin-left:40px;"><a href="#%E4%BA%8C%E3%80%81webpack%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">二、webpack引入方式</a></p>
<p id="vue%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%9A%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0-toc" style="margin-left:80px;"><a href="#vue%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%9A%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0">vue的安装： </a></p>
<p id="1%E3%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5-toc" style="margin-left:80px;"><a href="#1%E3%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5">1、组件的注册引入</a></p>
<p id="2%E3%80%81render%E5%87%BD%E6%95%B0%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F-toc" style="margin-left:80px;"><a href="#2%E3%80%81render%E5%87%BD%E6%95%B0%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F">2、render函数渲染方式</a></p>
<p id="%E4%B8%89%E3%80%81%E4%BD%BF%E7%94%A8.vue%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6-toc" style="margin-left:40px;"><a href="#%E4%B8%89%E3%80%81%E4%BD%BF%E7%94%A8.vue%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6">三、使用.vue自定义组件文件</a></p>
<h2 id="%E4%B8%80%E3%80%81%E9%A1%B5%E9%9D%A2%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F%EF%BC%9A">一、页面引入方式：</h2>
<h3 id="%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5%EF%BC%9A" style="text-indent:33px;">组件的注册引入：</h3>
<pre>
<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<script>
$(function () { //保证页面加载完后才加载js，不然#app会报错找不到
//组件定义
const login = {
template:"<h2>vue的使用</h2>"
}
var vm = new Vue({
el:"#app",
data:{},
components:{ //组件的注册
login
}
})
})
</script>
<body>
<div id="app">
//组件的使用
<login></login>
</div>
</body>
</html></code></pre>
<h3 id="%E9%87%87%E7%94%A8render%E5%87%BD%E6%95%B0%E6%9D%A5%E6%B8%B2%E6%9F%93%E7%BB%84%E4%BB%B6%EF%BC%9A" style="text-indent:33px;">采用render函数来渲染组件：</h3>
<pre>
<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<script>
$(function () { //保证页面加载完后才加载js，不然#app会报错找不到
//组件定义
const login = {
template:"<h2>vue的使用</h2>"
}
var vm = new Vue({
el:"#app",
data:{},
render:function(createElements) { //render函数渲染组件并输出替换掉app容器
return createElements(login);
}
})
})
</script>
<body>
//render渲染方式此时会将app这个容器完全替换
<div id="app"></div>
</body>
</html></code></pre>
<p><span style="color:#f33b45;">两者的区别：<strong>render函数渲染会替换掉app容器</strong>，html源码中是没有div标签了，而组件注册方式会将组件放于容器中</span></p>
<h2 id="%E4%BA%8C%E3%80%81webpack%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span>二、webpack引入方式</span></h2>
<h3 id="vue%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%9A%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0" style="text-indent:33px;"><span>vue的安装： </span></h3>
<pre>
<code>cnpm i vue -D</code></pre>
<h3 id="1%E3%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B3%A8%E5%86%8C%E5%BC%95%E5%85%A5" style="text-indent:33px;">1、组件的注册引入</h3>
<pre>
import Vue from 'vue'默认导入的是dist/vue.runtime.common.js这个js文件（vue/package.json中的“main"参数指定），此文件属于runtime-only模板，功能不全，因此我们需要指定其他的js:</pre>
<pre>
<code>1. import Vue from 'vue/dist/vue.js'
2. webpack.config.js中增加节点
resolve: {
alias: { //vue导包别名
'vue$':'vue/dist/vue.js'
}
}
3.修改vue包中的webpackage.json中的'main'字段
推荐第二种方式</code></pre>
<pre>
<code class="language-javascript">import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from 'vue/dist/vue.js'
$(function () { //页面加载完后才会加载
var login = { //定义组件
template:"<h2>vue的使用</h2>"
}
var vm = new Vue({
el:"#app",
data:{},
method:{},
components:{ //组件注册
login
}
})
})
html中
<div id="app">
<login></login>
</div></code></pre>
<p style="text-indent:33px;"><span style="color:#f33b45;">此方式同前面一样，组件注册方式将组件插入到了容器中。</span></p>
<h3 id="2%E3%80%81render%E5%87%BD%E6%95%B0%E6%B8%B2%E6%9F%93%E6%96%B9%E5%BC%8F" style="text-indent:33px;"><span>2、render函数渲染方式</span></h3>
<pre>
<code class="language-javascript">import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from 'vue/dist/vue.js'
$(function () { //页面加载完后才会加载
var login = { //定义组件
template:"<h2>vue的使用</h2>"
}
var vm = new Vue({
el:"#app",
data:{},
method:{},
render:function (createElements) { //组件渲染
return createElements(login)
}
})
})
html中，此div会被组件完全替换
<div id="app">
</div></code></pre>
<p style="text-indent:33px;"><span style="color:#f33b45;">此时，html中的app容器会被组件完全替换</span></p>
<h2 id="%E4%B8%89%E3%80%81%E4%BD%BF%E7%94%A8.vue%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6" style="text-indent:0px;"><span>三、使用.vue自定义组件文件</span></h2>
<p style="text-indent:33px;"><span>组件定义我们现在使用后缀为.vue的组件文件来定义，此时，由于webpack原生只支持.js，因此我们要使用第三方loader来支持.vue的解析。安装第三方loader:</span></p>
<pre>
<code>cnpm i vue-loader vue-template-compiler -D</code></pre>
<p style="text-indent:33px;">webpack.config.js中配置规则：</p>
<pre>
<code class="language-javascript">{ test: /\.vue$/, use: 'vue-loader'},</code></pre>
<p style="text-indent:33px;"><span style="color:#f33b45;">注：由于vue15.0之后需要手动添加plugin配置，webpack.config.js中</span></p>
<pre>
<code class="language-javascript">//配置VueLoaderPlugin插件
//注册const后的大括号
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
........
plugins: [
new VueLoaderPlugin()
]
}</code></pre>
<p style="text-indent:33px;">定义组件文件login.vue</p>
<pre>
<code><template>
<h1>这是vue自定义组件渲染</h1>
</template>
<script></script>
<style></style></code></pre>
<p> main.js引入login.vue</p>
<pre>
<code class="language-java">import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from 'vue/dist/vue.js'
//引入自定义.vue组件文件
import login from './vue/login.vue'
$(function () {
var vm = new Vue({
el:"#app",
data:{},
method:{},
components:{ //组件注册方式，添加到容器中
login
}
//组件渲染方式，替换容器
// render:function (createElements) {
// return createElements(login)
// }
})
})
</code></pre>
<p> </p>
<p>本文地址：https://blog.csdn.net/u011573295/article/details/107249207</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1832416.html">
沈万三是什么人?面对朱元璋的猜忌他是如何躲过的？ </a>
</p>
<p>
下一篇： <a href="/article/1832418.html">
网店美工之前期准备工作--idea </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1832417.html" target="_blank" title="荐
关于Vue.js的引入方式（页面引入与webpack构建引入）">
<h2>
荐
关于Vue.js的引入方式（页面引入与webpack构建引入） </h2>
</a>
</li>
<li>
<a href="/article/655015.html" target="_blank" title="荐
关于Vue.js的引入方式（页面引入与webpack构建引入）">
<h2>
荐
关于Vue.js的引入方式（页面引入与webpack构建引入） </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>