Vue/cli 3.0生成的项目目录解析

从vue init到现在vue3.0时代，仔细观察后发现使用脚手架生成的项目目录结构有很大的调整，今天我就整理下vue/cli 3.0脚手架在生成的项目后目录中各个文件的解析。

使用vue/cli 创建项目

在使用vue/cli 之前需要安装node和npm。 创建项目myPro

生成的目录文件结构

文件夹node_modules下放置所有通过npm安装的包，包括vue.js,router.js,vuex.js等等。public文件夹下的放置根html。最终build完之后的HTML,css.js，图片等会在dist文件夹下。 src文件下如图所示

一般在assets中放置的是一些css文件，图片，字体等静态资源。 在componets中可以放置组件。在views中也可以放置组件。 APP.vue是整个项目的根组件。 main.js是主要配置文件，在这个文件里我们要引入vue、router等。在这里我强调一下：使用import 导入的其实是一个对象，就把它当做js的中的对象，可以给这个对象使用prototype挂载一个全局的方法，这样在任意组件中就不用导入了。

import Vue from 'vue'  //Vue是一个对象
复制代码

eg:挂载一个axios方法

import axios from 'axios'
Vue.prototype.$http = axios
复制代码

然后在任意组件中可以使用this.http是通过prototype原型属性挂载的，所以可以使用this指Vue实例对象。 有写的不对的地方欢迎大家指正。

转载于:https://juejin.im/post/5c75fe29f265da2de80f7189