【愚公系列】2022年04月 Python教学课程 79-VUE组件中的单文件组件模块安装

2022-04-23 08:41:36 浏览数 (1)

文章目录

  • 前言
  • 一、单文件组件
    • 1.环境配置

前言

因为是Python系列只是简单介绍VUE的基本使用。

组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用。

例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

一、单文件组件

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“breadcrumb.vue”。

代码语言：javascript复制
// 使用template标签来定义html部分
<template>
    <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
        当前位置是：{{ pos }}
    </div>
</template>

// javascript要写成模块导出的形式：
<script>
    export default{
        props:['pos'],
        data:function(){
            return {
                isHot:false                
            }
        }
    }
</script>

// 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
<style scoped>
.crumb{
    width:90%;
    line-height:50px;
    margin:0px auto;
    border-bottom:1px solid #ddd;
}
.hot{
    color:red;
    font-weight:bold;
    text-indent:10px;
}
</style>

1.环境配置

单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包，在使用之前需要先进行环境配置

1、安装node版本管理工具nvm

代码语言：javascript复制
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc

2、安装最新版本的node

代码语言：javascript复制
nvm install node

安装完成后使用node -v查看版本号

3、更新npm的安装源

代码语言：javascript复制
npm config set registry https://registry.npm.taobao.org

4、创建项目目录

代码语言：javascript复制
mkdir project

5、进入项目目录，初始化项目目录

代码语言：javascript复制
cd project
npm init

6、配置package.json文件

代码语言：javascript复制
{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "css-loader": "^0.28.11",
        "element-ui": "^2.7.2",
        "file-loader": "^1.1.4",
        "lodash": "^4.17.4",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-router": "^3.0.2",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
    }
}

该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境

7、安装项目依赖模块

代码语言：javascript复制
npm install

8、创建项目文件 main.js ,index.html, App.vue

  • index.html文件时项目的首页文件
  • main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件
  • App.vue文件为单文件组件文件

9、创建webpacke打包的配置文件webpack.config.js

代码语言：javascript复制
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: { main: "./main.js" }, //入口文件
    output: {
        filename: 'index.js', //出口文件名
        path: path.resolve(__dirname), //当前目录
        library: 'index' // 打包后模块的名称
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [ //定义不同类型的文件使用的loader
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.js$/,
                loader: 'babel-loader'
            },
            {
                test: /.css$/,
                loader: 'vue-style-loader',
            },
            {
                test: /.css$/,
                loader: 'css-loader',
                options: {
                    minimize: true //添加
                }
            }, 
            {
                test: /.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
              },
        ]
    }
}

在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

node.js vue.js webpack javascript 打包

0 人点赞