尚硅谷Vue学习02-vue 组件化编码

18、使用vue-cli创建项目

1. 创建vue项目
   npm install -g vue-cli
   vue init webpack vue_demo (vue init + 模板名称 + 项目名称)
   cd vue_demo
   npm install
   npm run dev
   访问: http://localhost:8080/

2. 项目结构
   
   截图只有一部分
   static文件夹下为空会被git忽略掉，所以有.gitkeep文件让git对static进行版本控制，防止被忽略了
   .babelrc:将es6转es5,rc:runtime control,简单来说就是描述babel是怎么运行的
   |-- build : webpack 相关的配置文件夹(基本不需要修改)
   |-- dev-server.js : 通过 express 启动后台服务器
   |-- config: webpack 相关的配置文件夹(基本不需要修改)
   |-- index.js: 指定的后台服务的端口号和静态资源文件夹
   |-- node_modules
   |-- src : 源码文件夹
   |-- components: vue 组件及其相关资源文件夹
   |-- App.vue: 应用根主组件
   |-- main.js: 应用入口 js
   |-- static: 静态资源文件夹
   |-- .babelrc: babel 的配置文件
   |-- .eslintignore: eslint 检查忽略的配置
   |-- .eslintrc.js: eslint 检查的配置
   |-- .gitignore: git 版本管制忽略的配置
   |-- index.html: 主页面文件
   |-- package.json: 应用包配置文件
   |-- README.md: 应用描述说明的 readme 文件

3. 什么是组件：局部功能界面，它包含实现这个功能的所有资源

4. westorm可以创建一个vue模板

模板内容:

<template>
  <!--要求有一个根标签-->
  <div></div>
</template>
<script>
export default{

}
</script>
<style>

</style>

19. 基于脚手架编写项目
    HelloWrold.vue

<template>
  <!--要求有一个根标签-->
  <div class="msg">
    <p>{{msg}}</p>
  </div>
</template>
<script>
export default{ //配置对象（与Vue一致）
  data() { //必须写函数
    return {
      msg : 'Hello 5 Component'
    }
  }
}
</script>
<style>

</style>

App.vue

<template>
  <div>
    <img class="logo" src="./assets/logo.png" alt="logo">
    <!--3、使用组件标签-->
    <HelloWorld/>
  </div>
</template>
<script>
  // 1、引入组件
  import HelloWorld from './components/HelloWorld.vue'

  export default{
    // 2、映射成组件标签
    components: {
      HelloWorld
    }
  }
</script>
<style>
  .logo {
    width: 200px;
    height: 200px;
  }
</style>

main.js

/*
入口JS : 创建Vue实例
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  //映射成组件标签
  components: {
    App
  },
  template: '<App/>'
})

结构：
效果：