如何解決Vue cli構建及項目打包以及出現的問題

這篇文章主要介紹了如何解決Vue cli構建及項目打包以及出現的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1. 首先安裝node,推薦偶數版本;好了之后檢查一下: node -v;出現版本好即為安裝成功;win10家庭版本的msi版本的時候出現無法打開,更別說安裝,可以自行百度;

2.nmp install vue-cli -g; ----->>vue -V;出現版本號就是安裝成功了;

3.cd 到指定目錄; vue init webpack 項目名稱; 一些提示信息一一不說了;安裝成功之后會有提示:一般按照他的提示步驟就可以了,cd 項目文件夾,

npm install(這個是安裝 packjson.json的依賴,非常重要) , 最后運行 npm run dev; 會自動在8080端口打開網頁,那么環境這一步是成功了;

4.介紹一下幾個非常中重要的文件(夾):
config目錄下的index.js是配置,node_modules下全部都是所要依賴模塊的文件夾;src是本地資源;比如我們要編寫的文件;其中main.js是入口文件;

5.下面介紹模塊化引入vue文件,好記性不如爛筆頭:

項目目錄部分:

比如要在App.vue中引入其他模塊;

importcomponentA @/components/componentA //下圖ruter-view標簽僅僅表示顯示,有組件不一定能夠顯示,必須要router-view一下;當前app.vue為默認根模塊;

在Banana中應該這樣: <一個標準的vue文件應該包括 下面三種大類的標簽> 其中name屬性必不可少;

注意了:這里面的不需要聲明一個 變量=new Vue({ }) 之類的,這個文件本身就代表一個實例了,在export default 內中 其實就是一個 vue字面量對象的描述,可以這樣認為;

關于路由傳參數:(以下是main.js), 這里有一個坑;

用 webpack vue-cli 自動構建項目后, 注意路由模塊,是放在main.js下,還是放在router文件下的index.js

廢話少說: 這里關鍵是正確引入路由,正確配置路由(構建路由對象),每一個路由給他一個name屬性方便使用路由,在者,路由傳參中, path 最后的冒號可以寫可以不寫,前提是(以下是組件 componentA):

<router-link>中 params:{}這個對象中寫了, 寫與不寫的區別就是 不寫 在url地址欄中顯示或者不顯示; 但是在子組件中用 $router.params都可以找到;

以下為Apple子組件: 也可取出來 {{$route.params.color}}

如何在項目中使用第三個庫呢?

比如使用jquery,首先也是 npm install jquery@3.2.1 ;

在main.js(入口文件)import jquery from 'jquery'; 然后在一個組件中使用的時候 import jquery from "jquery"; 這樣jquery就是全局變量了;

也可這樣:比如使用百度的echarts庫: 在main.js引入:

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

在使用的時候就直接是 this.$echarts了,this指的是vue實例;

項目完成后用 npm run build可以打包項目; 打包配置在config文件夾下的 index.js 的 build對象下;如需在本里預覽,assetsPublicPath: './',改成相對路徑; 如果你的css文件中引用了background相對路徑,那么在打包后預覽后是會出現資源找不到的情況的;可以在build文件夾的utils.js下:新增這個publicPath這個屬性;

下面具體講一下History模式：

 1、 為什么要開啟？

首先，你的網站首頁，域名后跟著一個大大的#，太難看了！跟開發他美麗帥氣的程序汪完全不搭。

其次，官網上人家尤大大說了：“ history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。”

怎么理解呢？舉個常見的場景說，就是如果你開發的是手機端應用，你從主頁點擊進去新聞列表，此時你看完新聞，想要回到首頁，按以前的想法，那就是一個href重新打開首頁呀。然后首頁重新加載js,向服務器請求新聞列表,等等這些初始化的工作，都要重新做一次。對于用戶而言，這個過程慢、費流量，用戶體驗其實是不好的。

而html的history模式，就能夠讓你從新聞詳情頁跳轉到首頁，不需要再次進行數據的初始化了。當然，這可能需要配合vuex來進行了。

 2、 在哪兒開啟？

在你的實例化Router的時候配置開啟即可:

const routers = new VueRouter({
 routes: router,
 mode: 'history'

})

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決Vue cli構建及項目打包以及出現的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!