Vue中的单文件组件

一时失言乱红尘 2021-07-25 12:10 475阅读 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 条评论，475人围观）

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

相关阅读

相关 Vue单文件组件

单文件组件 * 简介 * 怎么看待关注点分离？简介在很多 Vue 项目中，我们使用 `Vue.component` 来定义全局组件，紧接着用 ...

港控/mmm°/ 2024年04月17日 05:47/ 0 赞/ 60 阅读

相关 Vue---组件——组件名、非单文件组件、单文件组件

目录总结 Vue中使用组件的三大步骤：如何定义一个组件？如何注册组件关于组件标签关于组件名一个简写方式：一、非单文件组件（开发几乎不用

小灰灰/ 2024年04月07日 13:22/ 0 赞/ 87 阅读

相关 Vue单文件组件

单文件组件单文件组件是在开发中用的比较多的，它的后缀都是.vue结尾的既然是.vue结尾，那么直接给浏览器是不能运行的，.vue文件是vue团队打造的特殊文件，想让

╰半夏微凉°/ 2023年10月12日 14:33/ 0 赞/ 62 阅读

相关 Vue｜非单文件组件

![968f4c3a9001403aaa609f4e85ac2933.gif][] > 传统网页一些不可避免的小问题: > 1.网页JS、CSS等资源依赖关系混乱,不方便

一时失言乱红尘/ 2023年09月27日 23:06/ 0 赞/ 10 阅读

相关 Vue：单文件组件

![1190185-20190924174157882-1725991476.png][] 创建和使用单文件组件的前提步骤是： ![1190185-201

迷南。/ 2023年08月17日 17:09/ 0 赞/ 130 阅读

相关 Vue单文件组件 (五)

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

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

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

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

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

相关 vue单文件组件

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

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

相关 Vue中的单文件组件

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

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

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

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

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