這篇文章主要介紹了Vuejs 單一檔案元件實例詳解,需要的朋友可以參考下
在先前的實例中，我們都是透過Vue.component 或components 屬性的方式來定義元件，這種方式在許多中小規模的專案中還好，但在複雜的專案中，下面這些缺點就非常明顯了：
字串範本：缺乏高亮，書寫麻煩，特別是HTML 多行的時候，雖然可以將模板寫在html 檔案中，但是侵入性太強，不利於元件解耦分離。
不支援CSS：表示當HTML 和JavaScript 元件化時，CSS明顯被遺漏了
沒有建置步驟：限制只能使用HTML 和ES5 JavaScript，而不能使用預處理器。
Vuejs 提供的副檔名為 .vue 的 單一檔案元件 為以上所有問題提供了解決方案。
初識單檔案元件
還是利用工欲善其事必先利其器中的原始碼，在src 目錄下創建hello.vue 文件，內容如下：
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>然後在app.js 中引入使用：
// ES6 引入模块语法
import Vue from 'vue';
import hello from './hello.vue';
new Vue({
el: "#app",
template: '<hello/>',
components: {
hello
}
});此時專案是沒辦法運行的，因為.vue 文件webpack 是沒辦法是別的，它需要對應的vue-loader 來處理才行，而且細心的朋友會發現hello.vue 中用到了ES6 語法，此時就需要用到相應的語法轉換loader 將ES6 轉化成主流瀏覽器兼容的ES5文法，這裡就需要用到官方推薦的babel 工具了。先安裝需要的loader :
# hello.vue 文件中使用了 css，所以需要 css-loader 来处理，vue-loader 会自动调用 npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
有的人疑惑只是使用babel-loader 為什麼還需要安裝後面這麼多工具呢，這是因為很多工具都是獨立的， loader 只是為了配合webpack 使用的橋樑，而這裡babel-core 和babel-preset-env 是實現ES6 到ES5 的核心。
我們再修改webpack.config.js 配置如下：
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
}
}對於babel 的配置，我們還需在專案根目錄下剛建立.babelrc 檔案來設定Babel presets 和其他相關插件，內容如下：
{
"presets": [ "env" ]
}但是雖然雖然都配置好了，項目還是還是會報錯，報如下錯誤：
ERROR in ./src/hello.vue Module build failed: Error: Cannot find module 'vue-template-compiler'
有人就不高興了，明明是按照官方提示安裝了依賴，並正確的進行配置，為什麼還是會報錯？遇到錯誤不要怕，先讀下錯誤是什麼，很容易發現，是因為Cannot find module 'vue-template-compiler' ，這是因為vue-loader 在處理.vue 檔案時，還需要依賴vue-template-compiler 工具來處理。
剛開始我不知道官方為什麼沒有直接告訴用戶需要安裝這個依賴，透過閱讀vue-loader 才明白其package.json 文件中是將vue-template-compiler 和css-loader 作為peerDependencies ，而peerDependencies 在安裝的時候，並不會自動安裝（npm@3.0 ），只會給出相關警告，所以這個需要我們手動安裝的，當然在.vue 文件中如果需要寫CSS，也必須用到css-loader ，這個也是在peerDependencies 中。相關討論： https://github.com/vuejs/vue-loader/issues/1158
知道問題了，直接安裝下就可以了：
npm install vue-template-compiler css-loader --save-dev
再次運行項目，頁面中出現了我們的內容，並沒報錯，ok，大功告成~
使用預處理器
我們已經學會在.vue 中寫css 了，那如果使用sass 預處理器呢？首先安裝上篇文章中提到的模組：
npm install sass-loader node-sass --save-dev
配置只需兩個步驟：
修改webpack.config.js 中vue-loader 設定
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// 这里也可以使用连写方式，但是不利于自定义话参数配置
// scss: 'vue-style-loader!css-loader!sass-loader'
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
}
},
// ...
]
}
}<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">npm install sass-resources-loader --save-dev</pre><div class="contentsignin">登入後複製</div></div>#修改webpack. vue 檔案中的style 標籤，新增
屬性。
配置完後，就可以再 .vue 檔案中，愉快地寫 sass 語法了。
載入全域設定檔實際開發中，我們在編寫sass 檔案時，經常會將全域的scss 變數提取出來，放到一個單獨的檔案中，但是這樣就有個問題，每個需要使用的組件，都需要手動@import './styles/_var.scss' 進來，非常不友善。外掛程式
就很好地幫我們解決這個問題，先安裝一下：
// ...
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
// 看这里，看这里，看这里
{
loader: 'sass-resources-loader',
options: {
// 这里的resources 属性是个数组，可以放多个想全局引用的文件
resources: [resolve('./src/styles/_var.scss')]
}
}
]
}
}
}
// ...然後修改webpack.config.js 檔案中vue-loader 相關設定：
<!-- hello1.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello2',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $red;
}
</style>設定就完成了，我們再來測試下。
在src 目錄下分別建立hello1.vue 和hello2.vue 檔案：
$green: rgb(41, 209, 41); $red: rgb(177, 28, 28);
然後建立一個styles 目錄，並在其中新存放全域變數的檔案_var.scss :
import Vue from 'vue';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue';
new Vue({
el: "#app",
template: '<p><hello1/><hello2/></p>',
components: {
hello1,
hello2
}
});接下來，在app.js 中引用兩個元件：
<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>重新運行專案就可以了。 有作用域的style
###單一檔案元件中為我們提供了一個非常便利的功能，就是當style 標籤加入scoped 屬性時，標籤內的樣式將只作用於目前元件中的元素。 ###接着上面的例子，运行后会发现 hello1.vue 中的 h1 颜色并不是想要的 $green 色，而是被 hello2.vue 中的样式覆盖了。于是分别在 hello1.vue 和 hello2.vue 的 style 标签上添加 scoped 属性，如下：
<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>这样一来我们的两个 h1 标签颜色都显示正常了。
自定义块
在编写某些开源组件时，有时候我们需要同时维护多个组件和组件说明，但是每次修改就要同时修改 .vue 和 .md 文件，相当麻烦。 .vue 文件的 自定义语言块 功能，就允许我们将 markdown 说明同时写进 .vue 文件中，然后通过插件将其说明部分单独提取到相应的 .md 文件中，这样就可以同时维护说明文档和组件功能了。
比如我们将 hello1.vue 文件修改如下：
<docs>
# 标题
这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
## 子标题
这是子标题内容
</docs>
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 单文件组件~'
}
}
}
</script>
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>然后修改 webpack.config.js 配置：
const path = require('path');
// 引入相关插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(dir){
return path.resolve(__dirname, dir);
}
module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
path: resolve('./'),
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
// 这里定义 webpack-dev-server 开启的web服务的根目录
contentBase: resolve('./')
},
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: [resolve('./src/styles/_var.scss')]
}
}
],
docs: ExtractTextPlugin.extract('raw-loader')
}
}
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin('docs.md')
]
}这里用到了 extract-text-webpack-plugin 导出 text 插件，和 raw-loader ，分别都安装下就行。
然后运行构建命令 npm run build ，等运行结束，根目录下会同时生成一个 docs.md 文件，这就是我们想编写的说明文档。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是Vuejs 單一檔案元件（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
