美文网首页
Vue-cli 项目目录解析

Vue-cli 项目目录解析

作者: Harley_L | 来源:发表于2018-12-28 14:09 被阅读8次

    先来了解一下开发环境,测试环境,生产环境:

    开发环境:就是程序猿(媛)们专门用于开发的环境。配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。

    生产环境:是指正式提供对外服务的服务器,上线的项目都必须上传到这里。一般会关掉错误报告,打开错误日志。

    测试环境:克隆一份生产环境的配置,测试妹子的工作环境。一个程序在测试环境工作不正常,那么肯定不能把它发布到生产机上。

    目录解析:

    build —— 构造

        build.js —— 生产环境构建操作
        check-versions.js —— 版本检查(npm,node)
        utils.js —— 相关工具的构建(各种loader)
        vue-loader.conf.js ——  .vue文件 解析 配置 加载
        webpack.base.conf.js —— webpack基础配置
        webpack.dev.conf.js —— webpack开发环境配置
        webpack.prod.conf.js —— webpack生产环境构建配置
    

    config —— 配置

        dev.env.js —— 开发环境变量
        index.js —— 开发环境的配置(设置端口,自动打开浏览器……)
        prod.env.js —— 生产环境变量
    

    node_modules —— 模块依赖

          ……………………………………(都是一些项目依赖包,别人接手你的项目的时候,千万不要把这个文件夹复制给别人。。。)
    

    src —— 项目路径

        (我们的项目)
        api —— 后台接口文件夹
        common —— 通用资源文件夹(图片,字体,样式……)
        components —— 非路由组件文件夹
        filter —— 自定义过滤器文件夹
        mock —— 模拟数据接口文件夹
        router —— 路由文件夹
        store —— VueX配置文件夹
        pages —— 路由组件文件夹
        App.vue —— 父组件
        main.js —— 项目入口文件
    

    static —— 静态资源

        全局样式,图片……
        .gitkeep —— 即使你这个文件夹里什么都没有,也会被git传上去<br/><br/>
    

    .babelrc —— babel (ES6转ES5)

    .editorconfig ——各种编辑器代码风格配置

    .gitignore —— 版本控制

    .postcssrc —— CSS打包兼容

    index.html —— 经过我们一手开发的传说中的SPA

    package.json —— 项目依赖模块说明书(还可以配置某些npm命令)

    package-lock.json —— 同上 只不过给各种依赖包标明了版本号 目的是防止依赖包版本不同出现不同运行结果

    README.md —— 你可以在这里键入你任何想对老板说的话

    VS Code开发Vue推荐插件

      Auto Close Tag —— 自动闭合HTML/XML标签

      Auto Rename Tag —— 自动完成另一侧标签的同步修改

      Chinese (Simplified) Language Pack for Visual Studio Code —— VS中文语言包

      JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

      Path Intellisense —— 自动路径补全

      Vetur —— 语法高亮、智能感知、Emmet等
    包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

      language-stylus —— stylu语法支持

      Code Runner —— 右键运行代码

    VS Code用户设置推荐

    {
        "files.autoSave": "afterDelay",  —— 自动保存
        "editor.wordWrap": "on", ——自动换行
        "editor.colorDecorators": true, —— 内联颜色修饰
        "extensions.ignoreRecommendations": true, —— 关闭推荐扩展通知
        "emmet.includeLanguages": {   ——  .vue文件识别HTML标签
            "vue-html": "html",
            "vue":"html"
        }
        "languageStylus.useSeparator": true,
        "languageStylus.useBuiltinFunctions": true,
        "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
    }
    

    相关文章

      网友评论

          本文标题:Vue-cli 项目目录解析

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