vue cli 的文件目录入门

1.Vue-cli 使用旅程 先安装

# 全局安装 vue-cli
 
$ npm install --global vue-cli
 
# 创建一个基于 webpack 模板的新项目
 
$ vue init webpack my-project
 
# 安装依赖，走你
 
$ cd my-project
 
$ npm install
 
$ npm run dev

2.看看build文件夹的文件

├── build.js
 
├── check-versions.js
 
├── dev-client.js
 
├── dev-server.js
 
├── utils.js
 
├── vue-loader.conf.js
 
├── webpack.base.conf.js
 
├── webpack.dev.conf.js
 
└── webpack.prod.conf.js

（1）build.js

build文件夹里有一个 build.js ，是我们完成项目之后需要运行的， 可以将我们的项目文件打包成 静态文件，存放在项目根目录的 dist 文件夹中（现在目录里还没有这个文件夹，build的时候会自动生成），当然你可以自己设置路径，是在。。应该是在 config 文件夹中的 index.js 中改，可以指定主页，默认是 index.html。

（2）check-versions.js

主要是检查一些所依赖的工具的版本是否适用，如nodejs、npm，若版本太低则会提示出来。

（3）dev-client.js

应该是本地客户端开发中有关热更新的吧～

（4）dev-server.js

是一个用作服务器端的东西，涵盖了express和它的一些模块，为了在本地服务器上把我们的项目跑起来的一个文件，引入了反向代理的模块，我们可以用来发起跨域请求。

（5）utils.js

（是一个功能模块？）里面引入了一些css-loader，以便于解析各种格式的css，如 less，sass 什么的。

（6）vue-loader.conf.js

它把上面的 utils.js 引入了，应该是用于切换 开发模式和 生产模式的文件吧，以便于用不同模式来解析css。

下面那三个我只知道是webpack的一些打包的设置，比如指定入口文件啊，依赖安装路径啊，对不同后缀的文件用不同的loader去解析呀什么的。目前不了解这个也对我们开发项目影响不大～

2. config文件

├── dev.env.js
 
├── index.js
 
├── prod.env.js
 
├── test.env.js
 

index.js配置dev-server 进行浏览器自动打开刷新

dev.env.js   prod.env.js   test.env.js 根据项目是开发阶段还是生产阶段还是测试进行切换

3.node_modules

1.依赖所存在的文件，就是我们一开始使用 npm install 安装的东西，都在里面

2.npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本，然后一次性安装所有的依赖。

4.src

终于到了最重要的部分，src目录就是一般我们需要写的地方了，先放一下目录结构：

├── App.vue
 
├── assets
 
├── components
 
├── main.js
 
└── router

（1）App.vue 是我们的主组件，也是我们所有组件和路由的出口，之后他会被渲染到我们项目根目录的 index.html 中显示出来，我们可以在这里写一些适合全局的css样式，比如说 css reset，字号，字体什么的。

（2）assets 

是我们放一些静态图片资源的目录，虽然我没有放图片在里面。

（3）components

这里存放的是我们写的各种组件，各个组件联系在一起组成一个完整的项目

（4）router

我们定义路由的地方，虽然也可以直接在 main.js 中直接定义，但是分开的话结构更加清晰，路由的定义我们下次再说～

（5）main.js

入口文件，引入了 vue模块 和 app.vue 组件 以及 路由router，我们需要在全局使用的一些东西也可以定义在这里面。

5.static

用于存放我们需要使用的一些外部的js、css文件，需要使用的时候从这里引到文件内（比如MUI的js和css以及字体样式等）。

6.根目录的一些配置文件

├── .babelrc
 
├── postcssrc.js
 
├── index.html
 
├── package.json
 
└── README.md

(1).babelrc

把es6语法转译成es5，因为es6还不能被浏览器解析出来

(2).postcssrc.js

这个文件我还没配置过，暂时不清楚是配置什么的

(3)index.html

入口的html文件 不需要任何操作

(4)package.json

上面提过是用来配置各种生产和开发的配置项的地方

假如没有node_modules 有这个文件直接 npm i 就可以把node_modules重新装好