Vue_基础框架目录解析

女爷i 2022-05-22 13:10 209阅读 0赞

当我们用npm生成一个项目的时候，我们要了解这个项目的文件  
![这里写图片描述][70]  
1.index.html 是所有HTML的入口，点开该index.html 可以看到：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>hellovue</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

2.这个app组件注册在src的main.js里面，点开main.js文件：

import Vue from 'vue'
    import App from './App'
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      render:h => h(App)
    });
    
    //import Vue from 'vue' 
    //会从node_modules中取Vue框架的东西
    
    //import App from './App' 
    //实际上同级目录下的from‘./App.vue’
    
    //import 是ES6的语法，相当于 var app = require(./App")
    //作为一个app 引入当前文件下

这个组件被注册以后，就可以html中使用了  
打开App.vue我们可以看到：

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    <script>
      export default { 
      name: 'App'
      data(){ return{ }
    }
    </script>
    <style>
    }
    </style>
    
    // export会自动生成new Vue（{}）Vue的一个参数，我们把default的东西当作是Vue的一些参数和属性即可
    //这里的data(){} 是ES6的语法，相当于
     function data (){ return{ msg:"Hello World!" }}
    //但是还是推荐使用Vue ES6的写法

3.项目详细介绍：  
README.md:项目的说明文件  
.package.json文件：里面有很多第三方依赖包  
package.lock.json：帮我们确定安装的依赖包的版本，保持团队编程的统一  
LICENSE:开源协议的说明  
index.html：使我们项目默认的首页的模板文件  
postcssrc.js:是对postcss的一个配置项  
Gitignore：设置Git提交到线上，有些文件可以不被提交  
eslintrc.js：配置了代码的规范  
eslintinore:里面的内容不规则也不会被检测。  
editorconfig:配置了编辑器的语法  
babelrc:项目写的代码，是Vue的单文件代码，所以需要babel做语法转换，最终转换成浏览器能够编译的代码。  
static：放的是静态资源，放置一些静态的图片啊，以及模拟的json数据  
node\_modules：是我们项目依赖的第三方依赖包  
src:放的是我们装个项目的源代码  
① main.js：放的是我们整个项目的入口文件  
②.APP.vue是我们项目最原始的根组件  
③.router：项目的所有的路由，都放在router的index.js文件  
④. components :放的是我们项目要用的小组件  
⑤.assets:放置的是我们项目要用的图片  
config：放置的是项目的配置文件  
①. index.js： 基础的配置信息放置在index.js文件中  
②.dev.env.js：开发环境的配置信息放置在此文件中  
③.prod.env.js：线上的配置信息配置在此文件中  
build：放置的是打包工具webpack的一些内容，一般不需要修改。  
**附：**  
我们把文件后缀名为.vue的文件称之为单文件组件，实际上里面放的是Vue的组件

[70]: /images/20220522/67a97842ca5f416881e9f36c87b04ef9.png