美文网首页工作生活
vue3.8脚手架目录详解

vue3.8脚手架目录详解

作者: John_Phil | 来源:发表于2019-07-04 21:11 被阅读0次
    vue3.8目录
    dist:打包好的工程目录默认地址
    node_modules:node安装的依赖包
    public:静态文件存放地
    --index.html:显示的主页面
    src:vue文件主要编写地
    --assets:静态资源js,css等存放地
    --compnents:vue模块
    App.vue:主vue模块 引入其他模块
    main.js:页面程序入口,加载公共组件
    package.json:模块基本信息项目开发所需要模块,版本,项目名称
    package-lock.json:是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个
    npm package的具体来源和版本号。
    babel.config.js:babel是一个用来将ECMAScript 2015+的代码转换成旧版浏览器支持的版本的工具
    .gitignore:git上传需要忽略的文件格式

    index.html:

    说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在#app节点下,内容通过vue组件填充。


    主页面 vue模块

    App.vue文件:

    说明:app.vue是项目的主组件,所有页面都是在app.vue下切换的。一个标准的vue文件,分为三部分。
    第一装写html代码在<template></template>中,一般在此下面只能定义一个根节点;
    第二<script></script>标签;
    第三<style scoped></style>用来写样式,其中scoped表示。该style作用于只在当前组件的节点及其子节点,但是不包含子组件呦。
    <router-view></router-view>是子路由视图,后面的路由页面都显示在此处,相当于一个指示标,指引显示哪个页面。


    vue主文件

    main.js:

    说明:入口文件来着,主要作用是初始化vue实例并使用需要的插件。比如下面引用了4个插件,(components里面是引用的插件)


    项目依赖组件
    {
      "name": "secondproject",//模块名称
      "version": "1.0.0",//模块版本
      "description": "A Vue.js project",//对模块的描述
      "author": "datura",//作者是谁
      "private": true,//如果值为true,npm将拒绝发布它
      "scripts": {//值是一个对象,里面指定了项目的生命周期各个环节需要执行的命令
        "dev": "node build/dev-server.js",//这个就是在命令行执行npm run dev,其实是运行dev-server.js文件
        "build": "node build/build.js",//build命令(有一个钩子的概念:比如这个build有prebuild和postbuild
        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",//babel是一个编译器,可以把ES6编译成ES5.,这句先是设置编译环境为test环境下;karma是一个运行时,它产生一个web服务环境来运行项目代码,并执行测试。..
        "e2e": "node test/e2e/runner.js",//e2e模拟用户行为的测试,端到端测试
        "test": "npm run unit && npm run e2e"//执行单元测试和e2e测试
      },//关于npm钩子:通常程序只能处理来自内部的消息,如果希望对外部发来的消息也能拦截处理,就需要用到Hook技术。比如想在run build之前自动执行点任务,可以将其写在run prebuild标签里;postbuild在build之后自动执行
      "dependencies": {//配置模块依赖的模块列表,key是模块名称,value是版本范围,版本范围是一个字符,可被一个或多个空格分割。
        "router": "^1.3.0",//路由版本
        "vue": "^2.2.1",//vue版本
        "vue-resource": "^1.2.1",//一个插件,通过xmlHttpRequest或jsonp发起请求并处理响应。
        "vue-router": "^2.3.0"//
      },
      "devDependencies": {//这里写的依赖是用于开发环境的,不发布到生产环境。
        "autoprefixer": "^6.7.2",
        "babel-core": "^6.22.1",
        "babel-loader": "^6.2.10",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-latest": "^6.22.0",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^1.1.3",
        "connect-history-api-fallback": "^1.3.0",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.26.1",
        "eventsource-polyfill": "^0.9.6",
        "express": "^4.14.1",
        "extract-text-webpack-plugin": "^2.0.0",
        "file-loader": "^0.10.0",
        "friendly-errors-webpack-plugin": "^1.1.3",
        "function-bind": "^1.1.0",
        "html-webpack-plugin": "^2.28.0",
        "http-proxy-middleware": "^0.17.3",
        "webpack-bundle-analyzer": "^2.2.1",
        "cross-env": "^3.1.4",
        "karma": "^1.4.1",
        "karma-coverage": "^1.1.1",
        "karma-mocha": "^1.3.0",
        "karma-phantomjs-launcher": "^1.0.2",
        "karma-sinon-chai": "^1.2.4",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.26",
        "karma-webpack": "^2.0.2",
        "lolex": "^1.5.2",
        "mocha": "^3.2.0",
        "chai": "^3.5.0",
        "sinon": "^1.17.7",
        "sinon-chai": "^2.8.0",
        "inject-loader": "^2.0.1",
        "babel-plugin-istanbul": "^3.1.2",
        "phantomjs-prebuilt": "^2.1.14",
        "chromedriver": "^2.27.2",
        "cross-spawn": "^5.0.1",
        "nightwatch": "^0.9.12",
        "selenium-server": "^3.0.1",
        "semver": "^5.3.0",
        "opn": "^4.0.2",
        "optimize-css-assets-webpack-plugin": "^1.3.0",
        "ora": "^1.1.0",
        "rimraf": "^2.6.0",
        "url-loader": "^0.5.7",
        "vue-loader": "^11.0.0",
        "vue-style-loader": "^2.0.0",
        "vue-template-compiler": "^2.2.1",
        "webpack": "^2.2.1",
        "webpack-dev-middleware": "^1.10.0",
        "webpack-hot-middleware": "^2.16.1",
        "webpack-merge": "^2.6.1"
      },
      "engines": {//指定项目运行的node或者npm版本范围,有点像安卓的指定开发level哦
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
      },
      "browserlist": [//在不同的前端工具之间共享目标浏览器的库,确定哪些支持哪些版本的浏览器
        "> 1%",//全球有超1%的人使用的浏览器
        "last 2 versions",//根据CanIUse.com追踪的最后两个版本的所有浏览器
        "not ie <= 8"//排除先前查询选择的浏览器    天啦噜 英语不好是硬伤 不知怎么翻译好理解
      ]
    }
    
    项目版本信息

    忽略文件的原则是:
    忽略操作系统自动生成的文件,比如缩略图等;
    忽略编译生成的中间文件、可执行文件等,也就是如果一个文件是通过另一个文件自动生成的,那自动生成的文件就没必要放进版本库,比如Java编译产生的.class文件;
    忽略你自己的带有敏感信息的配置文件,比如存放口令的配置文件。
    下面我们看看常用的规则:
    1)/mtk/ 过滤整个文件夹
    2).zip 过滤所有.zip文件
    3)/mtk/do.c 过滤某个具体文件
    需要注意的是,gitignore还可以指定要将哪些文件添加到版本管理中:
    1)!
    .zip
    2)!/mtk/one.txt

    唯一的区别就是规则开头多了一个感叹号,Git会将满足这类规则的文件添加到版本管理中。
    为什么要有两种规则呢?想象一个场景:假如我们只需要管理/mtk/目录中的one.txt文件,这个目录中的其他文件都不需要管理,那么我们就需要使用:
    1)/mtk/
    2)!/mtk/one.txt

    说明:如果你不慎在创建.gitignore文件之前就push了项目,那么即使你在.gitignore文件中写入新的过滤规则,这些规则也不会起作用,Git仍然会对所有文件进行版本管理。因此一定要养成在项目开始就创建.gitignore文件的习惯,否则一旦push,处理起来会非常麻烦。


    忽略文件

    相关文章

      网友评论

        本文标题:vue3.8脚手架目录详解

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