vue-cli脚手架生成项目文件中一级目录和文件的用途介绍

责编:menVScode 2017-11-22 23:20 阅读(1231)

.idea文件夹:使用webstorm打开项目的时候,就会在目录下创建这个文件夹,里面是配置webstorm相关的内容。如果不是用webstorm打开,可能就没有这个文件夹了。

build文件夹:配置webpack相关的文件。

config文件夹:生产环境、开发环境的配置参数。

node_modules文件夹:安装的第三方依赖。

src文件夹:开发项目时,写的源码;这个目录下的文件,会被webpack进一步处理。

       App.vue:单文件组件;

       main.js

/* eslint-disable no-new */
//上面注释的含义:下方代码忽略eslint代码风格检查
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

static文件夹:放置第三方资源

    .gitkeep:当创建空文件夹的时候,提交到git项目的时候是提交不上去的,会忽略掉空白文件夹。若想要空文件夹也要上传上去,需要在空文件夹里创建 .gitkeep文件。

.babelrc文件:做项目的时候使用es6语法,有些浏览器并一定支持,需要把es6语法转化为es5语法。有些语法处在草案阶段,浏览器还没有实现,同时我们想要使用这些高级特性,也需要把这些草案阶段语法转化为es5语法。我们用到的编译器是babel,当启动babel的时候,会在项目目录下寻找.babelrc,然后读取里面的配置。

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

.babelrc文件分析解释

{

  "presets": [ // presets 预设,预设插件,我们把es6的转化成es5的,要用到各种各样的插件

    ["env", { "modules": false }], // 在node_modules目录下->babel-preset-env->package.json文件,其里面用到各种各样的插件,每一个都是做不同功能的。modules是配置模块的一些风格,设置false,当es6文件转化为es5文件的时候,不设置任何的编码风格。如果想要CMD、AMD风格,可设为"modules": "cmd" 或者 "modules": "amd"。

    "stage-2" // stage是草案阶段的,草案分四个阶段:0是包含0到3阶段的;2是包含2到阶段的3;如果数字越小包含的内容的越多。在node_modules目录下有babel-preset-stage-2,babel-preset-stage-3。

  ],

  "plugins": ["transform-runtime"], // 设置插件,设置transform-runtime插件,其作用是将es6中的一些方法转成es5的;比如:object.from。

  "comments": false, // 把es6语法转成es5之后,代码里是不增加注释的。

  "env": {
    "test": { //test用在测试的时候
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

.editorconfig文件:是编辑器使用的,可以规定文件的编码

root = true

[*]
charset = utf-8 //规定文件的编码
indent_style = space // 用 空格 进行缩进
indent_size = 2 // 两个空格
end_of_line = lf // 换行的时候使用lf风格
insert_final_newline = true // 新建一个文件之后,可以在文件末尾插入新行
trim_trailing_whitespace = true // 在代码后面存在很多空格的时候,可以忽略掉

.eslintignore文件:代码检查的时候,可设置忽略文件,

//不对这个两个目录下的代码风格进行检查
build/*.js
config/*.js

.gitignore文件:在使用git提交项目的时候,忽略某些文件或者文件夹

.postcssrc.js文件:预先设置css规则

index.html文件:项目模板

package.json文件:整个项目的描述,配置。

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": { // 项目在生产的时候,在环境里依赖的
    "vue": "^2.5.2", // ^:表示在更新项目的时候,可以加载最新的版本
    "vue-router": "^3.0.1"
  },
  "devDependencies": { // 项目开发的时候的依赖
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack-bundle-analyzer": "^2.9.0",
    "node-notifier": "^5.1.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "portfinder": "^1.0.13",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": { // 引擎的版本
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [ // 浏览器列表
    "> 1%", // 市场份额要大于百分之一
    "last 2 versions", // 主流浏览器最新的两个版本都支持
    "not ie <= 8" // 不支持ie8以下的浏览器
  ]
}
标签: vue-cli 脚手架
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码