结构图:

一、项目结构说明 

1、.gitignore :git的忽略文件(哪些文件或文件夹不想接受git管理的,可在此文件配置)

2、babel.config.js:babel控制文件,ES6=》ES5

3、package-lock.json 和 package.json 文件

(1)package-lock.json 文件是锁定各依赖包的版本控制文件

(2)package-lock.json 文件是记录项目引用到的依赖包

4、public 文件夹:打包后,public目录是根目录

(1)favicon.ico:页签图标

(2)index.html:整个项目的页面文件

5、src文件夹

(1)assets文件夹:放静态资源文件

(2)components:放自定义组件

(3)App.vue:所有组件的父组件,主要用此文件来管理所有的子组件

(4)main.js:此文件是整个项目的入口文件

6、vue.config.js:配置webpace相关的配置文件

二、文件说明

1、index.html 文件:

2、main.js文件:

3、App.vue文件:

Vue-cli创建的项目结构分析,各初始化文件解释说明的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  3. 用vue ui创建的项目怎么关闭eslint校验

    在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了

  4. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  7. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  8. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  9. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  10. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

随机推荐

  1. LeetCode HOT 100:最大子数组和

    题目:53. 最大子数组和 题目描述: 给你一个整数数组,在该数组的所有子数组中,找到一个子数组中所有元素相加和最大,返回这个最大的和.子数组就是一个数组中,由一个或几个下标连续的元素,组成的小数组, ...

  2. 把ChatGPT配置到微信群里,可以对AI提问了!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:用的很爽! 自从小傅哥用上 ChatGPT 连搜索引擎用的都不多了,很多问题的检索我 ...

  3. netcore下死RabbitMQ队列、死信队列、延时队列及小应用

    关于安装rabbitmq这里一笔掠过了. 下面进入正题: 1.新建aspnetcorewebapi空项目,NormalQueue,删除controllers文件夹已经无关的文件,这里为了偷懒不用con ...

  4. [python] 基于diagrams库绘制系统架构图

    Python的Diagrams库允许通过简单的Python代码绘制云系统架构,实现对新的系统架构进行原型设计.Diagrams的官方仓库地址见:diagrams.Diagrams的官方文档和使用示例见 ...

  5. [cocos2d-x]TextureCache和spriteFramecache

    SpriteFrameCache 主要服务于多张碎图合并出来的纹理图片.这种纹理在一张大图中包含了多张小图,直接通过TextureCache引用会有诸多不便,因而衍生出来精灵框帧的处理方式,即把截取好 ...

  6. BC2-小飞机

    题目描述 KiKi 学会了 printf 在屏幕输出信息,他想输出一架小飞机.请帮他编写程序输出这架小飞机. 输入描述 无 输出描述 解题思路 方案一: 将小飞机的图形按照行进行划分,总共可以分成 6 ...

  7. NG-Alain + Angular11使用ModalHelper实现简单版本弹框,代码超级少,记得模块要引用这个组件

    先看一下目录结构 --aa-item ----modal-compment ------modal-compment.component.html ------modal-compment.compo ...

  8. QtQuick使用MediaPlayer抓取摄像头影响报错Error: "Your GStreamer installation is missing a plug-in."

    环境:ubuntu18.04 Qt5.9.5 描述:项目需要使用qtquick作为显示界面用于播放从网络摄像头抓取的影像,海康网络摄像头,摄像头源协议使用的是rtsp,影像数据格式为x-h264,但在 ...

  9. .NET与大数据

    前言 当别人做大数据用Java.Python的时候,我使用.NET做大数据.数据挖掘,这确实是值得一说的事. 写的并不全面,但都是实际工作中的内容. .NET在大数据项目中,可以做什么? 写脚本(使用 ...

  10. 【教程搬运】分析并编写suricata规则(内含两个示例)

    suricata规则分析 参考1 参考2 Suricata 签名的结构 在高层次上,Suricata签名由三部分组成: Action:当流量符合规则时采取的行动 Header:一个标题,描述主机.IP ...