Vue：目录分析

image

1..gitgnore ：git的管理忽略文件

2.babel.config.js：ES6=>转换ES5

3.package.json：npm说明书以及npm命令

4.package-lock.json：锁定版本

5.说明文件readme

进入src
image

1. main.js：入口（run后的入口，引入了app管理组件）
2.分析一下main.js内容
main.js 
//引入vue
import Vue from 'vue'
//引入app组件
import App from './App.vue'
//关闭生产提示
Vue.config.productionTip = false
//创建vm实例
new Vue({
  render: h => h(App),
}).$mount('#app')
3.assets：静态资源
4.components：组件包
5.App.vue : 管理组件的组件所有的组件都必须注册到这里
默认的App.vue 
<template>
  <div id="app">
	//图标
    <img alt="Vue logo" src="./assets/logo.png">
    //使用组件
	  <School></School>
  </div>
</template>

<script>
    //引入helloworfd组件
    import HelloWorld from './components/HelloWorld.vue'//默认的欢迎界面
    import School from './components/test'//自己的大块组件放这里

    //导出App
export default {
  name: 'App',
  components: {
      School
  }
}
</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>

Vue的热部署：直接修改代码会自己加载不需要重新启动。

public里面的东西

image

index.html解释 
<!DOCTYPE html>
<html lang="">
<head>
  <!--字符编码-->
  <meta charset="utf-8">
  <!--针对ie的渲染支持-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--开启移动端的理想视口-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--配置签页的图标-->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!--配置页面的标题：从packahe.json找-->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!--当游览器不支持js时候noscript会被渲染-->
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
posted @ 2021-11-09 17:33  旅祸少年  阅读(34)  评论(0)  编辑  收藏  举报