render方法渲染组件和在webpack中导入vue

使用component注册的组件div容器里可以放多个,但是使用render的只能放一个

<div id="app">
        <p>我可以放两个</p>
        <login></login>
    </div>
    <script>
       var login = {
           template:'<h1>login的</h1>'
       }
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
                login
            }
        });
    </script>
在页面中渲染基本的组件
<div id="app">
        <p>我显示不出来的,只能显示login中的内容</p>
        <p>我也显示不出来</p>
    </div>
    <script>
        
       var login = {
           template:'<h1>login的</h1>'
       }
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            render:function(createElements){
                return createElements(login)
            }
        });
    </script>
render渲染函数

在普通网页中使用vue:

1. 使用 script 标签 ,引入 vue 的包
2. 在 index 页面中,创建 一个 id 为 app div 容器
3. 通过 new Vue 得到一个 vm 的实例

 webpack 中使用 vue :

1. 安装vue的包: cnpm i vue -S
2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中,导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件,其中,组件有三部分组成: template script style
5. 使用 import login from './login.vue'导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 id 为 app 的 div 元素,作为我们 vm 实例要控制的区域;

 

可以写node_modules下vue文件的路径,也可以使用import Vue from 'vue' ,使用第import Vue from 'vue'方法需要在配置文件webpack.config.js里加一个reslove结点,和plugins和module平级,但每次修改都需要重启。如果没有配置的话会报如下的错误!

 

 

 

在vue中结合render函数渲染指定的组建到容器中

方法一:小例子,可以像平时一样直接在main.js里面写vue的代码,但这种方法只能在导入最全的vue.js路径下使用。不灵活import Vue from '../node_modules/vue/dist/vue.js'

     

方法二:新建XXX.vue文件,此文件中由<template></template>,<script></script>,<style></style>三部分组成。在main.js里面引用此文件,

1. 导入 login 组件    import login from './login.vue'

2. 默认webpack 无法打包 .vue 文件,需要安装 相关的loader:     cnpm i vue-loader vue-template-compiler -D

3. 在配置文件中,新增loader配置项 { test:/\.vue$/, use: 'vue-loader' },注意:这里还需要增加const VueLoaderPlugin = require('vue-loader/lib/plugin'),

  plugins: [
    new VueLoaderPlugin() ]
详情:https://vue-loader.vuejs.org/guide/#manual-setup

 

4.在main.js里面调用

 

 

 可以看到这个Root就是我们new Vue得到的实例,在实例身上挂载了一个login组件

 

 

render:function(createElements){
    return createElements(login)        ------------------->     这一段可以简写成render : c => c(login)
  }

export default方法和export的使用方法

可以直接在login.vue里定义组件数据

 

 

  Node 中向外暴露成员的形式:

module.exports = {}

// 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员

在 ES6中,也通过规范的形式,规定了 ES6 中如何导入和导出模块

ES6中导入模块,使用 import 模块名称 from '模块标识符' import '表示路径'

在 ES6 中,使用 export default 和 export 向外暴露成员:

// 注意: export default 向外暴露的成员,可以使用任意的变量来接收
// 注意: 在一个模块中,export default 只允许向外暴露1次
// 注意: 在一个模块中,可以同时使用 export default 和 export 向外暴露成员

// 注意: 使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
// 注意: export 可以向外暴露多个成员, 同时如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
// 注意: 使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
// 注意: 使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;

现在新建一个test.js文件演示

 

在main.js中调用

 

 

 

 

转载于:https://www.cnblogs.com/sweetC/p/11490623.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 webpack 打包 Vue 项目,你需要按照以下步骤进行操作: 1. 首先,确保你的项目目录已经安装了 Node.js 和 npm(或者 yarn)。 2. 在项目目录下创建一个新的 `package.json` 文件,可以通过运行 `npm init` 命令来生成该文件。 3. 在 `package.json` 文件添加以下依赖项: ```json { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.11" } } ``` 这些依赖项包括 Vue.js、WebpackWebpack CLI、Vue Loader 和 Vue Template Compiler。 4. 运行 `npm install`(或者 `yarn install`)命令来安装这些依赖项。 5. 在项目目录下创建一个 `webpack.config.js` 文件,并添加以下配置: ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] } }; ``` 这个配置文件定义了入口文件、输出目录、使用的 loader 和解析规则等。 6. 在项目目录下创建一个 `src` 文件夹,并在其创建一个 `main.js` 文件作为入口文件。 ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); ``` 在 `main.js` ,我们导入 Vue 和根组件 App,并通过创建一个 Vue 实例将 App 渲染到 `#app` 元素。 7. 创建一个 `App.vue` 文件,作为根组件的模板。 ```vue <template> <div id="app"> <h1>Hello, Vue!</h1> </div> </template> <script> export default { name: 'App' } </script> <style> h1 { color: blue; } </style> ``` 8. 现在,可以运行 `npx webpack`(或者通过在 `package.json` 配置脚本来运行)来构建你的项目。构建完成后,在 `dist` 文件夹会生成一个名为 `bundle.js` 的文件。 9. 最后,将 `bundle.js` 引入你的 HTML 文件,并在浏览器打开该文件,你应该能够看到显示 "Hello, Vue!" 的页面。 以上就是使用 webpack 打包 Vue 项目的基本步骤。可以根据你的具体需求进行更多的配置,如代码分割、CSS 预处理等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值