Vue CLI项目结构解析

最新推荐文章于 2022-02-25 17:13:13 发布
最新推荐文章于 2022-02-25 17:13:13 发布
阅读量310 收藏
点赞数
分类专栏： SpringBoot 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43265564/article/details/120887055
版权

Idea创建Vue CLI本博客根据该生成的项目进行讲解

在这里插入图片描述

  • 生成的项目结构如上所示，接下来我们来把每一个文件是什么解析一下。
  • node_modules存放整个web项目依赖的JS插件等
  • public,存放首页和浏览器的小图标，参考首页中引入的方式
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">

在这里插入图片描述

  • assets存放静态资源
  • components存放组件的
  • router存放路由的
  • store全局存数据的
  • views存放页面的
  • App.vue初始内容页面
  • main.ts 是初始启动（配置）文件
  • shims-vue.d.ts定义文件，一般用不到
  • .browserslistrc浏览器兼容
  • .eslintrc.js语法检查插件
  • package.json相当于pom.xml
  • package-lock.json锁定版本号
  • tsconfig.json整个项目的配置文件

Vue CLI的执行逻辑：

初始执行main.ts,将内容页App.vue渲染到index.html,完成页面展示

最终项目经过编译生成一个dist文件夹，也就是前端静态资源

程序逸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue项目中，`App.vue`、`main.ts`（或`main.js`）以及`index.html`的作用
qq_61818443的博客
04-30 907
在Vue项目中，`App.vue`、`main.ts`（或`main.js`）以及`index.html`各自承担着不同的作用，它们共同协作以启动和运行Vue应用。`App.vue` 是Vue应用的根组件，它是应用的最顶层组件，其他所有的组件都是`App.vue`的子组件。- **脚本** (`<script>`)：包含了组件的逻辑，如数据、方法和生命周期钩子。- **模板** (`<template>`)：定义了应用的结构。- **样式** (`<style>`)：定义了组件的样式。
VUE-CLI项目结构
AyayaOVO的博客
06-26 1635
一、总体框架 一个vue-cli的项目结构如下，其中src文件夹是需要掌握，其余了解即可。 文件夹目录如下： 每个文件夹目录详细说明如下： 二、配置目录文件讲解 1、build目录（webpack配置） 2、config目录（vue项目配置目录） config文件主要是项目相关配置，常用的就是当端口冲突时配置监听端口，打包输出路径及命名等，目录详情如下： 3、node_modules（项目依赖包） node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法
Vue 学习(八、Vue-CLI 使用和项目结构介绍)
Ares5k
01-05 1822
Vue-CLI 新老版本的使用和目录结构
前端vue cli详解
qq_46237746的博客
01-02 841
前端vue cli详解
Vue-CLI详解
热门推荐
输入技术、输出想法
04-28 2万+
Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法 Vue-CLI详解 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
vue-cli构建项目详解
西洲
10-24 2131
目录 1、Vue是什么 2、node安装 3、NPM 4、cli安装 5、快速构建项目 6、vue-test目录解析 7 、项目运行详解 8、总结 1、Vue是什么 vue是什么，是一套构建用户界面的渐进式框架。 vue两大核心思想，组件化和数据驱动，组件化就是把一个整体拆分个一个一个的组件，组件可重复使用。数据驱动是前端未来的发展方向，释放了对DOM的操作，让DOM随着数据...
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
详解使用vue-cli脚手架初始化Vue项目下的项目结构 在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用...
详解Vue使用 vue-cli 搭建项目
08-30
项目生成后，你可以看到一个新的文件夹，包含了基于webpack的Vue项目结构。 进入项目文件夹（例如：`cd Vue-Project`），使用cnpm来安装项目依赖：`cnpm install`。安装完毕后，启动项目可以使用`npm run dev`，这...
vue-cli3.0 脚手架搭建项目的过程详解
10-17
完成这些配置后，Vue CLI 会自动下载依赖并生成项目结构。项目创建完成后，你可以通过 `cd project-name` 进入项目目录，然后使用 `npm run serve` 或 `yarn serve` 启动开发服务器。 总的来说，Vue CLI 3.0 提供了...
vue-cli+webpack记事本项目创建
08-30
【Vue CLI + Webpack 记事本项目创建详解】 在前端开发中，Vue.js 是一个非常流行的轻量级框架，而 Vue CLI 和 Webpack 结合则可以为开发者提供一个高效、便捷的项目构建环境。本篇文章将详细介绍如何利用 Vue CLI ...
vue-cli 目录结构详细讲解总结
10-17
A Vue.js project
深入理解Vue-cli搭建项目后的目录结构探秘
12-01
我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目录结构，那么今天也算个学习笔记吧！ 一、前言 这里先说一下使用vue-cli之前的事情。 由于刚刚接触Vue不久，就接到了一个移动端项目，于是打算使用vue来进行一次尝试，所以按照练习时候的样子，emmm先把vue.js引入网页里来，emmm自己的外联main.css样式引进来，还有自己的main.js文件，还有一些图片布拉布拉的，所以我整个项目的结构如下：（捂脸） ├── css ├── images ├── index.html └── js 由于之前我连路由，组件什么的都不会用，所以项目效果可想而知，连点击文章标题显示
vue-cli 工程目录结构介绍
学习记录
10-17 8590
请说出vue-cli工程中每个文件夹和文件的用处 注意：此问题千万不要只解释一下 src 文件夹下每个文件夹的作用。vue-cli目录结构：vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config ...
Vue学习之路3-浅析Vue-cli搭建项目后的目录结构
小子pk了的博客
07-17 9756
1.前言       Vue并不限制你的代码结构。但是，它规定了一些需要遵守的规则：       1、应用层级的状态应该集中到单个store对象中。       2、提交mutation是更改状态的唯一方法，并且这个过程是同步的。       3、异步逻辑都应该封装到action里面。 2.项目文件目录显示如下         3.项目文件解析 3.1 build文件 build：文件...
vue学习（五）—vue-cli构建vue项目目录结构
黄孝果的博客
03-30 6246
安装node.js 下载地址：https://nodejs.org/zh-cn/download/ 直接进行安装，安装完成node.js后自动帮助完成npm的安装， 查看是否完成可以到环境配置中查看。 查看npm是否安装成功并安装vue-cli 安装淘宝镜像 npm config set registry https://registry.npm.taobao.or...
vue-cli项目的目录结构介绍
toBetterMe的博客
03-22 3186
vue-cli项目的目录结构介绍 vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。 vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 总体框架 一个vue-cli的项目结构如下，其中src...
vue-cli 项目结构
秋城落叶的博客
03-31 397
总体框架 一个vue-cli的项目结构如下，其中src文件夹是需要掌握的 uild——(webpack配置) build文件主要是webpack的配置，主要启动文件是dev-server.js，输入命令npm run dev首先启动的就是dev-server.js，检查node及npm版本，加载配置文件，启动服务 config——(vue项目配置) config文件主...
4-4 VueCLI项目结构解析
孤注一掷的博客
02-25 316
web文件夹即是整个Vue CLI项目 node_modules：存放项目依赖的js模块，类似于maven的jar包，这个文件夹不需要提交git管理。 public： assets：静态资源 components：组件 router：路由 store：全局数据存储 view：页面，对于router路由 App.vue：初始内容页面 main.ts：初始启动（配置）文件 看到#app，想到选择器，肯定有个div id=“app”，写在index.html里。 Vue CL..
Vue框架总结.pdf
04-03
组件基础 Vue 中，可以通过方法创建一些全局的组件，或者局部的组件。但是，在实际 的 Vue 项目中，使用得更多的是单文件组件。 单文件组件 每一个以 .vue 为后缀的文件，都是一个组件，称为“单文件组件”。 单文件组件由三部分组成： • <template>：组件模版，类似 HTML • [removed]：组件的 JS，包括数据、事件方法等； • <style>：组件的样式 其中，<template> 是必须要有的，[removed] 和 <style> 可选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值