【愚公系列】2022年04月 Python教学课程 79-VUE组件中的单文件组件模块安装
前言
因为是Python系列只是简单介绍VUE的基本使用。
组件是Vue中的一个重要概念,是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例,所以它们与new Vue()接收相同的选项,例如data,computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用。
例如 页面头部、侧边、内容区,尾部,上传图片,等多个页面要用到一样的就可以做成组件,提高了代码的复用率。
一、单文件组件
将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:“breadcrumb.vue”。
// 使用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
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc
2、安装最新版本的node
nvm install node
安装完成后使用node -v
查看版本号
3、更新npm的安装源
npm config set registry https://registry.npm.taobao.org
4、创建项目目录
mkdir project
5、进入项目目录,初始化项目目录
cd project
npm init
6、配置package.json文件
{
"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、安装项目依赖模块
npm install
8、创建项目文件 main.js ,index.html, App.vue
- index.html文件时项目的首页文件
- main.js 文件定义vue及调用单文件组件,也是项目打包时所依赖的文件
- App.vue文件为单文件组件文件
9、创建webpacke打包的配置文件webpack.config.js
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只需引该文件就可进行页面加载渲染
- 点赞
- 收藏
- 关注作者
评论(0)