精华内容
下载资源
问答
  • 2022-05-19 14:38:43

    一、vue3项目的目录结构详解

    node_modules:通过 npm install 下载安装的项目依赖包
    public:存放静态资源公共资源,不会被压缩合并
    —3DModel:存放.glb3D模型
    —favicon.ico:网站图标
    —index.html:首页入口.html文件
    src:项目开发主要文件夹
    —api
    —assets:静态文件,存放图片
    —components:存放组件
    —store:与vuex相关
    —styles:存放样式
    —utils
    —views:界面组件
    —App.vue:根组件
    —main.js:入口文件
    —router.js:存放路由,实现界面跳转
    .gitignore:用来配置那些文件不归git管理
    package.json:项目配置和包管理文件(项目依赖和技术)
    README.md:说明文档,主要看项目运行的命令
    vue.config.js:项目配置信息:跨域proxy代理

    二、部分主要文件详解

    1、index.html

    <%= BASE_URL %>
    <%= htmlWebpackPlugin.options.title %>
    将vue实例挂载到id为#app的dom上

    <!DOCTYPE html>
    <html lang="">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <link rel="stylesheet" href="//at.alicdn.com/t/font_3273220_qxa4nju4npj.css">
      <title>
        <%= htmlWebpackPlugin.options.title %>
      </title>
    </head>
    
    <body>
      <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
            Please enable it to continue.</strong>
      </noscript>
      <!-- 将vue实例挂载到id为#app的dom上 -->
      <div id="app"></div>
      <!-- built files will be auto injected -->
      <style>
       	/* 公共样式可以写在这里 */
      </style>
    </body>
    </html>
    

    2、main.js(main.ts)

    导入组件、路由等
    vue3使用createApp这个api返回一个应用实例,并且可以链式调用;这也是与vue2.0不同之处,vue2.0是通过new Vue() 来创建一个vue实例的
    createApp(App).use(store).use(router).mount(‘#app’);

    import {
      createApp
    } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store/index'
    import * as Api from './api/index.js'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import 'dayjs/locale/zh-cn' //中文
    import locale from 'element-plus/lib/locale/lang/zh-cn' //中文
    import * as ElIcons from '@element-plus/icons-vue'
    import permission from '@/constants/permission';
    import UUID from 'vue-uuid';
    import "vis/dist/vis.css";
    
    var cesium = require('cesium/Cesium.js');
    var widgets = require('cesium//Widgets/widgets.css');
    
    // 创建实例
    const app = createApp(App);
    
    // 全局变量、属性
    app.config.globalProperties.$api = Api
    app.config.globalProperties.Cesium = cesium
    app.config.globalProperties.Widgets = widgets
    
    // 添加widow对象
    window.Cesium = cesium;
    
    // 统一注册Icon图标
    for (const iconName in ElIcons) {
      app.component(iconName, ElIcons[iconName])
    }
    
    // 自定义指令实现权限控制
    app.directive("permission", permission)
    
    // app.use() 注册全局组件
    app.use(ElementPlus, {
      locale
    });
    app.use(store);
    app.use(router);
    app.use(UUID);
    
    // 应用实例挂载到#app中,一定要放在最后面
    app.mount('#app');
    

    3. package.json

    a. scripts
    可以使用npm run serve或yarn serve查看项目效果,就是因为有package.json中的scripts起到了作用。
    能使用vue-cli-service是因为vue-cli自动安装了cli-service这个工具
    serve : 在开发时用于查看效果的命令,视频中演示看一下效果
    build : 打包打码,一般用于生产环境中使用
    lint : 检查代码中的编写规范
    b. dependencies 生产环境 devDependencies 开发环境
    这两个都是用来记录安装包信息的,
    生产环境:就是代码已经上线,放到了正式的服务器上,公司开始运营去赚钱的代码。
    开发环境: 作为一个程序员,每天作的事情都是在开发环境中,编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
    dependencies下的包是生产环境中必须用到的,当然开发环境也需要。devDependencies是只有开发环境中使用的,上线后这些包就没用了,打包后也不会打包进去的代码。

    
      "name": "simulator",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "@element-plus/icons-vue": "^1.1.4",
        "axios": "^0.26.1",
        "cesium": "*",
        "core-js": "^3.8.3",
        "element-plus": "^2.1.2",
        "file-loader": "^6.2.0",
        "js-md5": "^0.7.3",
        "node-sass": "^7.0.1",
        "nprogress": "^0.2.0",
        "pdfjs-dist": "^2.4.456",
        "sass-loader": "^12.6.0",
        "url-loader": "^4.1.1",
        "vis": "^4.21.0-EOL",
        "vue": "^3.2.13",
        "vue-pdf": "^4.3.0",
        "vue-router": "^4.0.14",
        "vue-uuid": "^3.0.0",
        "vue3-pdf": "^4.2.6",
        "vuedraggable": "^4.1.0",
        "vuex": "^4.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
        "@babel/plugin-proposal-private-methods": "^7.16.11",
        "@types/pdfjs-dist": "^2.10.378",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "copy-webpack-plugin": "^5.1.2",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/vue3-essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {
          "vue/multi-word-component-names": "off",
          "no-unused-vars": "off",
          "no-undef": "off"
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead",
        "not ie 11"
      ]
    }
    

    三、其他说明

    1. node版本错误

    注意,不同的node版本,安装依赖包可能会报错
    在vue3项目中,我使用的node版本是 v14.15.1
    推荐nvm对不同的node版本进行管理
    nvm :node版本管理器

    2. 如何调用全局属性

    如果在其他.vue文件中你使用的是<script setup>,你会发现直接使用this.$api会报错,
    这里提供一个新的api:getCurrentInstance 获取vue当前实例,挂载在全局上的东西都需要通过实例去拿
    未亲测过,感兴趣的可以亲测过告诉我可行性~

    import { getCurrentInstance } from "vue";
    // 拿到实例
    const _this = getCurrentInstance ();
    // 在实例中有个ctx上下文
    _this.ctx.$api
    

    我直接用的是<script>即vue2.0写法编写js代码,则可以直接使用this.$api

    3. vue文件中应用vue3.0的api

    vue3.0中用setup去包含了所有的钩子等,所有使用的钩子都需要提前导入

    更多相关内容
  • 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 文件目录结构详解

    2020-11-26 22:50:50
    项目简介 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、...目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录
  • 本章我们会对一个 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 知识的学习,包括一些常用指令、条件渲染、列表渲染等。

    展开全文
  • vue项目结构目录简介

    千次阅读 2021-08-23 23:21:55
    首先来看一下整个结构目录 接下来从上到下的看一下每个文件以及文件是干嘛的 build 文件夹 及 子目录 这里面是一些webpack的配置,主要用于项目打包时的一些设置。这里不去更详细的深入,相关的文件及配置会在后面...

    首先来看一下整个结构目录
    在这里插入图片描述
    接下来从上到下的看一下每个文件以及文件是干嘛的
    在这里插入图片描述
    build 文件夹 及 子目录

    这里面是一些webpack的配置,主要用于项目打包时的一些设置。这里不去更详细的深入,相关的文件及配置会在后面用到时在详细的介绍。
    在这里插入图片描述
    config 文件 及 子目录

    这个文件夹里装的是整个项目 开发运行时的一些配置,比如npm run dev 时 项目的启动端口 之类的
    在这里插入图片描述
    node_modules 文件 及 子目录

    这个文件夹里面全部都是node的一些基础的依赖包,当我们拓展的安装一些别的插件时 也会装在这个文件夹里。
    在这里插入图片描述
    src 文件 及 子目录

    这个文件夹 是 整个项目的主文件夹 , 我们的代码大部分都在这里完成。来具体的看一下里面的内容:
    在这里插入图片描述
    assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。
    在这里插入图片描述
    components 文件夹可以说是vue 的 灵魂了 , 组件文件全部都可以放到这里面。

    组件 !一个vue项目就是由一个个的组件拼装起来的。
    在这里插入图片描述
    router 文件夹 及 子目录

    这个文件夹里的是整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件。
    在这里插入图片描述
    app 文件

    这个文件是整个项目的入口文件,相当于包裹整个页面的最外层的div。
    在这里插入图片描述
    main.js 文件

    这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。
    在这里插入图片描述
    static 文件夹 及 子目录

    这个文件夹里是一些静态资源文件。
    在这里插入图片描述
    这个四个文件是项目自带文件 基本上用不到
    在这里插入图片描述
    index 文件就是项目的承载页面
    在这里插入图片描述
    package 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 , 版本号。 当在项目里使用npm install 时 node 会自动安装, 这个文件里的所有插件。
    在这里插入图片描述
    这是项目的一些说明文件。

    这样整的项目的结构就大体的捋顺了 一遍 。

    哦,对了还有一个文件夹没有出现 ,那就是;
    在这里插入图片描述
    这个dist 文件夹 是在执行了 npm run build 打包指令之后才会出现的, 整个项目写好之,打包出来的所有文件都会在这里,只需要访问文件夹里的index文件可以进入应用了。

    最后总结一下吧 ----
    在这里插入图片描述
    引自:CSDNchao2458

    展开全文
  • 新建项目的时候创建合理的目录结构便于后期的维护是很重要。这篇文章主要介绍了Vue+webpack项目配置便于维护的目录结构 ,需要的朋友可以参考下
  • Vue项目目录结构说明

    千次阅读 2018-08-26 15:04:50
    vue项目结构图 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹,基本上文件都应该放在这里...
  • 简要介绍里如何使用@vue/cli创建vue项目,详细介绍了项目结构,并对项目进行了详细的解读。
  • Vue项目的详细目录结构解析
  • vue项目目录结构

    2021-02-20 09:31:27
    1 ├── README.md // 项目说明文档 2 ├── node_modules // 项目依赖包文件夹 3 ├── build // 编译配置文件,一般不用管 4 │ ├── build.js 5 │ ├── check-versions.js 6 │ ├── dev-client.js 7 ...
  • Vue.js教程-Vue项目目录结构和.vue文件的构成 这哥们写的是真细致,基本我想要了解的vue大题框架和细致介绍都有了,附上我的某页面实现的源码,结合这篇文章,基本页面大组件的理解就大差不差了。 目录文件: ...
  • 最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的...下图为Vue项目文件夹: 以下就项目文件夹中的各文件的作用进行介绍: ├── build/ #...
  • vue项目目录结构图及目录详解

    千次阅读 2020-03-31 00:43:33
    config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹,基本上文件都应该放在这里。 —assets 资源文件夹,里面放一些静态资源 —components这里放的都是各个组件文件 —App....
  • 主要给大家总结介绍了关于vue项目之文件夹结构配置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • 认识vue3.0项目目录结构

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

    千次阅读 2021-02-04 09:42:38
    文章目录一,以一个目录树状结构进行展示二,package.json三,项目里边还有一个非常重要的文件main.ts文件,你可以把它叫做入口文件,这里边只有简单的三行代码。 一,以一个目录树状结构进行展示 |-node_modules -- ...
  •  Vue并不限制你的代码结构。但是,它规定了一些需要遵守的规则:  1、应用层级的状态应该集中到单个store对象中。  2、提交mutation是更改状态的唯一方法,并且这个过程是同步的。  3、异步逻辑都应该封装到...
  • ├── README.md // 项目说明文档 ├── node_modules // 依赖包目录 ├── build // webpack相关配置文件(都已配置好,一般无需再配置) │ ├── build.js //生成环境构建 │ ├── check-versions.js /...
  • Vue目录结构解析

    2022-05-26 23:05:23
    1、node_modules文件夹: 这个文件夹里面全部都是node的一些基础的依赖包,当我们拓展的安装一些别的插件时 也会装在这个文件夹里。 2、public文件夹: phpstudy 的 ...一个vue项目就是由一个个的组件拼装起来的。 6、r
  • 主要介绍了详解使用vue-cli脚手架初始化Vue项目下的项目结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在前两期咱们通过两种方式创建了vue项目,今天和大家一起来看一下vue目录结构以及vue项目的框架原理 vue目录结构 1、node_modules目录用于存放项目的依赖库 2、public目录存放的是一些公用文件,比如初始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,997
精华内容 2,398
关键字:

vue项目目录结构详解