vue 里.js文件和.vue文件
main.js和App.vue位于同级目录。main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'...
·
main.js和App.vue位于同级目录。
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //引入之后就可以直接new Vue({ })使用了
import App from './App' //引入主组件
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App }, //App是上面import引入的App;
template: '<App/>'
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>标签即模板,里面都是html标签
引入其他的组件,可以在<script>标签中引入,关键字import
然后再实例化对象里componts组件里给子组件自定义名称,在<template>使用
个人总结:
1、html文件中基本不写什么东西,只是写一个组件标签。
2、入口的main.js文件引入vue框架 和 App.vue主组件,然后实例化vue对象,在components属性中定义组件名(把引入App.vue主组件定义一个名字,返给html文件运用)
3、App.vue主组件,里面集合了html、js、css语法,在此主组件文件中,也可以引用其他子组件,引用时在script标签所在的js中,用import引入,然后在实例化vue对象中的components中定义名字,然后在template所在的html中运用。
4、子组件在components文件中,一般此文件夹中放置的都是子组件,被App.vue主组件引用。
引用:
更多推荐
已为社区贡献11条内容
所有评论(0)