vue项目结构设计
2023-09-14 08:57:25 时间
感觉这个写的挺详细的,要详细了解可以看这个→ 结构详细介绍
vue项目结构图:
简单介绍:
build
目录是一些webpack的文件,配置参数什么的,一般不用动
config
是vue项目的基本配置文件
node_modules
是项目中安装的依赖模块
src
源码文件夹,基本上文件都应该放在这里。
—assets
资源文件夹,里面放一些静态资源
—components
这里放的都是各个组件文件
—App.vue
App.vue组件
—main.js
入口文件
static
生成好的文件会放在这个目录下。
test
测试文件夹,测试都写在这里
.babelrc
babel编译参数,vue开发需要babel编译 .editorconfig
编辑器的配置文件 .gitignore
用来过滤一些版本控制的文件,比如node_modules文件夹 ,一般在githubpush文件的时候需要用到index.html
主页 package.json
项目文件,记载着一些命令和依赖还有简要的项目描述信息 README.md
介绍自己这个项目的,随便写,让别人看得懂就行,看不懂就算了
详细介绍:
1、package.json
package.json文件是项目的配置文件,除了一些项目的基本配置信息,还有几个地方需要重点记忆
dependcies:项目发布时的依赖
devDependencies:项目开发时的依赖
scripts:编译项目时的一些命令
2、.babellrc文件:
.babelrc文件定义了ES6的转码规则,基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
3、index.html
主页我们可以像平时普通的html文件一样引入文件和书写基本信息,添加meta标签等。
4、main.js
这里是入口文件,可以引入一些插件或者是静态资源,引入之前要确定已经安装了该插件,记录可以在package.json文件中查看
/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*重置样式*/
import "assets/css/base.css"
/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
/*使用VueResource插件*/
Vue.use(VueResource)
5、App.vue
这个是一个标准的vue组件,包含三个部分,一个是模板,一个是script,一个是样式
持续更新中。。。。
相关文章
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Vue - 项目配置 ( element , 安装路由 , 创建路由 )
- vue-element-admin项目的mock逻辑
- [Vue] Get up and running with vue-router
- vue-cli项目配置图解
- 基于 vue 全家桶的 spa 项目脚手架
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
- [FE] 有效开展一个前端项目-V3 (Vue CLI / Vue SSR )
- 使用 Pinia 轻松实现复杂的 Vue 3 状态管理
- 毕设/私活/bigold必备项目,一个挣钱的免费的全开源标准前后端分离后台管理权限系统【springboot+vue+redis+Spring Security】脚手架搭建:若依Ruo框架具体使用教程
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 216:vue+openlayers 加载GPX数据,导出geojson文件
- 170:vue+openlayers 绘制地图上多个点的信封envelope矩形
- 140:vue+openlayers 右键点击定位,获取某一点下多层features信息
- 055:vue+openlayers的select-modify-snap功能展示(代码示例)
- 使用VSCode创建第一个VUE项目
- Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)
- Vue.js中 watch 的高级用法
- 一文说清 webpack、vite、vue-cli、create-vue 的区别
- 【vue】如何安装vue 脚手架以及创建脚手架项目_10
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue中一个组件导入另一个组件