普通的vue项目和vue-cli搭建起来项目结构上的差异

男娘i 2024-02-18 13:47 9阅读 0赞

在功能和基本结构上，普通的 Vue 项目和使用 Vue CLI 搭建的项目是相似的，但在具体的文件结构和配置上会有一些差异。

普通的 Vue 项目是手动搭建的，你需要自己创建项目文件夹并手动配置项目结构。通常，一个普通的 Vue 项目的基本结构可能如下：

- /src
      - /assets        // 存放静态资源文件，如图片、样式等
      - /components    // 存放 Vue 组件
      - /views         // 存放页面级组件
      - /router        // 存放路由配置文件
      - /store         // 存放 Vuex 状态管理相关文件
      - main.js        // 项目的入口文件
      - App.vue        // 根组件
    - /public
      - index.html     // 项目的 HTML 模板文件

使用 Vue CLI 搭建的项目结构会更加规范和标准化，同时提供了更多的开发工具和配置选项。Vue CLI 提供了一个脚手架工具，可以帮助你快速创建和配置一个基于 Vue 的项目。使用 Vue CLI 创建的项目结构通常包含以下主要目录和文件：

- /src
      - /assets        // 存放静态资源文件，如图片、样式等
      - /components    // 存放 Vue 组件
      - /views         // 存放页面级组件
      - /router        // 存放路由配置文件
      - /store         // 存放 Vuex 状态管理相关文件
      - main.js        // 项目的入口文件
      - App.vue        // 根组件
    - /public
      - index.html     // 项目的 HTML 模板文件
    - /node_modules    // 依赖包目录
    - vue.config.js    // Vue CLI 的配置文件
    - package.json     // 项目的配置和依赖管理文件
    - README.md        // 项目的说明文档

值得注意的是，通过 Vue CLI 创建的项目结构中包含了更多的配置文件和目录，例如 `vue.config.js` 用于配置 Vue CLI 的行为，`node_modules` 用于存放项目的依赖包等。

总结来说，使用 Vue CLI 搭建的项目结构更加规范和标准化，并提供了更多的开发工具和配置选项，使得项目的开发和管理更加便捷。而普通的 Vue 项目则需要手动创建和配置，灵活性更高，但需要自己处理更多的项目配置和结构的细节。

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关普通的vue项目和vue-cli搭建起来项目结构上的差异

在功能和基本结构上，普通的 Vue 项目和使用 Vue CLI 搭建的项目是相似的，但在具体的文件结构和配置上会有一些差异。普通的 Vue 项目是手动搭建的，你需要自己创建

男娘i/ 2024年02月18日 13:47/ 0 赞/ 10 阅读

相关 Vue 项目搭建

安装 Node.js 安装：推荐阅读：[Windows安装 Node.js][Windows_ Node.js] 检测：打开目标文件夹（本文示例：C:\\Use

╰半夏微凉°/ 2023年10月18日 22:56/ 0 赞/ 145 阅读

相关 Vue项目的搭建

前言：为公司前端项目搭建整理的一份文档一、项目环境 1、node安装下载地址：[http://nodejs.cn/download/][http_nod

向右看齐/ 2023年10月09日 12:38/ 0 赞/ 53 阅读

相关 vue项目的搭建

一、node环境的搭建下载地址为：[https://nodejs.org/en/][https_nodejs.org_en] 查看电脑是否安装了node ， npm

Love The Way You Lie/ 2023年07月20日 12:15/ 0 赞/ 74 阅读

相关 Vue项目的搭建，Springboot项目的对接

一.[vue环境的搭建][vue] 二.创建vue项目 1.进入代码文件夹，cmd窗口执行: vue create vue-to-springboot，直接ent

梦里梦外;/ 2023年02月14日 13:06/ 0 赞/ 9 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 333 阅读

相关 vue 的web端项目搭建

在HBuilder X新建一个element-starter项目![在这里插入图片描述][4ba71e8f24b51db44a8c9641d69b8381.png_pic_ce

清疚/ 2022年08月29日 13:47/ 0 赞/ 201 阅读

相关搭建vue项目

> 1，安装好node.js npm > 2，创建vue项目： > > npm install -g vue-cli /搭建脚手架/ >

待我称王封你为后i/ 2022年05月10日 09:12/ 0 赞/ 355 阅读

相关 vue - vue项目的搭建以及初始化

一、项目的搭建首先，检查一下之前是否已经安装了脚手架：可以通过 `vue-V`来检查 ![在这里插入图片描述][20

心已赠人/ 2021年09月20日 13:54/ 0 赞/ 598 阅读

相关 Vue项目搭建

一：安装node.js 安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html 安装完成之后，在cmd命令

逃离我推掉我的手/ 2021年07月24日 21:00/ 0 赞/ 612 阅读