vue-cli脚手架及单文件组件

vue-cli

cli.vuejs.org/zh/

vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：

根据配置选项自动构建项目，并安装所需要的依赖
启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供了跨域代理服务
项目的自动编译、打包
项目测试（单元测试、e2e测试）

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功以后，会提供一个 vue 的命令

查看版本

vue --version
# OR
vue -V

帮助

vue --help
# OR
vue -h

创建项目

vue-cli 提供了两种方式来创建项目

命令行 - cli
图形界面（基于浏览器） - ui

命令行方式创建项目

vue create 项目名称

基于浏览器图形界面方式创建项目

vue ui

运行

项目创建成功以后，进入项目根目录，打开 package.json 文件，我们可以看到

{
  ...,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
	...
}

cli.vuejs.org/zh/guide/cl…

打包

打包的具体命令，我们在后期项目开发完成以后再说

项目目录结构文件说明

src

先来说一个最重要的目录 src ，这个就是存放的就是我们项目源码的目录，我们开发过程中大部分的时间就在这个目录中

main.js

项目的入口文件

App.vue

首先，这是 vue 提供的一种单文件组件的文件模式（后续会讲），一个 .vue 文件就是一个独立的组件，这里的 App.vue 是应用的根组件

存放组件的目录

存放静态资源的目录，比如：图片，css 等。这里的文件与外层 public 目录存放的静态资源的最大区别是：assets 存放的资源是通过 import 等方式作为模块导入，最后打包处理的。而 public 中的资源并不通过模块方式导入，一般都是通过 script 、link 、img 等方式从浏览器引入的资源，比如无法通过模块化处理的 js 文件（这样的需求情况并不多）

public

一些并非通过模块方式引入的资源文件存放的位置，一般都是通过 script 、link 、img 等方式从浏览器引入的资源，比如无法通过模块化处理的 js 文件（这样的需求情况并不多）

单文件组件

vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue 为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件

vue-loader-v14.vuejs.org/zh-cn/start…

组成

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

单文件组件把一个组件所包含的结构、样式、行为分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中

一个单文件组件最少必须包含 template，可以不需要 script 和 style

lang 属性

无论是 template、script 还是 style，都可以通过 lang 属性来指定它们所使用的语言

<template lang="jade">
  div.example
		p {{ msg }}
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      msg: 'Hello world'
    }
  }
})
</script>

<style lang="stylus">
.example
  color red
</style>

src 属性

我们还可以通过 src 属性把文件分离到单独的文件中

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

这里的 src 同样遵循模块化的导入规则，./ 开头的表示相对路径，/ 开头表示 NPM 包中的资源

有作用域的 CSS

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

解析后：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

混用本地和全局样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

资源路径处理

在项目开发中，我们经常会碰到要引入外部资源的需求，vue 单文件系统中，对资源引入路径有一定的特殊处理

绝对路径前缀
相对路径前缀
特殊前缀

绝对路径前缀

就是以 /、https://baidu.com/ 等这样的绝对路径开头的，不做任何处理，直到被浏览器解析

相对路径前缀

就是以 ./、../ 这样的相对路径开头的，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析，如：<img src="../a.png"> 解析后：<img src="require('../a.png')">，类似的还包括 background: url(...) 和 @import

特殊前缀

如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node（NPM 包）依赖中的资源，如：<img src="~some-npm-package/a.png">
如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src