精华内容
下载资源
问答
  • 2021-04-06 15:07:30
    1. /dist——打包之后的文件夹,此文件夹被发布到真正的服务器上,项目完成之后,执行npm run build会形成此文件夹

    2. /public——此目录下的文件并不会被Webpack处理,它们会直接被复制到最终的打包目录,即/dist下,此文件夹里存放一些不会变动的文件,比如项目运行在浏览器时显示的小图标

    3. /node_modules——保存npm加载的项目依赖模块,即第三方包所存放的目录,使用npm install可以下载

    4. /src——存放源代码

      • /src/api——接口文件目录,即连接服务器接口时所写代码的存放目录
      • /src/assets——存放项目所包含的图片以及css样式,为了结构更加清晰,通常又创建img文件夹和css文件夹,分别来存放图片和样式
      • /src/components——公共组件目录,存放项目里所包含的公共组件
      • /src/router——路由文件,在/src/router文件夹里创建router.js文件,设置路由映射关系
      • /src/store——VueX所存放的目录,用来定义全局数据
      • /src/utils——公共函数文件目录,用来保存一些js文件
      • /src/views——视图组件,包含项目里所包含的一些详细的组件,但又不是公用的组件
    5. main.js——入口文件,初始化vue实例并使用需要的插件

    6. App.vue——主组件,所有页面都是在App.vue下进行切换的

    更多相关内容
  • vue项目目录结构详解

    2022-05-18 17:08:43
    |-- build 构建脚本目录 |--build.js ---- 生产环境构建脚本 |--build-server.js ---- 运行本地构建服务器,可以访问构建后的页面 |--dev-client.js ---- 开发服务器热重载脚本,主要用来实现开发阶段的页面自动...

    vue项目目录结构详解

         |-- build 构建脚本目录
              |--build.js ---- 生产环境构建脚本
              |--build-server.js ---- 运行本地构建服务器,可以访问构建后的页面
              |--dev-client.js ---- 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
              |--dev-server.js ---- 运行本地开发服务器
              |--check-version.js ---- 检查npm、node.js版本
              |--utils.js ---- 构建相关工具方法
              |--vue-loader.conf.js ---- 配置css加载器以及编译css之后自动添加前缀
              |--webpack.base.conf.js ---- webpack基本配置
              |--webpack.dev.conf.js ----- webpack开发环境配置
              |--webpack.prod.conf.js ---- webpack生产环境配置
          |-- config:项目配置
              |-- dev.env.js ---- 开发环境变量
              |-- index.js ---- 项目配置文件
              |-- prod.env.js ---- 生产环境变量
              |-- test.env.js ---- 测试环境变量
          |-- node_modules:npm加载项目的依赖模块
          |-- package.json
          |-- src (源码目录,名称不可修改)
              |-- rassets​:资源文件,比如存放 css,图片等资源。
              |-- component​:组件文件夹,用来存放 vue 的公共组件(注册于全局,在整个项目中通过关键词便可直接输出)
              |-- router​:用来存放 ​index.js​,这个 js 用来配置路由
              |-- ​tool​:用来存放工具类 js,将 js 代码封装好放入这个文件夹可以全局调用(比如常见的​ api.js​,​http.js​ 是对 http 方法和 api 方法的封装)。
              |-- ​views​:用来放主体页面,虽然和组件文件夹都是 vue 文件,但 views 下的 vue 文件是可以用来充当路由 view 的。
              |-- main.js​:是项目的入口文件,作用是初始化 vue 实例,并引入所需要的插件。
              |-- ​app.vue​:是项目的主组件,所有页面都是在该组件下进行切换的。
          |-- static 静态资源目录。不会被webpack构建
          |-- package.json:npm包配置文件,定义项目的npm脚本、依赖包等信息
          |-- README.md:项目的说明文档,markdown格式   
          |-- .gitignore   
    
    展开全文
  • 本章我们会对一个 Vue 项目目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等。

    前言

    本章我们会对一个 Vue 项目的目录结构进行讲解,解释各子目录以及文件的作用,前端的模块化,Vue 单文件组件规范等。

    1、基础目录和文件介绍


    在上一章,我们通过 vue-cli 创建了一个新的项目,生成的项目目录里已经包含了基础的项目通用目录和文件。在这一小节我们就这些基础目录和文件进行介绍,后续存在新增目录和文件的情况再作说明。

    image.png

    README.md

    README 顾名思义“读我”,其存在的意义便是让别人或着说开发者能更快更直观的了解项目,以便别人拿到项目源码后,能快速的了解项目的结构、技术栈、开发规范、运行和部署等。一个好的 README.md 应至少具备以下内容:

    • 项目的背景介绍和应用场景。
    • 项目上手指南,比如项目依赖的环境和工具的安装步骤、版本说明、常用命令。
    • 源代码的目录树介绍,核心文件的说明。
    • 大型项目还应增加架构图、开发规范标准。
    • 开源项目则可注明开源协议以及用法示例。

    package.json

    每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。我们以 vue-cli 生成的 package.json 为基本参考并适当的添加一些常见属性进行说明。

    // vue-cli 生成的默认模板
    {
      "name": "hello-world",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "^4.1.2",
        "@vue/cli-plugin-eslint": "^4.1.2",
        "@vue/cli-service": "^4.1.2",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "babel-eslint"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }
    

    基础属性

    name: 项目名称(必须)。

    version: 项目版本(必须)。

    private: 设置为true时,npm将拒绝发布它,可防止意外发布私有存储库。

    description: 项目的描述。

    keywords: 设置关键词,这是一个字符串数组。这有助于别人在 npm 搜索中发现你的项目。

    scripts

    scripts 指定了运行脚本命令的npm命令行缩写,比如serve指定了运行npm run serve时,所要执行的命令vue-cli-service serve。除了运行基本的 scripts 命令,还可以结合 pre 和 post 完成前置和后续操作。我们在原来的 scripts 中新增test pretest posttest的命令配置:

    image.png

    在项目根目录分别创建这三个文件并写下一句 console 代码:

    // index.js
    console.log("scripts: index.js")
    
    // beforeIndex.js
    console.log("scripts: before index.js")
    
    // afterIndex.js
    console.log("scripts: after index.js")
    

    当我们执行npm run test命令时,输出结果如下:
    image.png
    可以看到,三个命令都执行了,执行顺序是 pretest → test → posttest。

    dependencies 和 devDependencies

    dependencies字段指定了项目运行所依赖的模块,devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。

    image.png

    在这里,dependencies 下的core.js包和vue包会被编译到最终生成的文件中,而 devDependencies 下的这些包不会被编译进去,因为这些提供的功能(语法转换、开发服务器、语法检查、vue的编译器)仅在开发阶段用到。
    其中,依赖模块的版本可以加上各种限定,主要有以下几种:

    • 指定版本: 比如1.2.2,遵循大版本.次要版本.小版本的格式规定,安装时只安装指定版本。

    • 波浪号+指定版本: 比如~1.2.2,表示安装1.2.x的最新版本(不低于1.2.2),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。

    • 插入号+指定版本: 比如ˆ1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x,也就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。

    • latest: 安装最新版本。

    值得一提的是,通常我们首次从远程仓库拿到项目代码后,需要先执行npm installnpm i(不指定包名)来安装项目的所有依赖,这时候 npm 就是根据这里记录的信息去安装依赖。细心的你可能已经发现,我们在聊 npm 的时候,提到过依赖和开发依赖,当你执行这样的命令(npm i 包名 -Dnpm i 包名 --save-dev)时,安装的依赖将作为开发依赖记录到 devDependencies 里。

    eslintConfig

    这里是进行 eslint(JavaScript 代码检测工具) 的语法规则配置。除了在 package.json 中配置,我们更推荐的做法是单独在项目根目录下创建.eslintrc.js.eslintrc.json进行语法检查规则的配置,具体的配置规则可在 https://eslint.org/ 查阅。

    browserslist

    指定了项目需要适配的浏览器范围。这个值会被 @babel/preset-env(使我们的 JavaScript 代码能够运行在当前和旧版本的浏览器或其他环境中的工具) 和 Autoprefixer (浏览器前缀处理工具)用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

    其他

    上面可能出现了一些你不熟悉的依赖包或工具,但你现在并不需要完全了解它,它们将在项目的底层发挥作用,使我们获得更好的开发体验,完整的 package.json 属性可在 https://docs.npmjs.com/cli/v8/configuring-npm/package-json 查阅。

    package-lock.json

    这个文件是在执行在npm install的时候自动生成,用以记录当前状态下实际安装的各个依赖包的具体来源和版本号以及这个模块又依赖了哪些依赖。你可以简单的理解为对 package.json 里 dependencies 和 devDependencies 的精确描述。在 package.json 里的记录都类似"core-js": "^3.6.5"的大版本指定。当某个依赖进行小版本更新时,可能导致依赖它的其他包出现问题。所以 package-lock.json 目的就是确保所有库包与你上次安装的完全一样,当存在 package-lock.json 文件时其下载速度也会更快。

    babel.config.js

    上面我们提到过babel作为转译工具使我们的 JavaScript 代码正常运行在旧的或不支持新语法和api的环境。而这个文件就是用来进行 babel 配置的,通常我们不会过于细节的对目标环境会涉及的哪些语法进行转换而进行一一配置,而是通过@babel/preset-env这个包进行“智能”预设。实际上 vue-cli 已经帮我们做好这些工作,你可以在本地依赖目录找到它:

    image.png

    .gitignore

    关于git的内容我们甚至应该单独开一个章节去说明,因为这确实是实际开发必不可少的工具。但在这个 Vue 的学习系列课程中,先暂时抑制下我们的求知欲望,待结束该系列的学习后,再来详细的学习 git 工具的用法。这里先大概对它进行一个介绍。

    可以说,在多人共同开发的项目里面 git 是保证代码同步、实现版本控制的最佳实践。简单点来讲,就是你和其他人的代码有一个公共的代码仓库,你和其他人需要定时的去向公共仓库上传你们新增或更改的代码和从中拉取最新的代码,这时候.gitignore文件就负责标记哪些目录或文件是不需要上传上去的,比如之前提到的node_modulesdist目录,或者自己写的一些测试文件。

    src

    在这之前介绍到的文件几乎都是项目的一些配置文件,src目录包含的算是我们真正的“源代码”了,也是我们开发的主战场即项目涉及到的页面、样式、脚本都集中在此编写。

    public

    任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack(vue-cli依赖的打包工具)。你需要通过绝对路径来引用它们。注意我们推荐将资源作为你的模块依赖图的一部分导入,这样它们会通过 webpack 的处理并获得如下好处:

    • 脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。
    • 文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。
    • 最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。

    通常,我们只需要关注public/index.html这个文件,它会在构建过程中被注入处理后的 JavaScript 和 CSS 等的资源链接。同时,它也提供了 Vue 实例挂载的目标。

    node_modules

    之前提到过,当前项目所需依赖的保存目录。

    .git

    上面说到,我们在多人共同开发的项目里,会使用 git 来进行代码的管理。项目本地的.git就是用来管理 git 仓库的目录,其中记录了项目仓库的配置信息、代码的各个版本和提交记录、多分支代码的记录、本地暂存区二进制文件、一些 shell 脚本等等。

    2、Vue 单文件组件

    上一小节我们熟悉了 Vue 项目根目录各个文件和目录的作用,现在我们深入src目录进行“代码级”的学习。

    image.png

    src 下面的目录结构:

    • main.js:默认为整个项目的入口文件。
    • App.vue:是项目的主组件,页面的入口文件。
    • assets:静态资源存放目录,和 public 目录不同的是这个目录会被打包处理,需要使用相对路径进行引用。
    • components:组件存放目录,项目的公共组件可以存放在此供其他地方使用。

    main.js 作为我们项目的入口文件,可以看到它初始化了 Vue 实例,而这个实例就是我们项目的根实例。在其参数选项里多了一个render: h => h(App),其作用通过创建VNode(后续在深入Vue原理时再讲)的方式指定我们的挂载模板,当没有指定templaterender的情况下会将我们挂载的 Dom 元素的 HTML 作为模板。如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。这里我们回头看一看public/index.html,里面就放置了一个待挂载的<div id="app"></div>

    image.png

    在这里,你会发现出现了import xxx from xxx的语法。假设你没有其他语言的使用经验,那么先介绍一下前端的模块化规范

    ES Module

    通常一个项目都会去依赖大量的第三方模块或提取自己的模块来避免重复“造轮子”,以提升开发效率。当我们按照传统的 HTML 引入多个<script>来集成我们需要的脚本能力时,会遭遇以下挑战:

    • 请求过多: 我们要依赖多个 JavaScript 文件时,通过一一引入的方式,那样就会发送多个请求,导致请求过多。
    • 依赖模糊: 我们不知道他们的具体依赖关系是什么,也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
    • 难以维护: 基于以上两条,当我们项目拥有大量模块需要管理时,很可能出现牵一发而动全身的情况,导致项目出现严重的问题。

    而上面这些问题可以通过模块化规范来解决,目前流行的 JavaScript 模块化规范有CommonJSAMDCMD以及ES Module,现在仅就 main.js 中出现的import xxx from xxx也就是ES Module进行简单说明。ES Module把一个文件当作一个模块,每个模块有自己的独立作用域,那如何把每个模块联系起来呢?核心点就是模块的导入(import)与导出(export)。

    // 我们在main.js同级目录下创建moduleA.js文件,其中代码如下
    
    let student = {
        name: '李四',
        age: 21
    }
    
    export function getName() {
        return student.name
    }
    
    export function getAge() {
        return student.age
    }
    
    // 在main.js使用import使用
    import { getAge, getName } from './moduleA.js'
    
    console.log(getAge(), getName())
    

    现在我们查看浏览器控制台,可以发现main.js可正常使用getAge(), getName():

    image.png

    除了使用export进行导出,还可以使用export default导出,需要注意的是:

    • 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
    • 通过 export 方式导出,在导入时要加{ },export default 则不需要。
    // moduleA.js文件,修改代码如下
    
    let student = {
        name: '李四',
        age: 21
    }
    
    function getName() {
        return student.name
    }
    
    function getAge() {
        return student.age
    }
    
    export default {
        getName,
        getAge
    }
    
    // 在main.js修改import的引入方式
    import moduleA from './moduleA.js'
    
    console.log(moduleA.getAge(), moduleA.getName())
    

    Vue 单文件组件规范

    .vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template><script><style>。最后他们将组装成一个 ES Module,它的默认导出是一个 Vue.js 组件选项的对象。在main.js中,这个被导入并使用的对象是来自APP.vue,那么现在我们开始聚焦于 App.vue 文件。

    image.png

    模板

    • 每个 .vue 文件最多包含一个 <template> 块。
    • <template> 块只能有一个根元素。

    脚本

    • 每个 .vue 文件最多包含一个 <script> 块。
    • 这个脚本会作为一个ES Module来执行。
    • 它的默认导出应该是一个 Vue.js 的组件选项对象。
    • 组件选项对象中的data必须是个函数,以便每个实例可以维护一份被返回对象的独立的拷贝。

    样式

    • 一个 .vue 文件可以包含多个 <style> 标签。
    • <style> 标签可以有 scoped 或者 module 属性 (查看 scoped CSSCSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。

    内容预告

    本章我们介绍了 Vue 项目目录结构以及初步认识了 Vue 单文件组件,下一章我们将在单文件组件的方式下继续进行 Vue 知识的学习,包括一些常用指令、条件渲染、列表渲染等。

    展开全文
  • 项目开发流程 划分目录 引用两个css文件 项目模块划分:tabbar->路由映射关系 ...目录结构 注意看每个文件的后缀名,没有后缀的就是文件夹。 src assets 静态资源 css base 地基(公共.

    目录

    项目开发流程

    目录风格

    代码组织格式

    目录结构 


    项目开发流程

    1. 划分目录
    2. 引用两个css文件
    3. 项目模块划分:tabbar->路由映射关系

    目录风格

    文件夹字母小写,组件首字母大写比较清晰

    代码组织格式

    1. 一个项目里页面唯一的用id,多个用class
    2. methods,方法里面写函数,生命周期只负责调用就行
    3. 页面复杂的话就再分子组件
    4. $el:相当于根组件,可以拿到组件的js原生值比如浏览宽高

    目录结构 

    注意看每个文件的后缀名,没有后缀的就是文件夹。

    src
      assets    静态资源
        css
          base  地基(公共样式,自己的)
          normalize  标准化(初始化样式,第三方的)
        images
          cart 购物车文件夹
          common 公共的文件夹
          detail 分支(详情页)
          home 主页
          profile 个人档案(个人页)
          tabbar 列表(标签栏)
      common  公共(放当前公共的js,混入和防抖,时间正则)
        mixin  混入
        utils  常用工具
      components    公共组件(下面组件的js都放到自己的文件夹内)
        common  公共(组件,在别的项目也可以复用的)
          navbar  导航条
          scroll  滚动
          swiper  插件(轮播图插件)
          tabbar  列表(tab栏)
          toast   吐丝(加入购物车的弹窗)
        content  内容(组件,在当前项目可以复用的)
          backTop  回到顶部
          checkButton  复选框
          goods  商品
          mainTabbar  最大的列表(我的,购物车,首页等)
          tabControl  选项卡控件(遍历流行新款精选)
      network  网络(网络请求相关js)
        detail  分支(把没有规律的数据封装成一个类)
        home  首页(首页面向首页js开发)
        request  请求(封装axios,让请求面向这个)
      router  路由
        index.js  索引 (创建路由对象和懒加载各页面,默认显示首页)
      store  仓库
        actions.js  行动(向到购物车添加商品数量)
        getters.js  吸气
        index.js    索引(这个目录里都是vuex的东西,官方推荐这样分开封装)
        mutation-types.js 变化型
        mutation.js 变化
      views  视图
        cart  购物车
          childComps (包含购物车的小组件)
          Cart.vue
        category  分类
        detail  分支(详情页)
          childComps (详情页的小组件)
          Detail.vue
        home  首页
          childComps (首页的小组件)
          Home.vue
        profile  个人档案
      App.vue  平台
      main.js  最重要的(渲染主页面)
    
    .editorconfig  设置编程风格的统一
    vue.config.js  配置 

    最后,喜欢学习的小伙伴可以关注下面公_号前端老实人,可以一起交流学习!!❤

    展开全文
  • vue项目完整的目录结构

    千次阅读 2019-12-25 16:38:27
  • vue项目目录结构

    2021-06-19 16:16:23
    外层文件 postcssrc:对postcss的配置项 gitignore:不提交到git仓库 eslintrc:代码规范 ...App.vue:根组件 router/index.js:项目路由 components:项目用到的小组件 assets:图片等资源 config
  • vue项目划分目录结构

    千次阅读 2022-01-21 16:48:37
    vue项目结构的细节划分
  • 当前采用的Vue的基本目录规范 二、命名规范 1、普通变量命名规范 命名方法 :驼峰命名法 命名规范 :名字需语义化 2、常量 命名方法 : 全部大写 命名规范 : 使用大写字母和下划线来组合命名,下划线用以分割单词...
  • vue3项目目录结构

    2022-05-19 14:38:43
    一、vue3项目目录结构详解 node_modules:通过 npm install 下载安装的项目依赖包 public:存放静态资源公共资源,不会被压缩合并 —3DModel:存放.glb3D模型 —favicon.ico:网站图标 —index.html:首页入口....
  • 上一章节,通过Pycharm创建了一个新的Vue项目,获得如下图所示的初始化Vue项目目录,为了保持结构一致、便于理解和构建管理,后续的学习和开发也将遵循Vue相关的目录结构规范进行。 提示:从 vue-cli3.0 开始 ...
  • 认识vue3.0项目目录结构

    千次阅读 2022-02-08 09:40:55
    上一篇笔记新建一个vue3.0项目 新建项目后,用vscode打开,会看到项目目录,如下图 来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于存放静态资源,不会被压缩、...
  • VUE目录结构

    2022-04-06 17:28:44
    目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 ... App.vue: 项目入口文件,我们也可以直接
  • vue项目文件结构

    千次阅读 2022-03-24 11:48:24
    五、vue项目结构 1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js ==> 构建相关工具方法; 4)vue-loader.conf.js ==> 配置...
  • Vue项目架构(规范)

    千次阅读 2020-05-16 22:06:26
    Vue项目架构(规范) 项目架构的优点,以及意义 效率提升。让开发者关注业务开发 学习成本降低。框架封装了很多底层复杂性 更强的约束。所有动作必须按照框架规定的执行, 避免干坏事、蠢事。更强的约束也意味着框架...
  • vue3 项目结构目录详解

    千次阅读 2021-02-04 09:42:38
    文章目录一,以一个目录树状结构进行展示二,package.json三,项目里边还有一个非常重要的文件main.ts文件,你可以把它叫做入口文件,这里边只有简单的三行代码。 一,以一个目录树状结构进行展示 |-node_modules -- ...
  • vue项目规范

    2021-10-30 11:49:55
    2 文件规范 2.1文件结构 ├── public │ └── logo.png # LOGO │ └── index.html # Vue 入口模板 ├── config #项目配置 │ └── index.js # 主配置文件 ├── node_modules #项目依赖模块 ...
  • vue-cli目录结构解析

    2021-05-27 21:10:39
    vue-cil项目目录结构 dist (由"npm run build"打包后生成,真正挂载到服务器的前端所有代码) node_modules (第三方包目录,安装第三方包时生成) public (公共资源目录) static (静态资源) img (图片) XX.jpg...
  • Vue前端工程目录结构

    2022-05-05 14:35:17
    ├─public 静态资源目录 │ ├─resource 图片样式多语言等资源 │ │ ├─images 图片资源 │ └───libs 插件资源 ├─src 前端开发目录 │ ├─assets 图片样式多语言等资源 │ ├─component...
  • Vue学习总结】3. Vue目录结构分析

    千次阅读 2020-07-05 12:20:03
    一、Vue项目文件目录详情介绍 下面就是上一篇我们搭建的一个样例工程的完整结构(install后): 其中包括了node_modules、build、config、src、static以及test文件夹,还有index.html的超文本文件,和package.json...
  • Vue项目开发规范

    2022-03-03 23:30:53
    项目基于Vue项目进行的二次封装 工程结构 VueProject(2.6.11) ├── build ------------------ webpack相关配置文件 ├── config ----------------- vue基本配置文件 ├── node-modules ----------- 依赖包 ...
  • Vue项目目录结构及功能理解目录结构解析buildconfignode_modulessrc.assets.components.router.App.vue.main.jsstatic其他根目录文件静态文件存放问题 目录结构解析 build (不重要) 下面是初建项目后的build文件夹 ...
  • [vue学习]vue项目的文件和目录结构

    千次阅读 2021-02-05 00:24:02
    文件和目录列表目录结构:├── build // 构建相关├── config // 配置相关├── src // 源代码│ ├── api // 接口│ ├── assets // 主题 字体...
  • vue项目前端规范

    2021-03-26 14:45:18
    前端 vue 开发规范笔记 命名规范组件method方法命名views下文件命名props 命名目录文件夹及子文件规范vue文件基本结构多个特性的元素规范元素特性顺序组件选项顺序注释规范编码规范指令规范Props 规范CSS 规范SASS ...
  • vue3,vue项目结构
  • Vue学习--Vue项目目录介绍(1)

    千次阅读 2021-09-08 13:41:05
    拦截ajax请求三、node_modules——npm 加载的项目依赖模块四、public文件夹——应急手段五、src文件夹——源码目录(开发的项目文件都在此文件中写)1. api2. assets3. common4. components5. directive6. filter7. ...
  • 前端开发—vue项目规范文档
  • 一、Vue.js 目录结构 1、build :项目构建(webpack)相关代码 2、config:配置目录,包括端口号等。我们初学可以使用默认的。 3、node_modules:npm 加载的项目依赖模块 4、static:静态资源目录,如图片、字体等。 5...
  • 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助。 基于 vue.js 的前端开发环境,用于前后端分离后的...
  • 一、为什么要划分使用vue构建项目,项目结构清晰会提高开发效率,熟悉项目的各种配置同样会让开发效率更高在划分项目结构的时候,需要遵循一些基本的原则:文件夹和文件夹内部文件的语义一致性单一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,118
精华内容 7,647
关键字:

vue项目目录结构规范