vue-cli脚手架初始化项目各个文件夹用途

一、安装Vue脚手架

1、第一步（仅第一次执行）：全局安装@vue/cli

npm i @vue/cli -g

2、切换到要创建项目的目录，然后创建项目

vue create XXX

3、启动项目

npm run serve

备注：

1、npm淘宝镜像地址

npm config set registry https://registry.npm.taobao.org

2、Vue脚手架隐藏了所有webpack相关配置，若要查看执行

vue inspect > output.js

二、vue-cli脚手架初始化项目各个文件夹用途

node_modules文件夹：项目依赖文件夹

public文件夹：一般放置一些静态资源（图片）。值得注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。

src文件夹

        assets文件夹：一般用于存放静态资源（放置多个组件共用的静态资源），值得注意，放在在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。

        components文件夹：一般放置非路由组件（全局组件）

        App.vue：唯一的根组件（汇总所有组件）

        main.js：入口文件，也是整个程序当中最先执行的文件

        .gitignore:git版本管制忽略的配置（一般不碰）

        babel.config.js：babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容性更好，一般不碰）

        package.json：应用包配置文件（类似于项目身份证，记录着项目名称、项目依赖、项目运行等信息）

        package-lock.json：包版本控制文件（缓存性文件）

        README.md：应用描述文件（说明性文件）

        vue.config.js：可以对脚手架进行个性化定制，如何配置可以参考Vue CLI

---

其他文件夹：

pages文件夹：存放路由相关组件（pages也可换成views）

router文件夹：路由配置文件

store文件夹：vuex相关文件

mock文件夹：存放mock模拟数据

三、脚手架工作环境

vue-cli脚手架环境：基于node + webpack来支撑我们写vue项目

默认入口文件main.js：所有代码都要和main.js产生直接或间接的引入关系

打包过程：执行打包的时候，webpack会根据入口的引入关系来构建代码地图，把相关的代码用加载器/插件翻译处理，输出到.js文件中，插入到index.html中运行

① main.js → 打包运行入口

② Vue.component("组件名",组件对象) → 给Vue注册一个全局组件

执行顺序：通过main.js文件先注册全局组件，然后是组件内使用这个全局组件