單文件組件介紹
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>