main.Js：
//入口文件//如何在 webpack 构架的项目中，使用 Vue 进行开发// 执行命令 npm i vue -s,把 vue 包安装成项目运行依赖//在 webpack 中尝试使用 Vue；//注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不全，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方法，实际导入的包是根据包的查找规则导入的import Vue from ‘vue‘ // 这种方法要在 webpack.config.Js 中添加别名指定（修改导入 Vue 包的路径）// import Vue from ‘../node_modules/vue/dist/vue.Js‘//这样是可以的，也可以使用像网页那种使用方法了，不用再 webpack.config.Js 中添加别名 alias 了；//包的查找规则：// 1：找项目根目录中有没有 node_modules 的文件夹// 2：在 node_modules 中根据包名找对应的 vue 文件夹// 3：在 vue 文件夹中找一个叫做 package.Json 的包配置文件// 4：在package.Json 文件中查找一个 main 属性【 main 属性指定了这个包在被加载时候的入口文件】// var login = {// template: "<h1>这是登录组件</h1>"// }//1:导入 login 组件import login from ‘./login.vue‘//默认 webpack 无法打包 .vue 文件，需要安装相关的 loader// cnpm i vue-loader vue-template-compiler -D// 在配置文件中新增 loader 配置项 { test:/\.vue$/,use:‘vue-loader‘}var vm = new Vue({ el:‘#app‘,data:{ msg: ‘123‘ },components:{ login }});
src下面创建 login.vue:
<template> <div> <h1>这是登录组件，使用 .vue 文件定义出来的</h1> </div></template><script></script><style></style>
index.HTML:
<!DOCTYPE HTML><HTML lang="en"><@R_403_6882@> <Meta charset="UTF-8"> <Title>Title</Title></@R_403_6882@><body> <!--这时容器--> <div ID="app"> <p>{{msg}}</p> <login></login> </div></body></HTML> 在 webpack.config.Js中添加插件：
//由于 vue-loader 版本高于 15 需要安装此插件（这是个坑）
const vueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
plugins: [//配置插件的节点 new vueLoaderPlugin()],总结
以上是内存溢出为你收集整理的vue结合render函数渲染指定组件到容器中全部内容，希望文章能够帮你解决vue结合render函数渲染指定组件到容器中所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）