vue_demo目录结构截图:
(1)图一
(2).图二
(3).图三
(四).图四
(5).图五
(6).图六
(7).图七
不能随便改入口文件的名字,因为已经配置好了
(8).图八
(9).图九
(10).图十
===================================================================
(11).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.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//组件,简写为App,可以点进去;
//什么是组件?一个局部功能界面(html/js/css/img),包含了实现功能界面的所有资源
components: { App },
//模板
template: '<App/>'
})
==============================================================================
图十一
上图为一个组件
(12)
.jsx文件:就是js+xml
.less文件:就是样式文件
(13)根标签通常放在src的根目录下,App.vue+main.js放在src的根目录下
其他组件新建文件夹components,放到这个文件夹下
(14).
File-->settings
关闭jslint+eslint+jshint这三个自动检查,去掉Enable前面的对勾
(15).vue文件的模板
(16).创建模板文件
Editor-->File and Code Templates-->选择vue
Name:vue Extention(后缀):vue
内容如下:
<template>
<div>
</div>
</template>
<script>
export default{
}
</script>
<style>
</style>
(17).HelloWorld.vue
<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template>
<script>
export default {//配置对象(与vue一致)
data(){//必须写函数
return{
msg:'Hello Vue Component'
}
}
}
</script>
<style>
.msg{
color:red;
font-size: 30px;
}
</style>
(18).App.vue<template>
<div>
<img class="logo" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签-->
<HelloWorld/>
</div>
</template>
<script>
//1.引入组件
import HelloWorld from './components/HelloWorld'
export default{
//2.映射组件标签(components可以配置多个)
components:{
HelloWorld
}
}
</script>
<style>
.logo{
200px;
height:200px;
}
</style>
(19).main.js
/*
* 入口js:创建Vue实例
* */
import Vue from 'vue'
//将App组件渲染到index.html
//1.先引入
import App from './App.vue'
new Vue({
//el需要查看index.html
el:'#app',
//将App组件渲染到index.html
//2.将它映射为标签
components:{
App
},
//3.使用组件标签
//将这个标签<App/>写入模板里面
template:'<App/>'
})