sonar 扫描vue目录_2020最新vue项目目录详解(超详细)

山西软通乐学常亮带你去详解vue项目目录

5ccfe11f6fbf76303e1d99d57b629739.png

f0eeadec357a0dc9e740e69e4236de63.png

node_modules:存放npm命令下载的开发环境和生产环境的依赖包。

Public:public目录存放的是一些公用文件,比如初始创建时,public目录中有两个文件,一个是图标,一个是通用的错误页面:看index.html文件可以判断出,这是用于当浏览器不支持JavaScript脚本时的提示页面。

059fb089efa8c48c2d7dec6a2afc87c1.png

f0eeadec357a0dc9e740e69e4236de63.png

src下assets:存放项目中需要用到的资源文件,css、js、images等。

src下components:存放通用的组件,如这里的HelloWorld组件其实就是项目初始化时Home这一页的内容,之后的开发中,我们可以把通用的组件都存放在这里。

a606f56219ab0523c0db7c9347b9e3dd.png

f0eeadec357a0dc9e740e69e4236de63.png

src下router.js:vue-router vue路由的配置文件。

350db775bfa46224550c49ae70245af9.png

f0eeadec357a0dc9e740e69e4236de63.png

src下store:存放 vuex 为vue专门开发的状态管理器。

3471068f2cb5c3c7c5a5a56746ab1c97.png

f0eeadec357a0dc9e740e69e4236de63.png

src下views:view是视图的意思,顾名思义,这里是存放视图文件的地方。当然,一般在开发中,我们为了方便管理文件,还会在这个目录中创建更多的文件夹来进行管理。比如把项目的模块划分到目录中来管理。

d513456a8d0d100cea045bb6ad8ef13e.png

f0eeadec357a0dc9e740e69e4236de63.png

src下app.vue:使用标签<route-view></router-view>渲染整个工程的.vue组件。

src下main.js:main.js文件的作用是创建vue实例。初始项目中,引入了vue、app、store、router,当然我们也可以在此引入更多的东西或做一些全局的处理工作。

c8505d2fc0d50d12ae50156e4a1f3428.png

f0eeadec357a0dc9e740e69e4236de63.png

package.json:用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值