vue單文件組件2（webpack打包）

一、生產環境部署

開發環境下，Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。而在生產環境下，這些警告語句卻沒有用，反而會增加應用的體積。此外，有些警告檢查還有一些小的運行時開銷，這在生產環境模式下是可以避免的。

1）不使用構建工具

如果用 Vue 完整獨立版本，即直接用 <script> 元素引入 Vue 而不提前進行構建，請記得在生產環境下使用壓縮后的版本 (vue.min.js)。

2）使用構建工具

當使用 webpack 或 Browserify 類似的構建工具時，Vue 源碼會根據 process.env.NODE_ENV決定是否啟用生產環境模式，默認情況為開發環境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啟用 Vue 的生產環境模式，同時在構建過程中警告語句也會被壓縮工具去除。

 

二、vue單文件組件

關注點分離不等於文件類型分離。在一個組件里，其模板、邏輯和樣式是內部耦合的，並且把他們搭配在一起實際上使得組件更加內聚且更可維護。

vue-loader 是一個 Webpack 的 loader，可以將vue單文件組件轉換為 JavaScript 模塊

.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊。

vue-loader 會解析文件，提取每個語言塊，如有必要會通過其它 loader 處理，最后將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。

 

1、ES2015

當項目中配置了 babel-loader 或者 buble-loader，vue-loader 會使用他們處理所有 .vue 文件中的 <script>部分，允許我們在 Vue 組件中使用 ES2015。babel-loader可以將ES6代碼轉為ES5代碼，從而在現有環境執行。

<script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB } } </script>

我們使用 ES2015 的屬性的簡潔表示法去定義子組件，{ ComponentA } 是 { ComponentA: ComponentA } 的簡寫，Vue 會自動的將 key 轉換為component-a，所以你可以在 template 中使用 <component-a>。

由於 vue-loader 只處理 .vue 文件，你需要告訴 Webpack 如何使用 babel-loader 或者 buble-loader 處理普通.js 文件。

1）babel安裝：npm install --save-dev babel-loader babel-core

2）通過 config 方式使用（webpack.config.js）：

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }


（exclude：排除node_modules這個模塊，提高打包速度）

3）使用 .babelrc 配置 Babel

雖然已經配置好了 Babel ，但並沒有讓它真正生效。在項目的根目錄中創建一個 .babelrc 的文件並啟用一些 plugin 。首先，你可以使用轉換 ES2015+ 的 env preset 。

npm install babel-preset-env --save-dev

.babelrc文件
{ "presets": ["env"] }

2，CSS
當 <style> 標簽有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素。你可以在一個組件中同時使用有作用域和無作用域的樣式：

<style>/* 全局樣式 */</style> <style scoped>/* 本地樣式 */</style>
<style lang="sass"> /* write sass here */ </style>

/*webpack.config.js*/ module: { rules: [ {//loader的處理順序為從右至左 test: /\.scss$|\.sass$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }

1）css-loader：解析css，style-loader：將處理后的樣式插入到頁面的head標簽內；

2）postcss-loader：css后處理器，放在css-loader和style-loader之后,但是放在其它預處理器如sass loader或less loader之前；

eg：postcss插件autoprefixer：根據當前瀏覽器給css加上必要的前綴以兼容該瀏覽器，同時移除不必要的css前綴。
a）安裝：cnpm i postcss-loader autoprefixer --save-dev
b）在目錄中創建postcss.config.js文件
c）postcss.config.js引入autoprefixer插件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

3）sass-loader：將scss轉換為css
安裝：cnpm install sass-loader node-sass webpack --save-dev