在普通页面使用 render 函数渲染组件
var login = {
template: '<h3>login</h3>'
}
var vm = new Vue({
// createElement 是一个方法, 调用它能够把指定的模板渲染成html页面
render: function (createElement, context) {
return createElement(login);
}
}).$mount('#app');
// render 和 components 的区别
// components: 类似于 指令 插件表达式 不会只替换自己所在的区域
// reder: 类似于指令 v-text 会把所有内容都替换 (包括 #app)
如何在 webpack 中 使用和 html 中一样的 vue.js
- 安装 vue 运行依赖
npm install vue -S
- 导入 vue 包
// 注意: 使用 import Vue from 'vue' 导入的 Vue 构造函数, 功能不完整, 只提供了 runtime-only 的方式, 并没有提供像网页中那样使用的方式
import Vue from 'vue'
/**
* 包查找规则:
* 1. 找 项目根目录中有没有 node_modules 的文件夹
* 2. 在 node_modules 中根据包名, 找对应的 vue 文件夹
* 3. 在 vue 文件夹中, 找一个叫做 package.json 的包配置文件
* 4. 在 package.json 文件中, 查找一个 main 属性 [main属性指定了这个包在被加载的时候 的入口文件]
*/
- 创建 vue 实例对象
var vm = new Vue({
data: {
msg: 123
}
}).$mount('#app');
- 配置 webpack.config.js 文件
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
};
- html 页面内正常使用即可
在 webpack 中 配置 .vue 组件的解析
- 安装解析 .vue 文件 所需的 loader
npm install vue-loader vue-template-compiler -D
- 配置 webpack.config.js
// 注意了 如果 vue-loader 版本为 15+, 那么必须配置 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{path: /\.vue$/, use: 'vue-loader'}
]
}
}
- 导入 vue 模块
- 定义一个 .vue 结尾的模板文件 其中组件由三部分组成
<template>
<div>
<h3> vue 文件创建的 组件 </h3>
</div>
</template>
<script></script>
<style></style>
- 使用 import 导入这个组件
- 创建 vm 实例 使用render 函数
var vm = new Vue({
el: '#app',
render: createElement => createElement(login);
});
补充 ES6 模块导入导出 语法
/**
* export default / export 和 import * from * / import * 属于 ES6 一组
* exports 和 require 属于 Node 一组 不要混用
*/
// 1. export default 一个文件内只允许使用一次
// 2. export default 可以和 export 一起使用
// 3. export default 导入方式 import 引用名称 from 文件路径
export default {
name: 'zs',
age: 20
}
// 1. export 一个文件内可以被多次导出 [按需导出]
// 2. export 导入方式 import {引用名称} from 文件路径
// 3. 如果导出多个 可以使用逗号隔开 import {name, age} from 文件路径
// 4. export 导入必须 和定义时使用一样的名字, 如果要更改 可以在导入时起别名 import {name as n} from 文件路径
export var name = 'zs';
export var age = 12;