标签：export gray images name cal hello www 开发 令行
接着上篇vue-cli脚手架构建项目结构建好项目之后，就开始写个“hello world！”吧~~~
vue玩的都是组件，所以开发的也是组件。
1.新建helloworld.vue。（删除Hello.vue）代码如下：
<!--模板部分-->
<template>
<div class="container">
<h1>hello，world！</h1>
<p>{{test}}</p>
</div>
</template>
<!--js部分-->
<script>
export default {
name: ‘helloworld‘,
data() {
return {
test: ‘this is a test‘
};
}
}
</script>
<!--样式部分-->
<style>
.container {
background: #aaa;
color: blue;
}
</style>
一个简单的组件就完成了。
2.我们打开入口组件App.vue并把里面的代码替换成如下代码：
<template>
<div id="app">
<img src="./assets/logo.png">
<!--使用组件-->
<helloworld></helloworld>
</div>
</template>
<script>
import helloworld from ‘./components/helloworld‘
export default {
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>
这个时候还要将router文件夹下的index.js里面的代码屏蔽。因为这个栗子还没涉及到路由功能。
3.紧接着我们就可以启动服务了，在命令行下输入：
npm run dev
如果不报错，说明编译成功了，就会在浏览器中看到如下页面：
新建的helloworld.vue这个组件就运行成功了，hello world ！也就出世了。
【前端小小白的学习之路】vue学习记录②（hello world！）
标签：export gray images name cal hello www 开发 令行
原文地址：http://www.cnblogs.com/luxiaoxing/p/7553518.html
