Vue目录
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190617141912427.png)
src目录
目录文件 | 描述 |
---|
assets | 静态资源 如:样式文件,图片 |
components | 组件——重复利用的公共控件 |
router | 路由 |
view | 页面 |
App.vue | 页面入口 |
main.js | js入口 |
展示模板
<!--展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
// 导入组件
import Hello from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a href="https://vuejs.org" target="_blank">
Core Docs
</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank">
Forum
</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank">
Community Chat
</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" >
Twitter
</a>
</li>
<br>
<li>
<a href="http://vuejs-templates.github.io/webpack/" target="_blank">
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a href="http://router.vuejs.org/" target="_blank">
vue-router
</a>
</li>
<li>
<a href="http://vuex.vuejs.org/" target="_blank">
vuex
</a>
</li>
<li>
<a href="http://vue-loader.vuejs.org/" target="_blank">
vue-loader
</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank">
awesome-vue
</a>
</li>
</ul>
</div>
</template>
//js代码块
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- 样式代码 -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>