Vue----Vue项目的目录结构

【原文链接】Vue----Vue项目的目录结构

Vue 项目的目录结构

VUE项目的目录结构如下所示
Vue----Vue项目的目录结构_第1张图片

  • .vscode
    VSCode工具的配置文件,和VUE项目没有什么关系

  • node_modules
    VUE项目运行依赖文件,通过npm install 安装的文件即存放在此文件夹

  • public
    资源文件夹(浏览器图标等)

  • src
    源码文件夹,新写代码即存放在此文件夹

  • .gitignore
    git忽略文件

  • index.html
    入口的html文件,比如新建vue项目的html文件内容如下所示

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite Apptitle>
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.js">script>
  body>
html>
  • package.json
    信息描述文件,包含项目的版本、依赖等,比如这里内容如下所示,比如这里vite为构建工具。
{
  "name": "vue_demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}
  • README.md
    注释文件,可以编写项目描述等等说明性文件

  • vite.config.js
    VUE 项目的配置文件,这里可以配置比如跨域等等。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

你可能感兴趣的:(Vue,vue.js,vscode,前端)