美文网首页
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 项目目录解析

    先来了解一下开发环境,测试环境,生产环境: 开发环境:就是程序猿(媛)们专门用于开发的环境。配置可以比较随意, 为...

  • vue-cli 其他配置根目录下相关配置解析

    vue-cli 其他配置根目录下相关配置解析 这是根目录下相关文件解析 .babelrc es6编译相关配置 相关...

  • Vue-cli的学习记录

    一、vue-cli的安装 1、通过npm全局安装vue-cli: 2、初始化项目: 3、进入项目目录 4、安装模块...

  • vue-cli:RSA加密

    vue-cli:RSA加密 在vue-cli的项目文件目录下: 在项目路径src下新建文件夹plugins(用于存...

  • vue-cli 项目搭建(二)

    一、vue-cli目录结构 在vue-cli项目搭建(一)(https://www.jianshu.com/p/f...

  • mpVue 小程序开发笔记

    新建项目需要安装命令行工具vue-cli 目录结构 目录结构dist/:项目编译后文件src/:mpVue代码 添...

  • mpvue+iview weapp的使用方法,超详细--备份

    mpvue 快速5分钟搭建 2.mpvue项目目录解析 mpvue项目目录解析 3.iview weapp的引入【...

  • vue-cli搭建项目

    使用 vue-cli 搭建项目 目录结构及其对应作用 通过vue-cli搭建一个vue项目,会自动生成一系列文件,...

  • Vue项目 重点

    Vue项目 重点 01 vue-cli创建项目结构 来到项目所希望的目录 -》打开cmd vue init we...

  • vue-cli构建的项目中如何使用Less

    vue-cli构建项目 构建项目的项目是默认不支持Less的,需要进入项目目录,安装less、less-loade...

网友评论

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

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