瀏覽代碼

初始化

master
Wheba 5 年之前
父節點
當前提交
bfa74e4063
共有 4 個文件被更改,包括 10 次插入94 次删除
  1. +9
    -21
      src/App.vue
  2. +0
    -57
      src/components/HelloWorld.vue
  3. +0
    -8
      src/router/index.js
  4. +1
    -8
      src/views/Home.vue

+ 9
- 21
src/App.vue 查看文件

<template> <template>
<div id="app"> <div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> <router-view/>
</div> </div>
</template> </template>


<style lang="scss"> <style lang="scss">
*{margin: 0;padding: 0;}
html,body{
position: absolute;
width: 100%;
height: 100%;
}
img{display: block;}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
height: 100%;
text-align: center; text-align: center;
color: #2c3e50;
}

#nav {
padding: 30px;

a {
font-weight: bold;
color: #2c3e50;

&.router-link-exact-active {
color: #42b983;
}
}
} }
</style> </style>

+ 0
- 57
src/components/HelloWorld.vue 查看文件

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

+ 0
- 8
src/router/index.js 查看文件

name: 'Home', name: 'Home',
component: Home component: Home
}, },
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
] ]


const router = new VueRouter({ const router = new VueRouter({

+ 1
- 8
src/views/Home.vue 查看文件

<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> </div>
</template> </template>


<script> <script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default { export default {
name: 'Home', name: 'Home',
components: {
HelloWorld
}
} }
</script> </script>

Loading…
取消
儲存