Vue2從0到1(一)：用webpack打包vue

Yujiaao 發(fā)布于2019-08-22 11:12 / 658人閱讀

摘要：項目初始化安裝分為全局安裝和項目內(nèi)安裝配置文件項目入口文件輸出編譯后文件地址及文件名命令行里面執(zhí)行命令即可看到編譯后的文件安裝學習再次執(zhí)行命令可看到多了一個文件這個文件是根據(jù)模板生成的并自動引入打包生成的文件運行打包后的即可看到效果。

webpack-vue 0.項目初始化

cd "to/your/path" npm init

1.安裝 webpack

分為全局安裝和項目內(nèi)安裝

    npm install webpack -g
    npm install webpack --save-dev

2.配置webpack.config.js文件

     const path = require("path");

     module.exports = {
         entry: "./Script/main.js", //項目入口文件
         output:{                    //輸出編譯后文件地址及文件名
             path: path.resolve(__dirname, "dist"),
             filename: "js/bundle.js"
         }
     };

命令行里面執(zhí)行 webpack 命令即可看到編譯后的文件

3安裝webpack-html-plugin

npm install html-webpack-plugin --save-dev

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    ...
    plugins:[
        ...
        new HtmlWebpackPlugin({
            title:"react 學習",
            inject:"body",
            filename:"index.html",
            template:path.resolve(__dirname, "index.html")
        }),
        ...
    ]

再次執(zhí)行webpack命令可看到多了一個index.html文件
這個文件是根據(jù)模板生成的并自動引入打包生成的js文件
運行打包后的index.html即可看到效果。

4.安裝Vue

   npm install vue -save

修改main.js：

    import Vue from  "vue";

    var MainCtrl = new Vue({
        el:"#main",
        data:{
            message:"Hello world"
        }
    })

修改index.html:

   
      {{message}}

執(zhí)行webpack打包運行index.html(打包的文件)報錯，經(jīng)查在webpack.config.js里面配置：

    ...
    resolve: { alias: { "vue": "vue/dist/vue.js" } }

再次運行即可看到效果

5.安裝webpack-dev-server熱更新

    npm install webpack-dev-server -g
    npm install webpack-dev-server --save-dev
    npm install vue-hot-reload-api --save-dev

配置webpack.config.js

    ...
    devServer: {
        historyApiFallback: true,
    },
    ...

配置package.json里面命令

    "start":"webpack-dev-server --hot --inline --progress --open"

執(zhí)行 npm start 瀏覽器自動打開頁面，更改文件后即可看到頁面實時更新

6.安裝babel

在使用.vue文件之前先要安裝babel(將es6語法轉(zhuǎn)化為es5)

    npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev 
    npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev

項目根目錄新建.babelrc文件、配置：

    {
    "presets": ["es2015", "stage-0"],
    "plugins": ["transform-runtime"]
    }

7.安裝vue-loader處理.vue的文件

安裝loader 處理.css,.vue文件

npm install css-loader style-loader vue-loader vue-html-loader --save-dev

配置webpack.config.js

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

配置完運行報錯：Cannot find module "vue-template-compiler"
安裝vue-template-compiler

cnpm install vue-template-compiler --save-dev

修改index.html:

新建src/index.vue:

修改main.js

    ...
    import App from "./src/index.vue";

    new Vue({
        el: "#main",
        components: { App }
    })

保存后運行 npm start 即可看到效果

修改代碼，即可看到更新后的效果

后面將持續(xù)更新vue-router，vuex的內(nèi)容。代碼托管在github上歡迎star

GPU云服務器云服務器 vue2.0 cdn 從0到1搭建視頻通話系統(tǒng) 從0開始到1千萬用戶 Vue2x

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

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

無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態(tài)子樹就是不需要動態(tài)性的子樹并且從渲染函數(shù)中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

Pluser 2019-08-01 15:52 評論0 收藏0
Vue2學習之旅一：初始化項目搭建（不帶路由）

摘要：除此之外，你還可以運行打包命令此時之前說的打包生成的文件應該就生成了，或者選擇用瀏覽器打開應該也可以看見和剛剛一樣的結果。而如何創(chuàng)建一個對象是知道，因此開頭引入了，并使用它常見了一個對象，然后這個對象就管理了這一塊區(qū)域。作者：心葉時間：2018-04-25 16:33 本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...

lijy91 2019-08-22 16:43 評論0 收藏0
Vue 筆記三：Vue2.0與1.0的區(qū)別

摘要：升級的區(qū)別與的斷層式升級不同，延續(xù)了自己的風格。在命名方式和上有一些區(qū)別，掌握它們是你升級整個項目的關鍵。以下內(nèi)容都是來源于個人項目的一些經(jīng)驗之談，并非系統(tǒng)性的闡述。總目錄前端經(jīng)驗收集器轉(zhuǎn)載自個人建了前端學習群，旨在一起學習前端。升級的區(qū)別與angular的斷層式升級不同，vue延續(xù)了自己的風格。在命名方式和API上有一些區(qū)別，掌握它們是你升級整個項目的關鍵。以下內(nèi)容都是來源于個人...

Big_fat_cat 2019-08-21 11:35 評論0 收藏0