vue-cli#2.0项目结构分析

Posted 2021-01-20

项目结构

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