美文网首页
Vue项目目录结构

Vue项目目录结构

作者: biyu6 | 来源:发表于2019-05-12 13:48 被阅读0次

1.vue项目目录结构:

build 配置了webpack的基本配置、开发环境配置、生产环境配置等
config 配置了webpack路径端口值等
node_modules 安装依赖代码块
src 存放源码和资源文件
    assets: 静态资源,如图片等
    components:组文件夹,放vue组件
    App.vue:根组件,所有页面都是在App.vue下进行切换的,也可以理解为所有的路由也是App.vue的子组件。
    main.js:入口js文件,主要作用是初始化vue实例并使用需要的插件。
static 存放第三方静态资源的
.babelrc 转换浏览器识别的JS语法(ES6、ES7)
.editorconfig 编辑器配置文件
.gitignore 上传git的忽略配置文件
index.html 文件入口
package-lock.json/package.json 项目的包配置文件

2.vue组件说明:

一个vue组件(.vue文件),里面对应有template、script、style三大模块
    template:类似于html
    script:类似于script
    style:类似于样式

3.vue组件引用路径的问题

1.同一文件夹下引用:
  ./文件名.vue
2.
  A文件路径:X/A/a.vue
  B文件路径:X/B/C/b.vue
  b中引用a:../../A/a.vue
../往自己所在的文件夹上跳一级,直到找到自己要引用的另一个文件的文件夹,然后再往下

相关文章

  • vue项目目录结构及解释

    vue项目目录结构及解释

  • Vue项目 重点

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

  • Vue ERROR Failed to compile with

    Vue 项目中,引用vue组件,该组件是发布成npm包引入的,组件的目录结构和项目的目录结构相似。报错因素 组件中...

  • Vue项目目录结构

    1.vue项目目录结构: 2.vue组件说明: 3.vue组件引用路径的问题

  • 2020-09-25

    推荐-Vue项目目录结构 目录结构保持一致,使得多人合作容易理解与管理,提高工作效率。Vue标准项目 #简要说明 ...

  • mpVue 小程序开发笔记

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

  • Vue项目目录结构解析

    2020-07-28 Vue项目目录结构解析 build 项目构建(webpack)相关...

  • vue 目录结构

    ##vue项目目录结构 -- buildConfig //构建脚本 site -- default.js -...

  • vue-cli4封装组件并发布到npm

    第一步:创建vue项目vue create myproject第二步:调整项目结构将原来的项目目录按下图结构重新设...

  • vue-cli2、3结构对比

    # Vue-cli2目录结构/Vue-cli3目录结构 ###Vue-cli2目录结构 ```javascript...

网友评论

      本文标题:Vue项目目录结构

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