单文件组件介绍
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应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包；
官网： 点击前往
单文件组件项目结构与依赖安装
创建项目结构
基于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
通过管理员窗口使用指令生成package.json 项目配置文件
导入依赖
由于在开发的过程中需要使用.vue文件
基于webpack的单文件组件项目需要安装以下依赖
生产环境
- vue：npm install vue -S vue核心库
开发环境
webpack
- npm i webpack -D webpack库
- npm i webpack-cli -D webpack 4.x版本以后需要依赖这个库
- npm i webpack-dev-server -D webpack服务器
Loader
- npm i vue-html-loader -D html加载器
- npm i css-loader -D css加载器
- npm i vue-style-loader -D style加载器
- npm i vue-loader -D vue加载器
template
- npm i vue-template-compiler -D 预编译模版
babel
- npm i @babel/core -D babel核心库 如果babel-loader 为8.x 那么需要使用@babel/core安装7.x的core
- npm i babel-loader -D babel编译js
- npm i babel-preset-env -D babel插件自动检测 (需要根据配置的运行环境)
安装完package.json的最终效果：
附：需要按照顺序一个一个进行安装，预防后面的依赖前面的包
配置单文件项目并运行
main.js
import Vue from 'vue'//引入内置模块 import App from './app.vue'//引入自定义模块 new Vue({ el:'#app', //使用render渲染 render:function(r){ return r(App); } })
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
app.vue
<template>
<h2> 欢迎来到perfect*的博客园！！！</h2>
</template>
<script>
</script>
<style>
</style>
webpack.config.js
const VueLoaderPlugin=require('vue-loader/lib/plugin'); module.exports={ //1配置入口文件 entry:'./main.js', //2配置出口 output:{ path:__dirname, filename:'build.js' }, //3配置loader module:{ rules:[ { //.vue test:/.vue$/, loader:'vue-loader' }, { //js test:/.js$/, loader:'babel-loader', exclude:'/node_modules/'//排除该目录 }, { //css test:/.css$/, use:[ 'vue-style-loader', 'css-loader' ] } ] }, //4配置插件 plugins:[ new VueLoaderPlugin() ], //5设置模式 mode:'development'//开发模式 }
之后在index.html中的加入：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="build.js"></script><!--放在head标签之间找不到项目的挂载点-->
</html>
自定义文件.babelrc
{ "presets":[ [ "env", { "moudle":false } ] ] }
package.json中加入：
{ "name": "simple-file", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "dev":"webpack-dev-server --open --hot --port8088 --config webpack.config.js --mode development" },
在管理员窗口输入npm run dev 进行运行该项目：
最终效果：
可以在app.vue中添加js代码，在控制台打印出内容，以及修改其样式
app..vue
<template>
<h2> 欢迎来到perfect*的博客园！！！</h2>
</template>
<script>
console.log('欢迎来到perfect*的博客园')
</script>
<style>
h2{
color: red;
}
</style>