基于vue-cli创建的项目的目录结构及说明介绍

一、

├── build // 项目构建(webpack)相关代码 记忆：（够贱） 9个

│ ├── build.js // 生产环境构建代码

│ ├── check-versions.js // 检查node&npm等版本

│ ├── dev-client.js // 热加载相关

│ ├── dev-server.js // 构建本地服务器

│ ├── utils.js // 构建配置公用工具

│ ├── vue-loader.conf.js // vue加载器

│ ├── webpack.base.conf.js // webpack基础环境配置

│ ├── webpack.dev.conf.js // webpack开发环境配置

│ └── webpack.prod.conf.js // webpack生产环境配置

二、

├── config// 项目开发环境配置相关代码 记忆： （环配） 3个

│ ├── dev.env.js // 开发环境变量（看词明意）

│ ├── index.js //项目一些配置变量

│ └── prod.env.js // 生产环境变量

三、

├──node_modules// 项目依赖的模块 记忆： （依赖） *个

四、

├── src// 源码目录 5

1
│ ├── assets// 资源目录

│ │ └── logo.png

2
│ ├── components// vue公共组件

│ │ └── Hello.vue

3
│ ├──router// 前端路由

│ │ └── index.js// 路由配置文件

4
│ ├── App.vue// 页面入口文件（根组件）

5
│ └── main.js// 程序入口文件（入口js文件）

五、

└── static// 静态文件，比如一些图片，json数据等

│ ├── .gitkeep

剩余、

├── .babelrc// ES6语法编译配置

├── .editorconfig// 定义代码格式

├── .gitignore// git上传需要忽略的文件格式

├── index.html// 入口页面

├── package.json// 项目基本信息

├── README.md// 项目说明

附录、

一般情况下：

ESlint es6的代码风格检查器 y
AirBNB 默认
Karma + Mocha No
e2e No

以上这篇基于vue-cli创建的项目的目录结构及说明介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    利用node和npm环境我们可以很快的搭建一个vue环境.具体步骤,请看上一篇博客.搭建完成后,我们可以看到生成的文件夹中包括如下文件: 1.build文件夹是保存一些webpack的初始化配置.config文件夹保存一些项目初始化的配置. 2.node_modules是npm加载的项目依赖的模块. 3.src目录是我们要开发的目录,打开是这样的: 其中assets:用来放置图片 components:用来放组件文件 app.vue:是项目入口文件,代码如下: App.vue相当于一个组件 ma

  • vue 文件目录结构详解

    项目简介 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.项目包含: 基础库: vue.js.vue-router.vuex.whatwg-fetch 编译/打包工具:webpack.babel.node-sass 单元测试工具:karma.mocha.sinon-chai 本地服务器:express 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • 基于vue-cli创建的项目的目录结构及说明介绍

    一. ├── build // 项目构建(webpack)相关代码 记忆:(够贱) 9个 │ ├── build.js // 生产环境构建代码 │ ├── check-versions.js // 检查node&npm等版本 │ ├── dev-client.js // 热加载相关 │ ├── dev-server.js // 构建本地服务器 │ ├── utils.js // 构建配置公用工具 │ ├── vue-loader.conf.js // vue加载器 │ ├── webpack.b

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 基于Maven骨架创建JavaWeb项目过程解析

    IDEA版本:2020.1 骨架选项名称: org.apache.maven.archetypes:maven-archetype-webapp 本项目的Maven坐标设置: 设置优先从本地获取骨架: archetypeCatalog=internal 构建过程的控制台打印: "C:\Program Files\Java\jdk1.8.0_251\bin\java.exe" -Dmaven.multiModuleProjectDirectory=C:\Users\User-Dai\Ap

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

  • 基于Vue和Element-Ui搭建项目的方法

    首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索! 提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode. 输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • 浅析Android系统的架构以及程序项目的目录结构

    浅析Android系统的架构以及程序项目的目录结构

    Android框架结构 直接上图: 由上图,我们可以看出Android系统架构由5部分组成, 分别是:Linux Kernel(linux内核).Android Runtime(运行时环境).Libraries(类库).Application Framework(应用框架).Applications(应用). 1.1.Linux Kernel Android基于Linux 2.6提供核心系统服务,例如:安全.内存管理.进程管理.网络堆栈.驱动模型.Linux Kernel也作为硬件和软件之间的抽

随机推荐