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

資訊專欄INFORMATION COLUMN

vue-cli+webpack開發(fā)流程總結(jié)

shiweifu / 3316人閱讀

摘要：加載百度地圖后報錯的，我們再加載一遍你的秘鑰你的秘鑰為當(dāng)前時間戳獲取方法

一、環(huán)境搭建

1、安裝node.js在計算機中
https://nodejs.org/en/download/ （此為node.js官方下載地址）
安裝完成后打開cmd命令提示符

node -v        //查詢node版本號
npm -v        //查詢npm版本號

2、如果npm使用網(wǎng)速跟不上，可以選擇安裝cnpm
https://npm.taobao.org/ （此為淘寶鏡像官方下載地址）

運行命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g nrm
nrm ls
nrm use cnpm
二、項目構(gòu)建

1、初始化創(chuàng)建vue項目

vue init webpack

2、在彈出的消息中做出回應(yīng)

Project name：輸入項目的名稱（不能過長，不能為中文）
Project description：項目的描述
Author ：項目作者
Runtime：選擇第一個回車
Install vue-router：安裝路由模塊（yes）
Use ESLint to lint your code：代碼檢測（no）
Set up unit tests：安裝測試（no）
Setup e2e tests with Nightwatch：不明確（yes）
選擇使用安裝的包管理工具：（選擇npm）

3、在完成以上步驟后，將自動開始執(zhí)行npm安裝模塊命令，如果需要用cnpm淘寶鏡像進行安裝則（可以ctrl+c強行中止），重新進入項目目錄中查看是否存在node_modules文件夾，若存在則刪除后再進行cnpm install安裝（不這么做項目可能后面跑不起來?。。。?/p>

4、所需模塊安裝完成后，在項目文件夾內(nèi)使用cmd命令行工具可執(zhí)行：

npm run dev

命令行執(zhí)行完成之后能夠在瀏覽器localhost:8080端口瀏覽初始項目

之后是重點，記筆記??！

三、項目打包

1、此步驟為解決assets打包后圖片地址錯誤問題
打開config文件夾下的index.js文件，并修改此文件build對象中的assetsPublicPath屬性值："/"，修改為如圖所示的："./" 或 ""(空字符串)。

2、此步驟為解決取消打包后生成map調(diào)試文件，導(dǎo)致打包后項目過大的問題
打開config文件夾下的index.js文件，并修改此文件build對象中的productionSourceMap: true,將map改為false;

3、此步驟為解決打包后css背景圖引用路徑出錯的問題
打開build文件夾下的utils.js文件，找到如下代碼段，并添加紅框內(nèi)的代碼

4、此步驟為解決promise語法兼容的問題
cmd命令行運行：

npm install --save babel-polyfill

安裝完成后打開build文件夾下的webpack.base.conf.js文件添加配置：

最后在main.js中進行引入：

四、同源策略解決方案

1.cmd命令行運行：（若使用vue-cli搭建的項目可忽略此命令，項目中已被裝載，可進入步驟2）

npm i http-proxy-middleware -D

2.在config文件夾下創(chuàng)建proxyConfig.js并添加如下相關(guān)代碼：

module.exports = {
    proxyList: {
        "/api": {
            target: "localhost:8060",    //需要代理的遠程API的HOST
            changeOrigin: true,          //是否跨域
            pathRewrite: {               //API別名
                "^/api": ""
            }
        }
    }
}

3.在config文件夾下打開index.js中引入剛創(chuàng)建的proxyConfig.js

const proxyConfig = require("./proxyConfig")

并在dev對象中添加入下圖所示的代碼段：（注：由于修改了配置文件，當(dāng)前運行中的項目需要重啟后才能生效配置文件的修改）

五、axios使用技巧

1.首先進行axios的裝載，使用cmd命令提示符運行命令：

npm i axios -S

2.在main.js中引入axios，并將其注入至全局Vue實例的原型對象中，之后將可以在組件內(nèi)使用this.axios進行調(diào)用：

import axios from "axios"
Vue.prototype.axios = axios;

注：
GET請求時，axios入?yún)椋簆arams，參數(shù)值為：JSON類型數(shù)據(jù)，例：

this.axios({
      url:"http://localhost:8060/sendrequest",   //請求路徑，本地跨域可將  http://localhost:8060  替換為  /api
      headers:{},            //請求頭信息
      method:"GET",          //請求方式為GET
      params:{               //請求參數(shù)
        a:1
      }
})
.then(res=>{
      console.log(res)    //請求成功
})
.catch(error=>{
      console.log(error)  //請求異常
})

POST請求時，axios入?yún)椋篸ata，參數(shù)值需要做如下qs.stringify轉(zhuǎn)換，否則會出現(xiàn)于jquery發(fā)起請求傳參方式不同，qs可在vue組件內(nèi)直接進行import引入：

