vue-cli搭建及项目目录结构
2023-09-14 09:07:54 时间
今天总结一下vue的脚手架的搭建。很简单,今天我们就来说一下
一、vue 脚手架的搭建。
对于脚手架的具体搭建方法,我这里不在很详细的书写,具体方法我推荐菜鸟教程的方法,和具体,你一步一步的来就可以实现。
vue2.0脚手架的搭建:https://segmentfault.com/a/1190000011275993
对于不会使用或不知道 npm的,你可以从网上搜搜,下载node.js ,npm会随node.js一起被安装。
二、vue脚手架目录:
我们来详细的介绍一下这些目录:
一级目录
build: webpack 配置相关的目录
config: webpack 配置相关的目录
node_modules: npm install 安装的依赖代码库
src:我们存放的源码,我们开发的所哟代码都放在src目录下。
staic: 存放一些第三方静态资源的目录
test:测试目录,没有太大用处,可以删除
一级文件:
.babelrc: babel的一些配置,(将es6编译成es5的一些配置)
.editorconfig:编辑器的一些配置(包括编码格式,缩进风格,换行格式)
.eslintignore:配置我们不会对build文件和config文件进行语法检查。
.eslintrc.js: eslint的配置文件,主要是定义一些代码编写风格的规则。
.gitignore:配置git仓库忽略的一些文件(不会上传)
.postcssrc.js 防止样式错乱
index.html: 入口html 文件。
package.json:项目的一些配置信息(项目的一些具体信息)
src 文件夹下的 目录:
assets 文件夹: 存放静态资源,例如:图片,font字体等。
conponents 文件夹: 存放组件,里面你可以在建文件来分组件,比如建 header 问价夹, footer 文件夹
router 文件夹: 配置路由文件
App.vue 文件: App.vue是我们的主组件,所有页面都是在App.vue下进行切换的
main.js 文件: 主要作用是初始化vue实例并使用需要的插件
dist文件夹为我们经过编译后产生的 文件,项目上线一般就是将编译好的build文件及相关依赖发布上线
因为我么主要是在src下进行开发,所有这些文件名不是必须,你可以根据您的项目需求去增加,或删除。不过 app.vue 文件和 main.js 文件 必须要有的。
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- 如何查看Vue项目vue的版本号
- webpack搭建基础vue项目
- SpringBoot项目整合Vue做一个完整的用户注册功能
- Vue开发实战01-创建基础项目,包管理使用yarn
- 使用vue-cli搭建spa项目
- Vue 入口与 initGlobalAPI
- 进阶vue面试题总结
- Nginx部署Vue项目
- 你知道import Vue from 'vue' 吗?
- docker部署vue项目_docker部署java
- VUE组件封装_vue组件内部双向绑定
- Vue全家桶介绍_vue全家桶有什么好处
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue入门项目:学生管理系统之班级管理 【含源码】
- Vue项目骨架屏注入实践
- 每日一题之Vue数据劫持原理
- 说说对Vue的keep-alive的理解
- Vue CLi v3 创建项目使用记录
- 【Vue】1524- 分享 22 道常被问及的 JavaScript 面试题
- vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表
- vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
- vue.js客服系统实时聊天项目开发(二十)vue项目框架目录结构
- vue-cli3项目搭建配置以及性能优化
- Vue入门 - 环境搭建&项目初始化(HelloWorld)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)