Vue.js基于脚手架编写项目

创建Vue项目

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
或者npm start

github项目vue-cli

vue-cli文档

vue-cli中文网

项目结构图

代码编写,在src目录

components自定义组件yy.vue

<template>
<div>
  <p class="msg">{{msg}}</p>
</div>
</template>

<script>
export default {// 配置对象(与Vue一致)
  name: 'yy',
  data () { // 必须写函数
    return {
      msg: 'hello Vue componet'
    }
  }
}
</script>

<style scoped>
.msg{
  color: red;
  font-size: 30px;
}
</style>

app.vue引入模板组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--使用组件标签-->
    <yy/>
  </div>
</template>

<script>
// 1、引入组件
import yy from './components/yy.vue'
export default {
  // 2、映射组件标签
  components: {
    yy
  },
  name: 'App'
}
</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入口函数执行

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})

 

发布了232 篇原创文章 · 获赞 107 · 访问量 11万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览