基于webpack的vue實(shí)例

wums 發(fā)布于2019-08-20 11:39 / 1307人閱讀

摘要：配置文件根目錄下創(chuàng)建文件中的對(duì)象，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率。引入我們編寫(xiě)的測(cè)試用文件。

這是我個(gè)人在學(xué)習(xí)vue+webpack的一個(gè)實(shí)例，希望對(duì)讀者是有用的，同時(shí)也求大神指教。菜鳥(niǎo)第一次寫(xiě)這，水平有限。

目錄結(jié)構(gòu)

加載依賴(lài)

在這之前確保安裝了node和npm

加載依賴(lài)

{
  "name": "05-five-vue",
  "version": "1.0.0",
  "description": "vue+webapck",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "vue": "^1.0.18",
    "webpack": "^1.12.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^2.0.0",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.3.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "vue-html-loader": "^1.2.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.14.0"
  },
  "author": "guowenfh",
  "license": "MIT",
  "keywords": [
    "vue",
    "webpack"
  ]
}

在根目錄下創(chuàng)建package.json文件，復(fù)制上面的代碼，在根目錄的DOS命令中運(yùn)行npm install；

等待下載完后。

webpack配置文件

根目錄下創(chuàng)建webpack.config.js文件

var path = require("path");
// NodeJS中的Path對(duì)象，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率。
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 模塊導(dǎo)入
module.exports = {
  entry: "./src/main.js",
  //定義webpack輸出的文件，這里設(shè)置了讓打包后生成的文件放在dist文件夾下的build.js文件中
  output: {
    path: path.join(__dirname, "./dist"),
    // 文件地址，使用絕對(duì)路徑形式
    filename: "[name].js",
    //[name]這里是webpack提供的根據(jù)路口文件自動(dòng)生成的名字
    publicPath: "/dist/"
    // 公共文件生成的地址
  },
  // 服務(wù)器配置相關(guān)，自動(dòng)刷新!
  devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    port:9010
  },
  //加載器
  module: {
    // 加載器
    loaders: [
      // 解析.vue文件
      { test: /.vue$/, loader: "vue" },
      // 轉(zhuǎn)化ES6的語(yǔ)法
      { test: /.js$/, loader: "babel", exclude: /node_modules/ },
      // 編譯css并自動(dòng)添加css前綴
      { test: /.css$/, loader: "style!css!autoprefixer"},
      //.scss 文件想要編譯，scss就需要這些東西！來(lái)編譯處理
      //install css-loader style-loader sass-loader node-sass --save-dev
      { test: /.scss$/, loader: "style!css!sass?sourceMap"},
      // 圖片轉(zhuǎn)化，小于8K自動(dòng)轉(zhuǎn)化為base64的編碼
      { test: /.(png|jpg|gif)$/, loader: "url-loader?limit=8192"},
      //html模板編譯？
      { test: /.(html|tpl)$/, loader: "html-loader" },
    ]
  },
  // .vue的配置。需要多帶帶出來(lái)配置
  vue: {
    loaders: {
      css: "style!css!autoprefixer",
      html:"html-loader"
    }
  },
  // 轉(zhuǎn)化成es5的語(yǔ)法
  babel: {
    presets: ["es2015"],
    plugins: ["transform-runtime"]
  },
  resolve: {
    // require時(shí)省略的擴(kuò)展名，如：require("module") 不需要module.js
    extensions: ["", ".js", ".vue"],
    // 別名，可以直接使用別名來(lái)代表設(shè)定的路徑以及其他
    alias: {
      filter: path.join(__dirname, "./src/filters"),
      components: path.join(__dirname, "./src/components")
    }
  },
    //插件
    plugins: [
        //根據(jù)模板插入css/js等生成最終的html
        new HtmlWebpackPlugin({
            filename: "index.html",//生成的html生成路徑，相對(duì)于path
            inject: "body",//js插入的位置，true插入head,false插入body
            template: "index.html",//html模板路徑
            hash: false,//為靜態(tài)資源生成hash值
            minify:{//壓縮HTML文件
                removeComments:true,//移除html中的注釋
                collapseWhitespace:false//刪除空白符與換行符
            }
        })
    ]
  // 開(kāi)啟source-map，webpack有多種source-map，在官網(wǎng)文檔可以查到
  devtool: "eval-source-map"
}

