Vuejs中怎么實現(xiàn)一個單文件組件，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站制作等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都門簾等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱贊！
初識單文件組件
還是利用工欲善其事必先利其器 中的源碼，在 src 目錄下創(chuàng)建 hello.vue 文件，內(nèi)容如下：
{{ msg }}
然后在 app.js 中引入使用：
重慶分公司
重慶分公司
// ES6 引入模塊語法
import Vue from 'vue';
import hello from './hello.vue';
new Vue({
el: "#app",
template: '此時項目是沒法運(yùn)行的，因為 .vue 文件 webpack 是沒法是別的，它需要對應(yīng)的 vue-loader 來處理才行，而且細(xì)心的朋友會發(fā)現(xiàn) hello.vue 中用到了 ES6 語法，此時就需要用到相應(yīng)的語法轉(zhuǎn)化 loader 將 ES6 轉(zhuǎn)化成主流瀏覽器兼容的 ES5 語法，這里就需要用到官方推薦的 babel 工具了。先安裝需要的 loader :
# hello.vue 文件中使用了 css，所以需要 css-loader 來處理，vue-loader 會自動調(diào)用 npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
有的人疑惑只是使用 babel-loader 為什么還需要安裝后面這么多工具呢，這是因為很多工具都是獨立的， loader 只是為了配合 webpack 使用的橋梁，而這里 babel-core 和 babel-preset-env 才是實現(xiàn) ES6 到 ES5 的核心。
我們再修改 webpack.config.js 配置如下：
module.exports = {
// ...
module: {
// 這里用來配置處理不同后綴文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
}
}對于 babel 的配置，我們還需在項目根目錄下剛創(chuàng)建 .babelrc 文件來配置 Babel presets 和 其他相關(guān)插件，內(nèi)容如下：
{
"presets": [ "env" ]
}但是雖然雖然都配置好了，項目還是還是會報錯，報如下錯誤：
ERROR in ./src/hello.vue Module build failed: Error: Cannot find module 'vue-template-compiler'
有人就不高興了，明明是按照官方提示安裝了依賴，并正確的進(jìn)行配置，為什么還是會報錯呢？遇到錯誤不要怕，先閱讀下錯誤是什么，很容易發(fā)現(xiàn)，是因為 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+），只會給出相關(guān)警告，所以這個需要我們手動安裝的，當(dāng)然在 .vue 文件中如果需要寫 CSS，也必須用到 css-loader ，這個也是在 peerDependencies 中。相關(guān)討論： https://github.com/vuejs/vue-loader/issues/1158
知道問題了，直接安裝下就可以了：
npm install vue-template-compiler css-loader --save-dev
再次運(yùn)行項目，頁面中出現(xiàn)了我們的內(nèi)容，并沒報錯，ok，大功告成~
使用預(yù)處理器
我們已經(jīng)學(xué)會在 .vue 中寫 css 了，那么如果使用 sass 預(yù)處理器呢？首先安裝上篇文章中提到的模塊：
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: {
// 這里也可以使用連寫方式，但是不利于自定義話參數(shù)配置
// scss: 'vue-style-loader!css-loader!sass-loader'
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
}
},
// ...
]
}
}給 .vue 文件中的 style 標(biāo)簽，添加 lang="scss" 屬性。
配置完后，就可以再 .vue 文件中，愉快地編寫 sass 語法了。
加載全局設(shè)置文件
實際開發(fā)中，我們在編寫 sass 文件時，經(jīng)常會將全局的 scss 變量提取出來，放到一個單獨的文件中，但是這樣就有個問題，每個需要用到的組件，都需要手動 @import './styles/_var.scss' 進(jìn)來，非常不友好。插件 sass-resources-loader 就很好地幫我們解決這個問題，先安裝一下：
npm install sass-resources-loader --save-dev
然后修改 webpack.config.js 文件中 vue-loader 相關(guān)配置：
// ...
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
// 看這里，看這里，看這里
{
loader: 'sass-resources-loader',
options: {
// 這里的resources 屬性是個數(shù)組，可以放多個想全局引用的文件
resources: [resolve('./src/styles/_var.scss')]
}
}
]
}
}
}
// ...配置就完成了，我們再來測試下。
在 src 目錄下分別創(chuàng)建 hello1.vue 和 hello2.vue 文件：
