美文网首页
VUE3(四)目录结构

VUE3(四)目录结构

作者: camellias__ | 来源:发表于2021-03-02 18:06 被阅读0次

    更好的了解项目的目录结构,能更好的去开发项目:

    当前展示的目录结构是基于vite搭建的项目。

    目录结构如下图所示:

    111.png

    我的代码是托管在我自己的git服务器上边的,默认安装的时候是不存在的。

    1:dist目录

    存放打包之后的代码文件

    2:node_modules

    存放项目依赖的包目录

    3:public

    存放公共文件目录

    4:src

    存放代码的主要目录

    222.png

    (1):assets

    我这里存放了每个页面对应的css、js以及图片文件

    (2):components

    存放项目使用的公共组件

    (3):router

    存放vue-router相关的文件

    (4):types

    存放typescript 支持vue文件的相关配置文件

    (5):views

    存放页面文件(.vue)

    (6):App.vue

    根组件文件

    (7):main.ts

    入口文件ts文件

    // 引入vue3中vue框架的createApp这个方法,创建一个实例
    import { createApp } from "vue";
    import App from "/@/App.vue";
    // 创建实例
    const app = createApp(App);
    // 将示例挂载至节点
    app.mount("#app");
    

    5:.gitignore

    Git相关文件,配置不上传至git库的文件,了解更多,请移步:《Git 忽略提交 .gitignore》

    6:index.html

    项目入口文件

    7:package.json

    存放依赖包管理及命令管理信息文件

    (1):scripts

    "scripts": {
        "dev": "vite",
        "build": "vite build"
      },
    

    这里是命令配置,我的项目时采用vite创建的,因此命令有vite

    yarn dev
    yarn build
    

    (2):开发环境及生产环境

    Dependencies:生产环境
    devDependencies:开发环境

    8:readme.md

    使用markdown编写的文档文件

    9:ts.config.json

    Typescript的配置文件

    10:vite.config.ts

    项目配置文件

    11:yarn.locak

    使用yarn包管理生成的文件,由yarn自动生成,自动管理。不需要管。

    |-node_modules      -- 项目依赖包的目录
    |-public            -- 项目公用文件
      |--favicon.ico    -- 网站地址栏前面的小图标
    |-src               -- 源文件目录,程序员主要工作的地方
      |-assets          -- 静态文件目录,图片图标,比如网站logo
      |-components      -- Vue3.x的自定义组件目录
      |--App.vue        -- 项目的根组件,单页应用都需要的
      |--index.css      -- 一般项目的通用CSS样式写在这里,main.js引入
      |--main.js        -- 项目入口文件,SPA单页应用都需要入口文件
    |--.gitignore       -- git的管理配置文件,设置那些目录或文件不管理
    |-- index.html      -- 项目的默认首页,Vue的组件需要挂载到这个文件上
    |-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
    |-- package.json    -- 项目配置文件,包管理、项目名称、版本和命令
    

    有好的建议,请在下方输入你的评论;

    欢迎访问个人博客
    https://guanchao.site

    相关文章

      网友评论

          本文标题:VUE3(四)目录结构

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