vue-cli搭建及项目目录结构

Posted 2021-01-01 bgwhite

今天总结一下vue的脚手架的搭建。很简单，今天我们就来说一下

一、vue 脚手架的搭建。

对于脚手架的具体搭建方法，我这里不在很详细的书写，具体方法我推荐菜鸟教程的方法，和具体，你一步一步的来就可以实现。

 

链接地址：http://www.runoob.com/vue2/vue-install.html 

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 文件 必须要有的。