使用单文件组件的方式来开发 Vue 组件

最新推荐文章于 2024-02-27 19:32:49 发布

pish7

最新推荐文章于 2024-02-27 19:32:49 发布

阅读量414

点赞数

分类专栏： vue 前端文章标签： vue 单文件组件 webpack

本文链接：https://blog.csdn.net/pish7/article/details/101062268

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文是一篇使用“单文件组件”方式来开发 vue 组件的入门教程，尽量避免使用无关技术。另外，本文也不是 webpack、babel 等技术的教程，不会介绍相关语法，而只是简单地分享一下开发的流程。
本项目不涉及 Vue CLI，只会创建一个很简单的组件，并用一个很简单的 HTML 文件把组件显示出来。

单文件组件速览

单文件组件是将组件的结构、逻辑和样式组织到同一个 *.vue 文件之中，下面先看一下单文件是长什么样子:

<!-- 模板 -->
<template>
  <div class="example">{{ msg }}</div>
</template>

<!-- 逻辑 -->
<script>
export default {
  data() {
    return {
      msg: "Hello world!"
    };
  }
};
</script>

<!-- 样式 -->
<style>
.example {
  color: red;
}
</style>

初始化项目

创建目录和文件

# 创建项目根目录
mkdir vue-sfcs
cd vue-sfcs

# 初始化项目
npm init -y

# 创建相关目录和源文件
mkdir src\components
touch src\components\hello.vue
touch src\index.html
touch src\index.js

hello.vue 是一个能输出 “Hello world” 的单文件 Vue 组件。
后续操作会把 hello.vue 打包到 dist\bundle.js 中。
index.html 将会消费 hello 组件。
index.js 是入口文件，相当于前端代码的运行起点。

编写源文件

编写单文件组件

单文件组件的源码已在上面给出了，写入 src\components\hello.vue 即可。

编写首页 HTML 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue SFCs</title>
</head>
<body>
  <div id="app"></div>
  <script src="../dist/bundle.js"></script>
</body>
</html>

dist/bundle.js 将会是打包后的产物。
由于项目是经过打包的，所以不能引用 src/index.js，而是要引用打包后的文件。

编写首页 js 文件

import Vue from 'vue';                        // 导入 Vue
import hello from './components/hello.vue';   // 导入组件

new Vue({
  el: "#app",
  template: '<hello/>',
  components: {     // 注册组件
    hello
  }
});

安装 Vue

从上面的首页 js 文件中可以看出，项目需要导入 vue，下面通过 npm 进行安装:

npm i --save vue

Babel

Babel 用于语法转译。

安装 Babel

npm install --save @babel/core @babel/preset-env

参考网址:
https://babel.docschina.org/setup
https://webpack.docschina.org/loaders/babel-loader/
https://babeljs.io/docs/en/usage

配置 Babel

要使用 Babel，需要对 Babel 进行配置，即编写 babel.config.js 文件。在项目根目录下添加该文件，内容如下:

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];
  const plugins = [];

  return {
    presets,
    plugins
  };
}

上面的配置实现了对 ES6+ 语法的转译。

webpack

webpack 用于打包，也就是将项目中涉及的所有文件中的所有代码集中到一个文件中。通常需要指定一个入口文件，例如本项目的入口文件就是 src/index.js，在这个文件中导入了 vue 和 components/hello.vue 组件，而这些文件可能又导入了其他的一些文件，反正涉及的文件会很多，但经过 babel 的打包后，最终会得到一个出口文件(dist/bundle.js)，其中包含了所有的运行逻辑。

安装 webpack

npm i --save webpack webpack-cli

参考网址: https://webpack.docschina.org/guides/installation/#预先准备

安装 Loader

webpack 支持在打包过程中对被处理的文件进行插件化处理，比如对 *.vue / *.css 等类型的文件进行定制化处理。webpack 只负责打包，打包过程中的文件处理，比如 ES6 转 ES5、*.vue 转换为浏览器能理解的 JS 代码等工作，是由各种各样的 Loader 来完成的。

npm i --save babel-loader
npm i --save vue-loader vue-template-compiler
npm i --save css-loader

参考网址: https://babel.docschina.org/setup#installation
参考网址: https://vue-loader.vuejs.org/zh/guide/#手动设置

配置 webpack

在项目根目录下添加一个 webpack.config.js 文件，用于对 webpack 进行配置，内容如下:

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}