文章目录

1. 1. 使用vue-cli脚手架
2. 2. 转换规则
   1. 2.1. 浅谈Vue.use

使用vue-cli脚手架

创建vue初始化项目
感觉vue init webpack-simple这样的方式适合小项目，vue init webpack这样的方式适合中大型项目，两种方式初始化Vue-Cli的项目的目录差别比较大，你可以发现使用vue init webpack这样的方式来初始化项目，默认提供了很多的webpack的配置，也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的配置等等

当 Vue Loader 编译单文件组件中的 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。
webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用。vue-loader

转换规则

资源 URL 转换会遵循如下规则：

1. 有序列表如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
2. 有序列表如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
3. 有序列表如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：
4. 有序列表如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。
   在导入模块和文件的简写要注意还包括./这种是有特殊含义的

浅谈Vue.use

写一个组件命名part.vue

<template>
    <div class="loading-box">
       我是组件
    </div>
</template>

在js中引入上面这个组件

// 引入组件
import LoadingComponent from './part.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('Loading',LoadingComponent)
    }
}
// 导出
export default Loading

注意如果 在其他地方用上面的index.js就必须要申明Vue.use(Loading)
当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。参考地址