vue入門之單文件組件

介紹

在很多 Vue 項目中，我們使用 Vue.component 來定義全局組件，緊接着用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。

這種方式在很多中小規模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：

• 全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復
• 字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
• 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。

這是一個文件名為 Hello.vue 的簡單實例：

現在我們獲得：

• 完整語法高亮
• CommonJS 模塊
• 組件作用域的 CSS

正如我們說過的，我們可以使用預處理器來構建簡潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產力的預處理器。如果搭配 vue-loader 使用 webpack，它也能為 CSS Modules 提供頭等支持。

 

 

Vue Loader 是什么？

Vue Loader 是一個 webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

 

Vue Loader 還提供了很多酷炫的特性：

• 允許為 Vue 組件的每個部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
• 允許在一個 .vue 文件中使用自定義塊，並對其運用自定義的 loader 鏈；
• 使用 webpack loader 將 <style> 和 <template> 中引用的資源當作模塊依賴來處理；
• 為每個組件模擬出 scoped CSS；
• 在開發過程中使用熱重載來保持狀態。

簡而言之，webpack 和 Vue Loader 的結合為你提供了一個現代、靈活且極其強大的前端工作流，來幫助撰寫 Vue.js 應用。

 

起步

Vue CLI

如果你不想手動設置 webpack，我們推薦使用 Vue CLI 直接創建一個項目的腳手架。通過 Vue CLI 創建的項目會針對多數常見的開發需求進行預先配置，做到開箱即用。

如果 Vue CLI 提供的內建沒有滿足你的需求，或者你樂於從零開始創建你自己的 webpack 配置，那么請繼續閱讀這篇指南。

手動設置

安裝

你應該將 vue-loader 和 vue-template-compiler 一起安裝——除非你是使用自行 fork 版本的 Vue 模板編譯器的高階用戶：

npm install -D vue-loader vue-template-compiler 

vue-template-compiler 需要獨立安裝的原因是你可以單獨指定其版本。

每個 vue 包的新版本發布時，一個相應版本的 vue-template-compiler 也會隨之發布。編譯器的版本必須和基本的 vue 包保持同步，這樣 vue-loader 就會生成兼容運行時的代碼。這意味着你每次升級項目中的 vue 包時，也應該匹配升級 vue-template-compiler。

webpack 配置

Vue Loader 的配置和其它的 loader 不太一樣。除了通過一條規則將 vue-loader 應用到所有擴展名為 .vue 的文件上之外，請確保在你的 webpack 配置中添加 Vue Loader 的插件：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它規則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]
}

 

這個插件是必須的！ 它的職責是將你定義過的其它規則復制並應用到 .vue 文件里相應語言的塊。例如，如果你有一條匹配 /\.js$/ 的規則，那么它會應用到 .vue 文件里的 <script> 塊。

一個更完整的 webpack 配置示例看起來像這樣：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它會應用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 塊
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它會應用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 塊
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 請確保引入這個插件來施展魔法
    new VueLoaderPlugin()
  ]
}

 

你也可以在選項參考查閱所有可用的 loader 選項。

警告

如果你在開發一個庫或多項目倉庫 (monorepo)，請注意導入 CSS 是具有副作用的。請確保在 package.json 中移除 "sideEffects": false，否則 CSS 代碼塊會在生產環境構建時被 webpack 丟掉。

 

 

Vue CLI 

vue可視化配置方式 

https://ke.qq.com/webcourse/index.html#cid=325955&term_id=100386825&taid=2514617452788035&vid=c1428e6nrsc

1 可以使用下列任一命令安裝這個新的包：

npm install -g @vue/cli # OR yarn global add @vue/cli

2 啟動vue ui

　vue ui