基于webpack的vue實例

wums 發布于2019-08-20 11:39 / 1303人閱讀

摘要：配置文件根目錄下創建文件中的對象，用于處理目錄的對象，提高開發效率。引入我們編寫的測試用文件。

這是我個人在學習vue+webpack的一個實例，希望對讀者是有用的，同時也求大神指教。菜鳥第一次寫這，水平有限。

目錄結構

加載依賴

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

加載依賴

{
  "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"
  ]
}

在根目錄下創建package.json文件，復制上面的代碼，在根目錄的DOS命令中運行npm install；

等待下載完后。

webpack配置文件

根目錄下創建webpack.config.js文件

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

編寫主要html文件

根目錄下創建index.html





    
    webpack vue

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

編寫vue組件

下一步在在components目錄下創建app.vue

編寫入口文件

在src目錄下創建main.js文件

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

Vue.config.debug = true;//開啟錯誤提示

//創建一個vue實例，掛載在#app上
new Vue(app);

到這里一切都準備完畢，現在開始運行webpack，wabpack將文件打包到dist目錄生成mian.js，等到運行完畢

現在打開builde/index.html

這里有個熱加載的插件，根目錄下運行 npm start 打開http://localhost:9010/build/i...同樣效果

GPU云服務器云服務器基于webrtc的多人視頻聊天服務實例 vue實例屬性基于hadoop的云存儲實例 webpack的作用

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

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

Vue.js資源分享

摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

vpants 2019-08-20 14:21 評論0 收藏0
基于vue.js和webpack的的實例項目

摘要：周末花時間做了一個基于構建的新聞移動端項目，簡單演示了，，，的使用，歡迎各種交流，建議。周末花時間做了一個基于Vue2.3 + Webpack構建的vue新聞移動端項目，簡單演示了vue-router，vue-axios，vue-lazyload，vue-awesome-swiper的使用，歡迎各種交流，建議。項目地址：https://github.com/daoket/vue......

CollinPeng 2019-08-20 16:11 評論0 收藏0
前端開發之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0
Vue.js 子組件的異步加載及其生命周期控制

摘要：本文主要對組件化開發中子組件的異步加載和其生命周期進行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時，我們可能需要在子組件實例化或者叫創建完畢后做某些事情。前端開發社區的繁榮，造就了很多優秀的基于 MVVM 設計模式的框架，而組件化開發思想也越來越深入人心。這其中不得不提到 Vue.js 這個專注于 VM 層的框架。本文主要對 Vue...

lidashuang 2019-08-22 11:17 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0