美文网首页
Vue 目录结构

Vue 目录结构

作者: 母鸡啊 | 来源:发表于2017-08-18 15:15 被阅读62次

    一级目录:

    文件夹

    • 1 build 和 config 是 webpack 相关目录
    • 2 nodemodle 是npm install 安装的依赖代码库
    • 3 src 是我们存放的源码

    文件

    • babelrc文件
    {
    //presets表示预设
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
    //commons 生成之后是否生成注释
    //plugins除了预设之外配置的
      "plugins": ["transform-runtime"],
      "env": {
        "test": {
          "presets": ["env", "stage-2"],
          "plugins": ["istanbul"]
        }
      }
    }
    
    • editorconfig 编译器配置文件
    root = true
    
    [*]
    charset = utf-8    //编码格式
    indent_style = space  //缩进风格 space 以空格
    indent_size = 2     //缩进大小  2 两个
    end_of_line = lf      //换行风格  lf Linux 和mac
    insert_final_newline = true     //创建一个文件在文件末尾插入一个新行
    trim_trailing_whitespace = true //自动移除行未空格
    
    
    • eslintignore 忽略语法检查的目录文件
    //忽略一级目录 build 和 config 
    build/*.js
    config/*.js
    
    
    • eslintrc eslint 的配置文件
    
    module.exports = {
      root: true,
      parser: 'babel-eslint',
      parserOptions: {
        sourceType: 'module'
      },
      env: {
        browser: true,
      },
      // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
      extends: 'standard', //表示集成一个标准的规则
      // required to lint *.vue files
      plugins: [
        'html'
      ],
      // add your custom rules here
      'rules': { //
        // allow paren-less arrow functions
        'arrow-parens': 0,//箭头函数前面不写括号
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
      }
    }
    
    
    • gitignore git 忽略文件
    .DS_Store
    node_modules/
    dist/
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    test/unit/coverage
    test/e2e/reports
    selenium-debug.log
    
    # Editor directories and files
    .idea
    *.suo
    *.ntvs*
    *.njsproj
    *.sln
    
    
    • index.html 入口文件
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
        <title>vuemt1</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    • package.json 项目配置文件
    {
      "name": "vuemt1",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "juanqiang",
      "private": true,
      "scripts": {//我们可以执行的一些命令(可以配置一些脚本) 如:npm run dev 
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js",
        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
      },
      "dependencies": {//生产环境的依赖
        "mint-ui": "^2.2.9",
        "muse-ui": "^2.1.0",
        "vue": "^2.3.3",
        "vue-router": "^2.6.0"
      },
      "devDependencies": {//编译环境的依赖
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^7.1.1",
        "babel-loader": "^7.1.1",
        "babel-plugin-component": "^0.10.0",
        "babel-plugin-istanbul": "^4.1.1",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chai": "^3.5.0",
        "chalk": "^2.0.1",
        "chromedriver": "^2.27.2",
        "connect-history-api-fallback": "^1.3.0",
        "copy-webpack-plugin": "^4.0.1",
        "cross-env": "^5.0.1",
        "cross-spawn": "^5.0.1",
        "css-loader": "^0.28.0",
        "cssnano": "^3.10.0",
        "eslint": "^3.19.0",
        "eslint-config-standard": "^6.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-html": "^3.0.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^2.0.1",
        "eventsource-polyfill": "^0.9.6",
        "express": "^4.14.1",
        "extract-text-webpack-plugin": "^2.0.0",
        "file-loader": "^0.11.1",
        "friendly-errors-webpack-plugin": "^1.1.3",
        "html-webpack-plugin": "^2.28.0",
        "http-proxy-middleware": "^0.17.3",
        "inject-loader": "^3.0.0",
        "karma": "^1.4.1",
        "karma-coverage": "^1.1.1",
        "karma-mocha": "^1.3.0",
        "karma-phantomjs-launcher": "^1.0.2",
        "karma-phantomjs-shim": "^1.4.0",
        "karma-sinon-chai": "^1.3.1",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.31",
        "karma-webpack": "^2.0.2",
        "less": "^2.7.2",
        "less-loader": "^4.0.5",
        "lolex": "^1.5.2",
        "mocha": "^3.2.0",
        "nightwatch": "^0.9.12",
        "opn": "^5.1.0",
        "optimize-css-assets-webpack-plugin": "^2.0.0",
        "ora": "^1.2.0",
        "phantomjs-prebuilt": "^2.1.14",
        "rimraf": "^2.6.0",
        "selenium-server": "^3.0.1",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "sinon": "^2.1.0",
        "sinon-chai": "^2.8.0",
        "style-loader": "^0.18.2",
        "url-loader": "^0.5.8",
        "vue-loader": "^12.1.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.3.3",
        "webpack": "^2.6.1",
        "webpack-bundle-analyzer": "^2.2.1",
        "webpack-dev-middleware": "^1.10.0",
        "webpack-hot-middleware": "^2.18.0",
        "webpack-merge": "^4.1.0"
      },
      "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }
    
    

    相关文章

      网友评论

          本文标题:Vue 目录结构

          本文链接:https://www.haomeiwen.com/subject/qykarxtx.html