在HBuilder中新建项目
新建好后鼠标选中新建的项目运行
如果出现这个错误则是node.js没有安装,参考博客:https://editor.csdn.net/md/?articleId=106372951
安装后之后启动
修改项目后如下目录及文件
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../page/index/index.vue'
Vue.use(Router)
export default new Router({
routes:[
{
path:'/',
name:'Index',
component:Index
}
]
})
app.vue
<template>
<div id="app">
<router-view></router-view>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
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>
main.js
import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
//声明
router
}).$mount('#app')
运行到终端:npm run server
ERROR Failed to compile with 1 errors 上午10:43:45
This dependency was not found:
* vue-router in ./src/router/index.js
To install it, you can run: npm install --save vue-router
提示我们要下载vue-router
打开一个终端
输入npm install --save vue-router,插件安装成功后再次运行
然后在浏览器里面访问http://localhost:8080/
组件
在index文件夹下创建一个component目录里面创建一个header.vue文件
<!--组件-->
<template>
<h1>这里是头部部分</h1>
</template>
<script>
export default{
name:'Header'
}
</script>
<style>
</style>
然后在index.vue里面修改
<template>
<div>
<h1>这里是首页</h1>
<Header></Header>
</div>
</template>
<script>
//引入组件
import Header from './component/header.vue'
export default{
//一个vue实例,实例名称叫Index
name:"Index",
components: {
Header
}
}
</script>
<style>
</style>
结果
传参
单个参数
header.vue
<!--组件-->
<template>
<h1>这里是头部部分 {{name}}</h1>
</template>
<script>
export default{
name:'Header',
props:{
name
}
}
</script>
<style>
</style>
index.vue
<template>
<div>
<h1>这里是首页</h1>
<!--获取str的值并且传给组件Header的属性name-->
<Header :name="str"></Header>
</div>
</template>
<script>
//引入组件
import Header from './component/header.vue'
export default{
//一个vue实例,实例名称叫Index
name:"Index",
components: {
Header
},
data:function(){
return{
str:"张三"
}
}
}
</script>
<style>
</style>
结果:
集合
index.vue
<template>
<div>
<h1>这里是首页</h1>
<!--获取str的值并且传给组件Header的属性name-->
<!-- :name="str" -->
<Header :list="userList"></Header>
</div>
</template>
<script>
//引入组件
import Header from './component/header.vue'
export default{
//一个vue实例,实例名称叫Index
name:"Index",
components: {
Header
},
data:function(){
return{
/* str:"张三", */
userList:[
{"id":1,"userName":"张三"},
{"id":2,"userName":"李四"},
{"id":3,"userName":"王五"}
]
}
}
}
</script>
<style>
</style>
header.vue
<!--组件-->
<template>
<div>
<!-- <h1>这里是头部部分 {{name}}</h1> -->
<p v-for="user in list" :key="user.id">
{{user.userName}}
</p>
</div>
</template>
<script>
export default{
name:'Header',
props:{
/* name:String, */
list:Array
}
}
</script>
<style>
</style>