Vue-cli创建的项目结构分析,各初始化文件解释说明
结构图:

一、项目结构说明
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创建的项目结构分析,各初始化文件解释说明的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- 用vue ui创建的项目怎么关闭eslint校验
在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
随机推荐
- Flask框架使用SQLAlchemy的ORM
SQLAlchemy 1.介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用 ...
- 深入理解 Python 的对象拷贝和内存布局
深入理解 Python 的对象拷贝和内存布局 前言 在本篇文章当中主要给大家介绍 python 当中的拷贝问题,话不多说我们直接看代码,你知道下面一些程序片段的输出结果吗? a = [1, 2, 3, ...
- Python3套接字(socket)通讯(TCP)
最近写了一个工程,用作运维的,所以研究了一下Python的TCP通讯(服务器挂一个脚本,电脑挂一个脚本,就可以通过此通讯进行编码加密后传输取回想要的内容) 服务端: from socket impor ...
- Nacos详解
Nacos是什么 欢迎来到Nocos的世界! 组成部分 全称 描述 Na naming/nameServer 即服务注册中心,与 Spring Cloud Eureka 的功能类似. co confi ...
- python之路48 django 视图层、模板层
视图层之必会三板斧 用来处理请求的视图函数都必须返回HttpResponse对象 完全正确 class HttpResponse: pass return HttpResponse() def ren ...
- 红客突击队&突击队分队
红客突击队,于2019年,由队长k龙联合国内多位顶尖高校研究生牵头成立.其团队从成立至今多次参加国际网络安全竞赛并取得良好成绩,积累了丰富的竞赛经验.团队现有三十多位正式成员及若干预备人员,旨在打造国 ...
- day09-AOP-02
AOP-02 4.问题提出 在上一篇的MyProxyProvider类中,我们的输出语句功能比较弱,在实际开发中,我们希望是以一个方法的形式,嵌入到真正执行的目标方法前,怎么办? 1.使用土方法解决 ...
- vh 存在问题?试试动态视口单位之 dvh、svh、lvh
大部分同学都知道,在 CSS 世界中,有 vw.vh.vmax.vmin 这几个与视口 Viewport 相关的单位. 正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) ...
- java 进阶P-3.3+P-3.4
Array list的操作 ArrayList 类是一个可以动态修改的数组,与普通数组的区别就是它是没有固定大小的限制,我们可以添加或删除元素.ArrayList 继承了 AbstractList , ...
- 数学工具类Math-练习
数学工具类Math 概述 java.lang.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数.类似这样的工具 类,其所有方法均为静态方法,并且不会创建对象,调用起来非常 ...