1、使用WebStorm创建一个Vue项目
2、使用命令行加载相关依赖
cnpm install
3、查看创建好的项目src目录结构
如上图所示,WebStorm已经在src目录下生成了一个 /asserts 静态资源目录、一个 /components 组件目录、一个 /router 路由配置目录;其中 /components/HelloWrold.vue 文件就是一个Vue的组件,执行
npm run dev
启动项目后打开浏览器,默认显示的就是这个HelloWorld.vue组件的内容。
4、创建组件
(1)新增一个组件
复制HelloWorld.vue文件,改名为 NewsList.vue并打开编辑里面的代码
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'NewsList',
data () {
return {
msg: '这是一个新闻列表组件'
}
}
}
</script>
(2)配置组件的路由地址
打开 /router/index.js,编辑里面的代码如下:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewsList from '@/components/NewsList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/news_list',
name: 'NewsList',
component: NewsList
}
]
})
上述代码中 /news_list 就是新增组件的路由地址,在浏览器中可以通过这个地址访问到组件
5、访问组件
在浏览器打开:http://localhost:8080/#/news_list ,就可以访问到新增的组件 NewsList
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/10483.html