編寫(xiě)主要html文件

根目錄下創(chuàng)建index.html





    
    webpack vue

這里引入的js是由webpack打包生成的

編寫(xiě)vue組件

下一步在在components目錄下創(chuàng)建app.vue

編寫(xiě)入口文件

在src目錄下創(chuàng)建main.js文件

//es6語(yǔ)法：
import Vue from "vue";//引入vue
//外部引入別的庫(kù)都可以用這樣的方式，比如jquery等。。
//引入我們編寫(xiě)的測(cè)試用vue文件。
import app from "./components/app.vue";

Vue.config.debug = true;//開(kāi)啟錯(cuò)誤提示

//創(chuàng)建一個(gè)vue實(shí)例，掛載在#app上
new Vue(app);

到這里一切都準(zhǔn)備完畢，現(xiàn)在開(kāi)始運(yùn)行webpack，wabpack將文件打包到dist目錄生成mian.js，等到運(yùn)行完畢

現(xiàn)在打開(kāi)builde/index.html

這里有個(gè)熱加載的插件，根目錄下運(yùn)行 npm start 打開(kāi)http://localhost:9010/build/i...同樣效果

云服務(wù)器 GPU云服務(wù)器基于webrtc的多人視頻聊天服務(wù)實(shí)例 vue實(shí)例屬性基于hadoop的云存儲(chǔ)實(shí)例 webpack的作用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80682.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wums

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#萬(wàn)圣節(jié)優(yōu)惠#DediPath：美國(guó)特價(jià)獨(dú)立服務(wù)器$39每月起，VPS全場(chǎng)5折優(yōu)惠

閱讀 2825·2021-10-26 09:48
云主機(jī)怎么設(shè)置-云主機(jī)怎么使用？

閱讀 1695·2021-09-22 15:22
主機(jī)ftp用戶名和密碼是什么意思-ftp主機(jī)地址是什么？

閱讀 4081·2021-09-22 15:05
【C語(yǔ)言進(jìn)階】C語(yǔ)言實(shí)現(xiàn)通訊錄（簡(jiǎn)易版）

閱讀 643·2021-09-06 15:02
設(shè)備物理像素、設(shè)備獨(dú)立像素

閱讀 2620·2019-08-30 15:52
Flexbox 很棒，但有些情況不適用

閱讀 2123·2019-08-29 18:38
css 填坑常用代碼分享

閱讀 2772·2019-08-28 18:05
1、TypeScript 介紹

閱讀 2341·2019-08-26 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于webpack的vue實(shí)例

相關(guān)文章

Vue.js資源分享

**基于vue.js和webpack的的實(shí)例項(xiàng)目**

**前端開(kāi)發(fā)之走進(jìn)Vue.js**

Vue.js 子組件的異步加載及其生命周期控制

vue開(kāi)發(fā)看這篇文章就夠了

發(fā)表評(píng)論

0條評(píng)論

wums

男|高級(jí)講師

TA的文章

#萬(wàn)圣節(jié)優(yōu)惠#DediPath：美國(guó)特價(jià)獨(dú)立服務(wù)器$39每月起，VPS全場(chǎng)5折優(yōu)惠

云主機(jī)怎么設(shè)置-云主機(jī)怎么使用？

主機(jī)ftp用戶名和密碼是什么意思-ftp主機(jī)地址是什么？

【C語(yǔ)言進(jìn)階】C語(yǔ)言實(shí)現(xiàn)通訊錄（簡(jiǎn)易版）

設(shè)備物理像素、設(shè)備獨(dú)立像素

Flexbox 很棒，但有些情況不適用

css 填坑常用代碼分享

1、TypeScript 介紹

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于webpack的vue實(shí)例

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！