1、在WebStrom中打开vuedemo02项目,目录结构如下:
node_modules:npm 加载的项目依赖模块
src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
- assets: 放置一些图片,如logo等。
- App.vue: 项目入口文件。
- main.js: 项目的核心文件。
.babelrc、.editorconfig、.gitignore:这些是一些配置文件,包括语法配置,git配置等。
index.html:首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json:项目配置文件。
README.md:项目的说明文档,markdown 格式
webpack.config.js:项目构建(webpack)相关代码
2、打开App.vue文件,代码如下:
<!--Vue模板 template-->
<template>
<!--Vue的模板里面,所有的内容要被一个根节点包含起来 div-->
<div id="app">
<img src="./assets/logo.png">
<!--绑定数据用{{}}-->
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
<!--Vue组件名字 可省略-->
name: 'app',
<!--业务逻辑数据-->
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="scss">
#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;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>