前言：
眼前看官们对“vue引入js文件里方法找不到”可能比较珍视，你们都需要了解一些“vue引入js文件里方法找不到”的相关知识。那么小编同时在网摘上汇集了一些对于“vue引入js文件里方法找不到””的相关内容，希望姐妹们能喜欢，各位老铁们快快来了解一下吧！一、页面引入方式：组件的注册引入：
<!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>采用render函数来渲染组件：<!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>两者的区别：render函数渲染会替换掉app容器，html源码中是没有div标签了，而组件注册方式会将组件放于容器中
二、webpack引入方式vue的安装：
cnpm i vue -D1、组件的注册引入
import Vue from 'vue'默认导入的是dist/vue.runtime.common.js这个js文件（vue/package.json中的“main"参数指定），此文件属于runtime-only模板，功能不全，因此我们需要指定其他的js:
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'字段 推荐第二种方式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>此方式同前面一样，组件注册方式将组件插入到了容器中。
2、render函数渲染方式
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>此时，html中的app容器会被组件完全替换
三、使用.vue自定义组件文件
组件定义我们现在使用后缀为.vue的组件文件来定义，此时，由于webpack原生只支持.js，因此我们要使用第三方loader来支持.vue的解析。安装第三方loader:
cnpm i vue-loader vue-template-compiler -D
webpack.config.js中配置规则：
{ test: /\.vue$/, use: 'vue-loader'},注：由于vue15.0之后需要手动添加plugin配置，webpack.config.js中
//配置VueLoaderPlugin插件//注册const后的大括号const {VueLoaderPlugin} = require('vue-loader') module.exports = { .... .... plugins: [ new VueLoaderPlugin() ]}定义组件文件login.vue
<template> <h1>这是vue自定义组件渲染</h1></template><script></script> <style></style>
main.js引入login.vue
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) // } })}) 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #vue引入js文件里方法找不到
