您的位置:首页 > Web前端 > Vue.js

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

2019-08-07 17:12 1366 查看

创建Vue项目

[code]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

[code]<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引入模板组件

[code]<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入口函数执行

[code]// 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/>'
})

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: