首页 > 其他分享 >新建vue项目中各个文件夹的作用

新建vue项目中各个文件夹的作用

时间:2022-10-26 21:58:13浏览次数:52  
标签:文件 vue 项目 新建 文件夹 组件 路由

node_modules文件夹作用: 项目的安装依赖文件夹,由命令nmp install生成

public文件夹: 用于存放项目所使用到的一些静态资源(图片等),在最后webpack打包时会直接放入dist文件夹中,

index.html  -- 入口文件

src文件夹: 存储项目的有关源代码  <.主要包含assets/components/router三个文件>

assets文件夹:用于存放src文件夹中各组件使用到的静态资源(在webpack打包时会被当作一个模块打包到js文件夹里)

components文件夹: 一般用于放置非路由组件和全局组件

(补充路由组件和非路由组件内容补充:

一、路由组件与非路由组件的区别?
1、路由组件一般放置在pages或views文件夹。非路由组件一般放置components文件夹中。
2、路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件 在使用的时候,一般都是以标签的形式使用
3、注册完路由,不管是路由组件、还是非路由组件身上都有$route 、 $router属性。
————————————————
)

 

 router文件夹:  配置整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件

App.vue文件:项目中唯一的根组件,组件就是模块

main.js文件:程序的入口文件,项目中第一个执行的文件

babel.config.js:项目的配置文件,一般用于兼容es5和es6语法

 package.json:记录vue项目的相关信息

 

标签:文件,vue,项目,新建,文件夹,组件,路由
From: https://www.cnblogs.com/zheng-yumeng/p/16830197.html

相关文章

  • vue3-- 表单控制 - radio单选 - 购物车案例 - v-model进阶 (了解) - vue生命周期
    表单控制radio单选购物车案例v-model进阶(了解)vue生命周期表单控制input:checkbox(单选,多选,radio(单选))<!DOCTYPEhtml><htmllang="en"><head><metacha......
  • Vue学习-03
    表单控制input:CheckBox(单选,多选)   radio(单选)代码演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scrip......
  • Vue 尚硅谷
     //定义组件constschool=Vue.extend({template:`<h2>{{message}}</h2>`,data(){message:'nihao,hello'}})//局部注册组件newVue({......
  • 今日内容 Vue生命周期
    表单控制input:checkbox(单选,多选),radio(单选)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/v......
  • vue生命周期,vue的购物车案例
    表单控制input:checkbox(单选,多选),radio(单选)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.j......
  • 【Vue】动态方法调用
     JS的动态方法调用是通过eval函数实现但是在Vue中是通过组件的$options.methods实现,写这篇的随笔的原因是因为今天为了封装面包屑组件,花了一下午折腾这个动态方法调用......
  • Vue生命周期
    Vue生命周期Vue的四个过程1.实例创建,数据放在实例中2.挂载模板:el---->div3.改页面,改变量,都会互相影响4.销毁实例四个过程对应的八个函数钩子函数作用bef......
  • Vue项目中,html高度无法撑开的解决方法
    在src目录中新建CSS目录,并在此目录下创建global.css文件,填写如下内容:  随后在main.js中引入该CSS文件。如下: ......
  • mysql:sql create database新建utf8mb4 数据库
    createdatabasesinadefaultcharactersetutf8mb4collateutf8mb4_unicode_ci;或者是createdatabaseconfluencedefaultcharactersetutf8mb4collateutf8mb4_b......
  • vue-js中键盘事件编码
    js里面的键盘事件经常用到的:keyCode8=BackSpaceBackSpacekeyCode9=TabTabkeyCode12=ClearkeyCode13=EnterkeyCode16=Shift_LkeyCode17=Control_Lkey......