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

資訊專欄INFORMATION COLUMN

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

Yujiaao / 650人閱讀

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

webpack-vue 0.項(xiàng)目初始化 
cd "to/your/path" npm init
1.安裝 webpack

分為全局安裝和項(xiàng)目內(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", //項(xiàng)目入口文件
         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 學(xué)習(xí)",
            inject:"body",
            filename:"index.html",
            template:path.resolve(__dirname, "index.html")
        }),
        ...
    ]

再次執(zhí)行webpack命令可看到多了一個index.html文件
這個文件是根據(jù)模板生成的并自動引入打包生成的js文件
運(yùn)行打包后的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打包運(yùn)行index.html(打包的文件)報(bào)錯，經(jīng)查在webpack.config.js里面配置：

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

再次運(yùn)行即可看到效果

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 瀏覽器自動打開頁面，更改文件后即可看到頁面實(shí)時更新

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

項(xiàng)目根目錄新建.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"}}
   ...

配置完運(yùn)行報(bào)錯：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 }
    })

保存后運(yùn)行 npm start 即可看到效果

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

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

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

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

相關(guān)文章

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

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

    fish 評論0 收藏0

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

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

    30e8336b8229 評論0 收藏0

  • 無痛學(xué)會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構(gòu)渲染

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

    Pluser 評論0 收藏0

  • Vue2學(xué)習(xí)之旅一：初始化項(xiàng)目搭建（不帶路由）

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

    lijy91 評論0 收藏0

  • Vue 筆記三：Vue2.0與1.0的區(qū)別

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

    Big_fat_cat 評論0 收藏0

發(fā)表評論

0條評論

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