Vue2几种常见开局方式详解

更新时间：2017年09月09日 11:06:49 作者：风雨后见彩虹

这篇文章主要为大家详细介绍了Vue2几种常见开局方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在SF问题中看到了一个关于vue-cli中的template问题，问题是这样的：

用vue-cli工具生成的main.js中：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

然后问友的问题是：

【template: '<App/>'】这句是什么意思？
是指使用app.vue模板吗？但在vue没有看到这样的用法哦！

里面只有:

1 template:'#xxx' 根据id获取
2 template:'<xx>.....<xx>' 直接使用

请问有没有相关的文档解释呢？

看到这个问题，其实就是vue的开局方式写法总结。

Vue2 加了reader选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点

我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件)

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <hello></hello>
  <!-- 这里还可以写点其他组件, 或者路由也可以 <router-view></router-view> -->
 </div>
</template>
<script>
import Hello from './components/Hello'
export default {
 name: 'app',
 components: {
  Hello
 }
}
</script>
<style>
</style>

方式 1

模板文件:

<div id="app"></div>

注意: vue2 已经不支持直接绑定在 body 和 html 元素上, 所以我们需要在 body 里写个挂载元素

main.js 入口文件:

import App from './app.vue'
new Vue({
 el: '#app',
 render: creatElment => creatElment(App)
})

这里的采用 es6 的写法, 转出 es5 就是

render: funciton(creatElment) {
  return creatElment(App)
}

creatElment 的第一个参数可以是String(HTML 标签名称) | Object(组件对象) | Function(函数), 这里传的就是个组件对象

注意: 这种情况下, App 组件并不是根组件

方式 2

模板文件:

<div id="app"></div>

main.js 入口文件:

import App from './app.vue'
new Vue({
 el: '#app',
 render: creatElment => creatElment('App'),
 components: {
  App
 }
})

这个写法是不是和第一种很像? 只不过这里传的就是个App标签, 通过render渲染一个<App></App>元素, 然后把 App 当组件来用
注意: 这种情况下, App 组件并不是根组件

方式 3

模板文件:

<div id="app"></div>

main.js 入口文件:

import App from './app.vue'
new Vue({
 el: '#app',
 ...App
})

这种方法和方式1 基本一样, 区别就在于render: creatElment => creatElment(App)和...App
render: creatElment => creatElment(App)是把 App 当成一个组件对象, 给render解析, 而...App是将 App 这个组件对象和{el: '#app'}这个对象直接合并, 变成Vue的参数
注意: 这种情况下, this.$root 是 App 组件

注意: 这种写法, 需要在.babelrc里添加stage-3以上的presets, 如:

{
  "presets": ["es2015", "stage-2"]
}

方式 4

模板文件:

<div id="app">
  <App></App>
</div>

main.js 入口文件:

import App from './app.vue'
new Vue({
 el: '#app',
 components: {
   App
 }
})

这种写法就是完全把 App 当成一个组件使用, 所以我们需要在模板里添加<App></App>
注意: 上面这种写法需要在 webpack 配置别名, 这种情况下, App 组件并不是根组件

module.exports = {
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}

方式 5

模板文件:

<div id="app"></div>

main.js 入口文件:

import App from './app.vue'
new Vue({
 el: '#app',
 template: '<App/>',
 components: {
   App
 }
})

这种写法就也是完全把 App 当成一个组件使用, 不过模板直接写在了template选项里
注意: 上面这种写法需要在 webpack 配置别名, 这种情况下, App 组件并不是根组件

module.exports = {
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+element获取el-table某行的下标,根据下标操作数组对象方式
这篇文章主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
2020-08-08
Vue.js中用v-bind绑定class的注意事项
关于数据绑定一个常见需求就是操作元素的class列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
2016-12-12
Vue组件实现评论区功能
这篇文章主要为大家详细介绍了Vue组件实现评论区功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue搜索高亮popsearch组件的实现示例
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下
2023-09-09
vue-element-admin关闭eslint的校验方式
这篇文章主要介绍了vue-element-admin关闭eslint的校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue配置接口域名方法总结
在本篇文章里小编给大家分享了关于vue配置接口域名方法和相关知识点总结，需要的朋友们跟着操作下。
2019-05-05
浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。感兴趣的朋友跟随脚本之家小编一起看看吧
2018-08-08
antd table按表格里的日期去排序操作
这篇文章主要介绍了antd table按表格里的日期去排序操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue操作数组的几种常用方法小结
本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
2023-09-09
vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy
这篇文章主要介绍了vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04