Vue创建单文件组件环境

vue创建单文件组件环境

关于webpack的基础配置，请参照之前的博客webpack看这一篇就够了(已更新)，在此基础上完成以下操作：

• 添加vue的包

cnpm install vue

• 关于VScode中的vue插件

不得不说，有了众多插件库的帮助，能够自动闭合元素标签、格式化代码、给出关键字的高亮显示、帮助开发者提前找出语法错误等，极大的提高我们的工作效率。

例如，在vue文件中，输入<vue（下图左），按下Tab键之后，就会直接得到生成的代码（下图右）。在此推荐几个，结合使用：

vue插件.png

1. Vetur
2. Vue
3. Vue 2 Snippets
4. Vue TypeScript Snippets
5. Vue VSCode Snippets

• 在src目录下，创建根组件App.vue

一个文件就是一个组件，后缀名为.vue，通过vue-loader^[1]解析

• vue-loader的作用

1. 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 style 的部分使用 Sass 和在 template 的部分使用 Pug；

2. 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；

3. 使用 webpack loader 将 `` 和 ` 中引用的资源当作模块依赖来处理；

4. 为每个组件模拟出 scoped CSS；

5. 在开发过程中使用热重载来保持状态。

简而言之，这里的tempate相当于html结构层，script标签相当于逻辑层，style相当于样式层。webpack 和 Vue Loader 的结合，提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用。

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

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

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

当引入App.vue时，其实引入的是一个js对象。

因为webpack的工作原理是通过一个入口文件，将它依赖的所有文件，通过loader的形式进行打包。

而我们在创建webpack环境的时候，将入口文件定义为src文件夹下的main.js文件了，在这里进行引入的操作：

• main.js

import Vue from "vue";
import App from "./App.vue";
new Vue({
    render:h=>h(app)
})$.mount("#app")

template是一种编译方式，但最终仍需通过render方式编译。因为render是一种最终的编译方式，里面有一个函数h，将单文件组件（后缀名为.vue的文件）进行虚拟dom的创建，然后通过render进行解析。内部使用了createElement(标签名称，属性配置，children)

$.mount为设置外部挂载点，绑定到了外部public文件下的index.html中的div

---

---

1. Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： ↩