结构图:

一、项目结构说明 

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. Java多线程详解(通俗易懂)

    一.线程简介 1. 什么是进程? 电脑中会有很多单独运行的程序,每个程序有一个独立的进程,而进程之间是相互独立存在的.例如图中的微信.酷狗音乐.电脑管家等等. 2. 什么是线程? 进程想要执行任务就需 ...

  2. JavaScript:对象:如何判断对象是否有某个属性?操作符in

    使用in运算符来判断,有返回true,没有返回false:

  3. [seaborn] seaborn学习笔记7-常用参数调整Adjustment of Common Parameters

    7 常用参数调整Adjustment of Common Parameters(代码下载) 主要讲述关于seaborn通用参数设置方法,该章节主要内容有: 主题设置 themes adjustment ...

  4. Hexo博客搭建记录

    Hexo博客搭建记录 参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程 以下命令操作建议使用管理员权限完成 1. nodejs & hexo 安装 1.首先下载node.js, ...

  5. SICTF_wp

    misc 签到打卡完成 附加下载完成之后可以看到是qsnctf的公众号 使用010打开附件 可以发现key,去公众号回复key即可获得flag SICTF{fb23cefd-487f-42dd-a34 ...

  6. 克拉玛依初赛-wp

    MISC 签到 16进制转字符串 base64 再来一次base64 flag 论禅论道 7z解压得到jar 使用decom打开 解密 得到flag WEB pingme 抓包,修改POST提交的参数 ...

  7. 如何理解scanf(“%d %d”,a,b)==2和scanf(“%d”,a)=1【摘抄笔记ψ(._. )>】

    scanf 函数有一个返回值,0表示接受输入失败,1表示接受输入成功. while(scanf("%d",&x)==1) 的意思就是: 当接收输入变量x的值成功的时候,继续 ...

  8. .Net7运行模型之托管Main函数的调用

    前言: .Net7的CLR最具特色的一个地方,就是运行模型.因为它主宰了整个CLR的运行过程. 又因为其庞大的代码量,有的几十万行甚至百万行.所以理解起来非常不容易.本篇拆分来看下,里面一个细节Mai ...

  9. C#DataTableRow列值互转

    1 /// <summary> 2 /// 把DataRow中的某一列值转换为CheckState类型 3 /// </summary> 4 /// <param nam ...

  10. python实现通用json导入到mysql

    import json from Db import Db db = Db() ''' 参考配置文件 { "file": "test.json", " ...