vue-cli#2.0项目结构分析

港控/mmm° 2023-06-04 06:58 22阅读 0赞

## 项目结构 ##

### build ###

构建工具相关的目录

### config ###

配置目录

### dist ###

通过工具打包生成的最终需要上线的目录

### node\_modules ###

存放本地开发所有的依赖包的目录

### src ###

源码目录

### static ###

存放图片等静态资源的目录

### .babelrc ###

babel是把新的ES语法，编译成浏览器兼容的语法的编译器，而它需要配置文件.babelrc来配置预设的规范

### .editorconfig ###

定义和维护一致的编码风格。用于语法与编程规范检查

### .eslintignore ###

你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。以下将忽略所有的 JavaScript 文件：
    
    **/*.js
    
    当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用，所以，不是当前工作目录下的 .eslintignore 文件将不会被用到。

### .eslintrc.js ###

eslint用来规范自己的代码风格，减少程序出错的概率  
.eslintrc.js就是一种eslint检测规范的配置文件

ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
    
    JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
    YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
    JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
    Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
    package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

### .gitignore ###

提交到github远程库时被忽略文件或目录的配置文件

### .postcssrc.js ###

PostCSS也是规范代码风格，可以帮助我们提高CSS代码质量。  
.postcssrc.js就是检查css代码规范的配置文件

### index.html ###

主页

### package-lock.json ###

package-lock.json是当 node\_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。类似与yarn.lock

### package.json ###

包管理工具通过package.json管理依赖包，package.json是一个包管理的配置文件

### README.md ###

项目的说明文件

### . yarn.lock ###

类似于package-lock.json

## 重点了解一下src目录 ##

### main.js ###

// node_modules中引入vue模块。
    import Vue from 'vue'
    // 当前目录的app.vue文件
    import App from './App'
    // 引入router.js
    import router from './router'
    
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    
    // eslint规范，/* eslint-disable no-new */不写就蹦了，为什么？
    // 因为js中new 一个对象的时候，规范的写法是赋值给某个变量，这里设置eslint-disable，就是为了检测时跳过接下来这行代码
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      //根组件的模板
      template: '<App/>',
      //子组件
      components: { App }
    })

### App.vue ###

这是一个单文件组件，而且是根组件，是在main.js中渲染的模板和子组件

它和之前的写法不一样，但是道理是一样的，之前的<div id="app"></div>作为根组件模板是直接写在html中，现在是通过模板的形式渲染到页面

template：  
模板中的根元素只能有一个，它会被渲染成组件的根元素，

script：  
组件的数据，方法，通过export.default导出

style：  
css部分

### router.js ###

路由配置

路由肯定是要导出的

export default new Router({
      routes: []
    })

开始配置路由:

export default new Router({
      routes: [
        {
          path: '/home',
          name: 'home'
          // 它的组件是home组件
          component: home
        },
        {
          path: '/about',
          name: 'about',
          // 它的组件是about
          component: about
        }
      ]
    })

这里用到了Router构造函数，还有各自的组件，所以不要忘了在首行导入 vue 和 vue-router 和组件

// 引入vue
    import Vue from 'vue'
    // 导入路由
    import Router from 'vue-router'
    // 导入模板
    import home from '@/components/home'
    import about from '@/components/about'

路由会被main.js引入

原文地址：https://segmentfault.com/a/1190000012781652

更多专业前端知识，请上 **【猿2048】www.mk2048.com**