09.Vuecli

创建组件两种形式：

1. 非单文件组件
   一个文件中包含多个组件
   2.单文件组件
   一个Vue文件中只包含一个组件

我们创建school组件，那么需要创建school.vue 或者School.vue
两个单词就是 my-school.vue 或者 MySchool.vue

对于单文件组件我们是这样的一个模版

<template>
     <!-- 组件的结构 -->
</template>
<script>
// 组件的交互相关的代码（数据方法等等）
</script>
<style>
    /*组件的样式*/
</style>

Vuecli 脚手架是Vue官方提供的标准化开发工具（开发平台）
cli 是 command line interface
https://cli.vuejs.org/zh/

1.安装node.js。nodejs下载网址：https://nodejs.org/en/
2.pm是nodejs的管理器，安装了node之后，npm就安装好了
3.设置npm代理
npm config set registry https://registry.npm.taobao.org/
4.安装vue

npm install -g @vue/cli
或者
yarn global add @vue/cli

5.切到你要创建项目的目录，执行vue create projectname

vue create vuedemo

我们选择第一个，之后进入安装

6.安装之后会有提示
👉 Get started with the following commands:

$ cd vuedemo
$ npm run serve

提示：

 DONE  Compiled successfully in 4502ms                                                                                                                                    下午12:24:36


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.0.41.125:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

结果

我们看一下整个的逻辑

当我们执行npm run serve 之后，发现

直接进入了main.js( 也就是我们说的入口文件)

main.js 是入口文件
//引入vue，其实就是已经下载了vue.js,并引用了
import Vue from 'vue'

//引入App组件，它是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象--vm
new Vue({
  render: h => h(App),
}).$mount('#app')


----
$mount可以修改为

new Vue({
  el: "#app",
  render: h => h(App),
})

下一步我们应该分析一下App.vue,这是一个根组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  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>

我们再看HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>