Vue中的单文件组件

一时失言乱红尘 2021-07-25 12:10 462阅读 0赞

一，**单文件组件**

单文件组件介绍：

*  vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立                                的组件，所以成为单文件组件；

vue文件结构：

*  由于.vue封装了html、js、css的代码，所以它由以下几部分组成；

<template> **html** </template>

<script> **js** </script>

<style> **css** </style>

vue\-loader：

*  如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 **vue****-loader**；
 *  同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css\-loader…
 *  vue\-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack；

webpack：

*  javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包；
 *  官网： [点击前往][Link 1]

二，**创建项目结构**

基于webpack的单文件组件项目基本结构

1.  index.html   基本页面
2.  App.vue   vue根组件
3.  main.js   入口文件
4.  package.json  项目配置文件
5.  webpack.config.js   webpack配置文件
6.  .babelrc  babel配置文件，babel可以将es6转成es5

三，**导入依赖**

基于webpack的单文件组件项目需要安装以下依赖

生产环境

**        vue**：cnpm install vue \-S  vue核心库

开发环境

**        webpack**

cnpm i webpack -D  webpack库

cnpm i webpack-cli -D  webpack 4.x版本以后需要依赖这个库

cnpm i webpack-dev-server -D   webpack服务器

**         Loader**

cnpm i vue\-html-loader -D  html加载器

cnpm i css\-loader -D  css加载器

cnpm i vue\-style-loader -D  style加载器

cnpm i vue\-loader -D  vue加载器

**        template**

cnpm i vue\-template-compiler -D  预编译模版

**         babel**

cnpm i @babel/core -D  babel核心库 如果babel-loader 为8.x 那么需要使用@babel/core安装7.x的core

cnpm i babel-loader -D  babel编译js

cnpm i babel-preset-env -D  babel插件自动检测 (需要根据配置的运行环境)

未完待续

[Link 1]: https://www.webpackjs.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，462人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue005——vue组件入门（非单文件组件和单文件组件）

一、非单文件组件 1.1、单文件组件的使用 1.1.1、局部注册 1、第一步：创建school组件 2、第二步：注册组件（局部注册） 3、第三步：使用

痛定思痛。/ 2024年02月18日 13:34/ 0 赞/ 48 阅读

相关 Vue项目 - 单文件组件和Vue中的路由

推荐：[Vue汇总][Vue] Vue项目 - 单文件组件和Vue中的路由什么是单文件组件在之前的博客中，博主使用`Vue.component`来定义全局组件

向右看齐/ 2022年12月27日 02:14/ 0 赞/ 207 阅读

相关 Vue单文件组件 (五)

vue中的单文件组件指的是后缀为.vue的文件。 vue文件里由template、script、style三部分组成。传统文件中经常遇到以下问题，单文件组件主要是为了

爱被打了一巴掌/ 2022年12月01日 14:10/ 0 赞/ 205 阅读

相关单文件组件中设置html,解决vue 单文件组件中样式加载问题

在写单文件组件时，一般都是把标签、脚本、样式写到一起，这样写个人感觉有点不够简洁，所以就想着把样式分离出去。采用import加载样式在局部作用域(scoped)采用@i

我就是我/ 2022年10月07日 15:59/ 0 赞/ 217 阅读

相关 VUE单文件组件之间调用

现有2个vue单文件组件，Vif.vue和Vbind.vue，要在Vif.vue中调用Vbind.vue。 Vif.vue代码如下： <template> <

客官°小女子只卖身不卖艺/ 2022年06月09日 12:14/ 0 赞/ 215 阅读

相关 vue入门——7Vue单文件组件

（本文只是初学vue的部分资料收集，以后用到了再详细补充。） Vue单文件组件就是后缀名为vue的文件。使用需要安装加载器或者脚手架之类配置。 ![water

r囧r小猫/ 2022年03月11日 05:24/ 0 赞/ 409 阅读

相关 vue单文件组件

vue单文件组件 vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装，一个.vue 文件就是一个单独的组

骑猪看日落/ 2022年02月01日 00:49/ 0 赞/ 324 阅读

相关 vue 单文件组件中样式加载

在写单文件组件时，一般都是把标签、脚本、样式写到一起，这样写个人感觉有点不够简洁，所以就想着把样式分离出去。采用import加载样式在局部作用域（scoped）采用

约定不等于承诺〃/ 2021年12月18日 15:09/ 0 赞/ 388 阅读

相关 Vue中的单文件组件

一，单文件组件单文件组件介绍： vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立

一时失言乱红尘/ 2021年07月25日 12:10/ 0 赞/ 463 阅读

相关 Vue单文件组件中的小技巧

如何设置路径的别名可以在build目录下的webpack-base-config.js 在resolve进行配置如下 { resolve: { e...

灰太狼/ 2021年01月18日 13:49/ 0 赞/ 685 阅读