使用vue-cli脚手架

文章目录
  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

1
2
3
4
5
<template>
<div class="loading-box">
我是组件
</div>
</template>

在js中引入上面这个组件

1
2
3
4
5
6
7
8
9
10
11
// 引入组件
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 这个类的参数。参考地址