结构图:

一、项目结构说明 

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. ATM购物车项目总结

    目录 项目实现思路 ATM项目 优先实现功能 拆分函数 项目路径展示 项目启动文件 start.py 配置文件 setting.py 日志配置字典 日志函数 展示层 src.py 用户注册 获取用户输 ...

  2. vue中点按钮回到顶部,和elementUI中置顶按钮的实现

    一般做pc项目都会遇到侧边小按钮点击回到顶部的功能,现在记录一下项目中的实现方法 一.结合动画效果实现 <li class="defa_bt" @click="hd ...

  3. 6、SQL模糊查询LIKE concat用法

    concat用来拼接查询的字符串: SELECT * FROM `page_demo` WHERE name LIKE concat('%',#{name},'%') 模糊查询: 1.%代表零个或多个 ...

  4. 原生js实现jsonp

    有时候用js封装个小工具需要一些已经被封装好的函数,比如jq的jsonp 但是原生小工具如果仅仅为了这个就导入一个上百kb的jQuery不划算 然后我去网上找,一大堆废文,还是自己发一篇记录一下吧 下 ...

  5. vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~

    我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...

  6. MySQL 合并查询union 查询出的行合并到一个表中

    在合并查询中,尤其是二分类的情况,在查询结果是相同列名的时候可以考虑合并查询.先查询出行的结果,再使用union或者union all合并查询结果. 另外如果 union 和 order by 一起使 ...

  7. 处理流中的异常-JDK7-和JDK9流中异常的处理

    处理流中的异常 JDK7和JDK9流中异常的处理 jdK7的新特性在try的后边可以增加一个(),在括号中可以定义流对象那么这个流对象的作用域就在try中有效try中的代码执行完毕,会自动把流对象释放 ...

  8. 练习_使用递归计算1-n之间的和-练习_使用递归计算阶乘

    练习_使用递归计算1-n之间的和 定义一个方法,使用递归计算1-n之间的和 1+2+3+. . .+n n+(n-1)+(n-2)+...+1 已知: 最大值:n 最小值:1 使用递归必须明确: 1. ...

  9. 论文翻译:2022_2022_TEA-PSE 2.0:Sub-Band Network For Real-Time Personalized Speech Enhancement

    论文地址:TEA-PSE 2.0:用于实时个性化语音增强的子带网络 论文代码: 引用: 摘要 个性化语音增强(Personalized speech enhancement,PSE)利用额外的线索,如 ...

  10. 为什么 TCP 建立连接需要三次握手(转载)

    为什么 TCP 建立连接需要三次握手(转载) 原文链接:https://draveness.me/whys-the-design-tcp-three-way-handshake/ TCP 协议是我们几 ...