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 ...
随机推荐
- ATM购物车项目总结
目录 项目实现思路 ATM项目 优先实现功能 拆分函数 项目路径展示 项目启动文件 start.py 配置文件 setting.py 日志配置字典 日志函数 展示层 src.py 用户注册 获取用户输 ...
- vue中点按钮回到顶部,和elementUI中置顶按钮的实现
一般做pc项目都会遇到侧边小按钮点击回到顶部的功能,现在记录一下项目中的实现方法 一.结合动画效果实现 <li class="defa_bt" @click="hd ...
- 6、SQL模糊查询LIKE concat用法
concat用来拼接查询的字符串: SELECT * FROM `page_demo` WHERE name LIKE concat('%',#{name},'%') 模糊查询: 1.%代表零个或多个 ...
- 原生js实现jsonp
有时候用js封装个小工具需要一些已经被封装好的函数,比如jq的jsonp 但是原生小工具如果仅仅为了这个就导入一个上百kb的jQuery不划算 然后我去网上找,一大堆废文,还是自己发一篇记录一下吧 下 ...
- vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~
我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...
- MySQL 合并查询union 查询出的行合并到一个表中
在合并查询中,尤其是二分类的情况,在查询结果是相同列名的时候可以考虑合并查询.先查询出行的结果,再使用union或者union all合并查询结果. 另外如果 union 和 order by 一起使 ...
- 处理流中的异常-JDK7-和JDK9流中异常的处理
处理流中的异常 JDK7和JDK9流中异常的处理 jdK7的新特性在try的后边可以增加一个(),在括号中可以定义流对象那么这个流对象的作用域就在try中有效try中的代码执行完毕,会自动把流对象释放 ...
- 练习_使用递归计算1-n之间的和-练习_使用递归计算阶乘
练习_使用递归计算1-n之间的和 定义一个方法,使用递归计算1-n之间的和 1+2+3+. . .+n n+(n-1)+(n-2)+...+1 已知: 最大值:n 最小值:1 使用递归必须明确: 1. ...
- 论文翻译:2022_2022_TEA-PSE 2.0:Sub-Band Network For Real-Time Personalized Speech Enhancement
论文地址:TEA-PSE 2.0:用于实时个性化语音增强的子带网络 论文代码: 引用: 摘要 个性化语音增强(Personalized speech enhancement,PSE)利用额外的线索,如 ...
- 为什么 TCP 建立连接需要三次握手(转载)
为什么 TCP 建立连接需要三次握手(转载) 原文链接:https://draveness.me/whys-the-design-tcp-three-way-handshake/ TCP 协议是我们几 ...