vue-cli初始化项目目录结构以及vue文件基本结构

网友投稿 1126 2022-05-29

在上一篇博文中《vue开发 我们需要准备什么 ?》中,我们已经使用vue-cli脚手架,初始化了一个vue项目,如果不清楚怎么使用vue-cli生成项目的同学,可以翻翻我上一篇博文哈,本文就不重复之前的操作步骤了,直接上项目目录截图,我们对比着来看一看,项目中的文件夹以及文件都是什么用途的:

build:项目构建(webpack)相关代码;

config:配置目录,包括端口号等。我们初学可以使用默认的。

dist:打包项目目录地址

node-modules:npm 加载的项目依赖模块

src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。

里面包含了几个目录及文件:

assets: 放置一些图片,如logo等。

components: 目录里面放了一个组件文件,可以不用。

App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

main.js: 项目的核心文件。

static:静态资源目录,如图片、字体等。

test:初始测试目录,可删除

index.html:项目首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

package.json:项目配置文件。这个文件非常重要哦~

README.md:项目的说明文档,markdown 格式

其他的都是一些配置文件,可以自己打开看看,一般情况下,不怎么需要调整。

下面说一下vue文件的文件结构:

     

上面的代码中,template标签里,写html标签,就是页面文档结构,script中,写的是js代码,实现页面效果啊数据请求啊业务逻辑什么的,style标签里,写的是页面样式。基本上vue文件(以.vue为后缀)的结构,就是这三部分了。

单独说一句,在项目目录中,index.html是项目首页入口文件,在src里的main.js,是项目的入口文件,主要作用是:实例化Vue、放置项目中经常会用到的插件和CSS样式以及

vue-cli初始化项目目录结构以及vue文件基本结构

存储全局变量。App.vue,是项目的根组件,在src目录下的components目录,主要用于放置模板文件,补充一下前面介绍目录结构中,没有说到的内容。

Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:只需十四步:从零开始掌握Python机器学习(附资源)
下一篇:详解HTML相对路径和绝对路径
相关文章