import qs from "qs"

this.axios({
      url:"http://localhost:8060/sendrequest",   //請求路徑，本地跨域可將  http://localhost:8060  替換為  /api
      headers:{},            //請求頭信息
      method:"POST",         //請求方式為GET
      data:qs.stringify({                 //請求參數(shù)
        a:1,
        b:2
      })
})
.then(res=>{
      console.log(res)    //請求成功
})
.catch(error=>{
      console.log(error)  //請求異常
})
六、性能優(yōu)化

1.router路由性能優(yōu)化
將VueRouter對象修改組件引入方式為按需引入：

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "",
      component: resolve => require(["@/components/index"], resolve),
      name: "index",
    },
    {
      path: "/home",
      name: "home",
      component: resolve => require(["@/components/home"], resolve)
    },
  ]
})

2.減少打包容量
減少main.js中對模塊的引入，例如：

import vue from "vue";
import vueRouter from "vue-router"

刪除以上代碼，將此模塊的vue.min.js/vue-router.min.js在node_modules中找出，存入項目的static靜態(tài)資源目錄下，并在index.html入口頁面中進行相對路徑的引入（此類資源script引入需寫在body標(biāo)簽內(nèi)）下圖是我所用到過的模塊

最后修改build文件夾下的webpack.base.conf.js文件進行相關(guān)模塊的全局注冊

3.關(guān)于百度地圖api按需引入的問題優(yōu)化
由于cli構(gòu)建vue項目為單頁面應(yīng)用，在index.html中全局進行引入百度地圖script方式不利于項目優(yōu)化，但動態(tài)創(chuàng)建的scirpt引入百度地圖api將會js報異常，且在https訪問下還會出現(xiàn)安全攔截，后發(fā)現(xiàn)解決方式：引入兩個百度地圖api。（加載百度地圖api后報錯的js，我們再加載一遍）

var s = document.createElement("script");
s.src= "https://api.map.baidu.com/api?v=2.0&ak=你的api秘鑰";
var s2 = document.createElement("script");
s2.src= "https://api.map.baidu.com/getscript?v=2.0&ak=你的api秘鑰&services=&t="+getTime();        //getTime為當(dāng)前時間戳獲取方法

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

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

相關(guān)文章

  • 前端開發(fā)之走進Vue.js

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

    zxhaaa 評論0 收藏0

  • Vue-cli淺入淺出

    摘要：別名相當(dāng)于前面先引入了路由插件，然后顯式聲明要用路由。注意到，等都是頁面也可以是組件，接著注冊路由器，然后開始配置路由。 搭建環(huán)境 工欲善其事必先利其器，我們的學(xué)習(xí)計劃從學(xué)會搭建Vue所需要的環(huán)境開始，node和npm的環(huán)境不用說是必須的，現(xiàn)在前端流程化很熱門，基本上新的技術(shù)都會在這套流程的基礎(chǔ)上做開發(fā)，我們只需要站在巨人的XX上裝*就可以了。我假設(shè)你的機子上已經(jīng)有了最新的node和n...

    endiat 評論0 收藏0

  • 2018年第33周-javeer對nodejs體會

    摘要：流程源處理源代碼，例如過濾任何值。工藝類從編譯后處理生成的文件，例如對類進行字節(jié)碼增強。整合后的測試執(zhí)行集成測試后執(zhí)行所需的操作。校驗運行任何檢查以驗證包裝是否有效并符合質(zhì)量標(biāo)準(zhǔn)。 nodejs和es6 nodejs的語法和es6不一樣，如模塊系統(tǒng)，一個是CommonJS的require、一個是es6的import，寫模塊也不一樣。 nodejs的npm 我來理解，nodejs類似與j...

    xiongzenghui 評論0 收藏0

  • 基于webpack模仿vue-cli（簡略版）工程化

    摘要：但高度封裝的帶來方便的同時，很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu)，以至于當(dāng)使用需要手動配置一些東西如編譯實現(xiàn)代碼壓縮，移動端適配等配置的時候往往無從下手。廢話不多說，下面我們來看看如何基于模仿實現(xiàn)項目工程化。 從零搭建vue-cli 原創(chuàng)不易，如需轉(zhuǎn)載請聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置，減輕了煩人的webpack配置流程。但高度封...

    GitCafe 評論0 收藏0

  • vue-cli解析

    摘要：在中，設(shè)置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項等參數(shù)。下面還有一個的對象，它是在本地服務(wù)器啟動時，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。 前言 這段時間，算是空出手來寫幾篇文章了。由于很久都沒有時間整理現(xiàn)在所用的東西了，所以，接下來會慢慢整理出一些文檔來記錄前段時間的工作和生活。 這篇文章的主...

    KunMinX 評論0 收藏0

發(fā)表評論

0條評論

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