锐客网

  1. 首页 > 生活百科 > it技术 > >

vue项目搭建app.vue

IT知识vue项目项目搭建

实践是知识的母亲，知识是生活的明灯。这篇文章主要讲述vue项目搭建app.vue相关的知识，希望能为你提供帮助。
< template>
< div id="app">
< !-- < h1> {{title}}< /h1> -->
< app-header> < /app-header>
< users> < /users>
< app-foot> < /app-foot>
< !-- < img alt="Vue logo" src="https://www.songbingjia.com/android/assets/logo.png"> -->
< !-- < HelloWorld msg="Welcome to Your Vue.js App"/> -->

< /div>
< /template>
< script>
// import HelloWorld from ‘./components/HelloWorld.vue‘
// 局部注册组件
import Users from ‘./components/Users‘
import Header from ‘./components/Header‘
import foot from ‘./components/foot‘
export default {
name: ‘app‘,
data(){
return {
title:"这是我的第一个vue脚手架"
}
},
// components: {
//// HelloWorld
// }
components:{
"users":Users,
"app-header":Header,
"app-foot":foot,


}
}
< /script>
< !-- scoped域 使 App.vue User.vue两中的样式不影响-->
< style scoped>
/* 在App.vue中设置h1的样式，则在User.vue会出现效果 */
h1{
color: pink;
}
#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>
 
 
Header.vue
< template>
< header>
< h1> {{title}}< /h1>
< /header>
< /template>
< script>
export default{
name:‘app-header‘,
data(){
return {
title:"Vue.js Demo"
}
}
}
< /script>
【vue项目搭建app.vue】< style scoped>
header{
background-color: lightcyan;
padding: 10px;
}
h1{
color: palegreen;
text-align: center;
}
< /style>

    推荐阅读


    上一篇：HTML5应用程序缓存Application Cache

    下一篇：DES加密算法（密文只有字符串和数字）java和android加密的结果一致（可放在url中）