国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack -> vue Component 從入門到放棄(四)

MycLambert / 3403人閱讀

摘要:先展示一下文件目錄結構先把相關的依賴給裝好注意一下注釋只是為了解釋,在中不能寫注釋插件加載器預編譯語法跨平臺環境用來設置命令行安裝預編譯語法的配置中的對象,用于處理目錄的對象,提高開發效率。

Foreword

之前三篇大致介紹了webpack的用法,正如這個系列標題而言 從webpack 到 vue Component,所以最后一篇文章當然是要講 component, 不對應該說是結合使用,所以看官要是對 vue Component不是很了解的話,先去瞅瞅吧 戳我帶你去瞅瞅

Gabby

vue 官網對組件的介紹其實不少了,但是我第一次看 vue單文件組件 的介紹的時候,一陣不明覺厲之風刮的我找不到北。

全局定義(Global definitions) 強制要求每個 component 中的命名不得重復

字符串模板(String templates) 缺乏語法高亮,在 HTML 有多行的時候,需要用到丑陋的

不支持CSS(No CSS support) 意味著當 HTML 和 JavaScript 組件化時,CSS 明顯被遺漏

沒有構建步驟(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器,如 Pug (formerly Jade) 和 Babel

這些缺點就促使了我們要使用 vue 單文件組件了,(看到這里,我心里有股莫名的高興!!!)

然而,NM-MMP 后面就貼上了簡單的 demo 圖片(居然還只是圖片),然后后面就說 “有了 .vue 組件,我們就進入了高級 JavaScript 應用領域” 是不是很牛掰終于可以擺脫菜鳥的衣服了,但是,但是,但是,如果你不知道 Modern JavaScript with ES2015/16,不知道打包工具 webpack/Browserify,不知道 Node Package Manager (NPM),好,很好,非常好,親,你還沒有準備好,請去啃一遍這些再來。。。。。

除了想撞墻我當時沒有其他想法(幸好只是沒用過webpack。。。)

Here we go

先展示一下文件目錄結構:

node_modules

src

main.js

components

app.vue

second.vue

.babelrc

index.html

package.json

webpack.config.js

先把相關的依賴給裝好(注意一下注釋只是為了解釋,在package.json中不能寫注釋)

"devDependencies": {
    "babel-core": "^6.0.0", //babel 插件
    "babel-loader": "^6.0.0", //babel-loader 加載器
    "babel-preset-es2015": "^6.0.0", //babel預編譯es2015/es6語法
    "cross-env": "^3.0.0", //跨平臺環境用來設置NODE-ENV
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue": "^2.2.4",
    "vue-loader": "^10.0.0",
    "vue-template-compiler": "^2.1.0",
    "css-loader": "^0.26.2",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }

//命令行(CLI)安裝
cnpm install 

.babelrc

//預編譯es6語法的配置
{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

webpack.config.js

// var webpack = require("webpack")
var path = require("path")
// NodeJS中的Path對象,用于處理目錄的對象,提高開發效率。

module.exports = {
  // 入口文件地址,不需要寫完,會自動查找
  entry: "./src/main.js",
  output: {
     // 文件地址,使用絕對路徑形式
    path: path.resolve(__dirname, "./dist"),
    //[name]這里是webpack提供的根據路口文件自動生成的名字
    publicPath: "/dist/",
    filename: "[name].js"
  },
  module: {
    loaders: [
      // 解析.vue文件
      {
        test: /.vue$/, 
        loader: "vue-loader",
        options: {
          //解析.vue文件中樣式表
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            "scss": "vue-style-loader!css-loader!sass-loader",
            "sass": "vue-style-loader!css-loader!sass-loader?indentedSyntax"
          }
          // other vue-loader options go here
        }
      },
      // 轉化ES6的語法
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      //編譯css并自動添加css前綴
      { 
        test: /.css$/, 
        loader: "style!css!autoprefixer"
      },
      //圖片加上base64編碼
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    // 別名,可以直接使用別名來代表設定的路徑以及其他,在這個項目中沒用到
    alias: {
      "vue$": "vue/dist/vue.common.js"
    }
  },
   // 服務器配置相關
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  // 開啟source-map,webpack有多種source-map,在官網文檔可以查到 eval-source-map 不能實現斷電調試, source-map 和 cheap-module-source-map 就沒問題
  devtool: "#eval-source-map"
}

src/main.js

//es6語法:
import Vue from "vue"
//外部引入別的庫都可以用這樣的方式,比如jquery等。。
//引入我們編寫的測試用vue文件。
import App from "./components/app.vue";
                                     
new Vue({
    el:"#app",
    render: h => h(App)
})
//vue 里有關于 render 的介紹,我大概簡要介紹一下這里的用途,h 是 vue 生態系統中作為 createElement 別名的通用慣例 也是 JSX 語法的要求。如果在作用域中 h 失去作用, 在應用中會觸發報錯。
//render 所創建的 h 函數 可以直接返回模板中dom元素,相當于
render: function(h){
    return h(App)
}
//個人覺得由于這里的App 是代表的 app.vue 這個組件文件,那么文件中的 標簽中的 dom 元素將自動被拿來返回,當然還包括文件中的data屬性之類的

src/components/second.vue



// scoped 讓css只在這文件中生效 lang="scss" 不能寫成 sass 打包會報錯

src/components/app.vue



index.html


    
        
    
    
        
//這是打包生成的main文件

Last step 更改 package.json

// 在 scripts 中加入 dev 之后直接通過 npm運行 項目中裝的 webpack-dev-server,而不是使用全局的 webpack-dev-server

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --color --port 80"
  }

運行(CIL)

npm run dev

ps:

如果想讓他自動打開默認瀏覽器 再 選項 "dev" webpack-dev-server 后面加個 --open

--hot 與 --line 區別

// 不會刷新瀏覽器
$ webpack-dev-server
//刷新瀏覽器
$ webpack-dev-server --inline
//重新加載改變的部分,HRM(熱替換)失敗則刷新頁面
$ webpack-dev-server  --inline --hot

Final

打開瀏覽器看看效果。這系列文章就全部結束,最后一篇間隔稍微長了點,不過還是沒夭折~~~

webpack -> vue Component 從入門到放棄(三)
webpack -> vue Component 從入門到放棄(二)
webpack -> vue Component 從入門到放棄(一)
github源代碼

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50582.html

相關文章

  • wepback入門放棄

    摘要:四配置配置規則放在的數組里,每個是一個對象,是正則匹配,匹配文件后綴名,是要用是數組是所需要的是要加載哪些文件,是忽略掉哪些文件。實現解析,用會在寫入在文件頂端導入中加入插件。 最近研究webpack略有小成,特此寫篇博客。雖然webpack有官網api,但是個人認為webpack api一點都不人性化, 不自己研究研究,根本看不懂。今天先從寫webpack-dev-server開始。...

    blastz 評論0 收藏0
  • Vue.js 服務端渲染業務入門實踐

    摘要:說起,其實早在出現之前,網頁就是在服務端渲染的。沒有涉及流式渲染組件緩存對的服務端渲染有更深一步的認識,實際在生產環境中的應用可能還需要考慮很多因素。選擇的服務端渲染方案,是情理之中的選擇,不是對新技術的盲目追捧,而是一切為了需要。 作者:威威(滬江前端開發工程師)本文原創,轉載請注明作者及出處。 背景 最近, 產品同學一如往常笑嘻嘻的遞來需求文檔, 縱使內心萬般拒絕, 身體倒是很誠實...

    miya 評論0 收藏0
  • Vuex入門放棄webpack自動導入模塊 命名空間 輔助函數)

    摘要:從入門到放棄自動導入模塊命名空間輔助函數什么是什么是狀態管理,驅動應用的數據源,以聲明方式將映射到視圖,響應在上的用戶輸入導致的狀態變化。最后重點來了外包在職萌新求內推位置廣州 Vuex從入門到放棄(webpack自動導入模塊 命名空間 輔助函數) 1.什么是vuex 1.1 什么是狀態管理 state,驅動應用的數據源; view,以聲明方式將 state 映射到視圖; actio...

    blankyao 評論0 收藏0
  • vue-cli “入門放棄

    摘要:主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代,和作為前端框架已經呈現出了三國鼎立的局面。 主要作用:目錄結構、本地調試、代碼部署、熱加載、單元測試 在如今前端技術飛速發展的時代,angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue,小生表示可以理解,如果作為中國的前端猿不知道 vue,...

    DrizzleX 評論0 收藏0
  • vue-cli “入門放棄

    摘要:主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代,和作為前端框架已經呈現出了三國鼎立的局面。 主要作用:目錄結構、本地調試、代碼部署、熱加載、單元測試 在如今前端技術飛速發展的時代,angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue,小生表示可以理解,如果作為中國的前端猿不知道 vue,...

    william 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<