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 ...
随机推荐
- phpMyAdmin给非技术人员一个查阅数据库的窗口
背景 管理数据库的界面工具. 开发团队中一般有非技术背景人员,比如: 产品,功能测试人员: 对他们来说,可能安装数据库管理工具客户端都很麻烦,需要一款在线的网页工具能方便他们查阅数据. 本地docke ...
- Blazor组件自做十三: 使用 Video.js 在 Blazor 中播放视频
Video.js 是一个具有大量功能的流行的视频和音频 JavaScript 库,今天我们试试集成到 Blazor . Blazor VideoPlayer 视频播放器 组件 示例 https://b ...
- Jmeter之非GUI下执行脚本
1.进入jmeter 应用所在路径 eg: cd D:\Program Files\apache-jmeter-5.2\bin 2.输入运行命令:jmeter -n -t [jmx脚本路径] -l [ ...
- MYSQL的回忆录(适合有基础的小伙伴看,没基础的看着估计够呛)
SQL分类 MYSQL的数据类型 Text 类型 数据类型 描述 CHAR(size) 保存固定长度的字符串(可包含字母.数字以及特殊字符).在括号中指定字符串的长度.最多 255 个字符. VARC ...
- [UOJ96] 【集训队互测2015】胡策的小树
先考虑不掺金坷垃的做法. 设猴子处于 \(i\) 节点的概率为 \(f_i\),列出方程如下(\(i\) 的祖先包括自身): \[f_i = \sum_{j为i祖先}\frac{1-p_j}{siz_ ...
- flask_apscheduler
网上很多文章包括官网给出来的,更多的是执行的函数和初始话app在同一文件 按照app 路由 模型类 视图 往下延申,项目已经成型,所以上述的方法不适用. (不用操心模型类与app互相导入的错误)下面分 ...
- mysql基础命令语法
删除空格 update 表名 set 字段名 = replace(字段名 ,' ','') ; 临时表创建与删除 -- 创建临时表 create temporary table if not exis ...
- MongoDB分片副本集生产环境部署-Windows版本
title: MongoDB分片副本集生产环境部署(Windows版本) date: 2022-10-29 17:21:11 tags: - 运维 系统架构 配置环境 系统都是windows 10 专 ...
- 如何在 Nuxt 3 中使用 wavesurfer.js
安装 wavesurfer.js 在项目中安装 wavesurfer.js npm install --save wavesurfer.js 常规方式引入 如果你的根目录中没有 components ...
- VMware vSphere vCenter ServerAppliance 7.0安装配置
VMware vSphere vCenter ServerAppliance 7.0安装配置 环境说明: 1.将vCenter ServerAppliance部署在ESXi主机上,安装配置好ESXi主 ...