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

1、生產環境部署

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

1）不使用構建工具

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

2）使用構建工具

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

 

2、vue單文件組件

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

vue-loader 是一個 Webpack 的 loader，能夠將vue單文件組件轉換爲 JavaScript 模塊

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

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

 

一、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

CSS
當  標籤有  屬性時，它的 CSS 只做用於當前組件中的元素。你能夠在一個組件中同時使用有做用域和無做用域的樣式：.babelrc文件
{ "presets": ["env"] }

2，<style>scoped

<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-loaderstyle-loader以後sass loader或less loader以前；

eg：postcss插件cnpm i --save-dev
autoprefixer：根據當前瀏覽器給css加上必要的前綴以兼容該瀏覽器，同時移除沒必要要的css前綴。
a）安裝：postcss-loader autoprefixerb）在目錄中建立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