1. 首先安裝node,推薦偶數(shù)版本;好了之后檢查一下: node -v;出現(xiàn)版本好即為安裝成功;win10家庭版本的msi版本的時(shí)候出現(xiàn)無(wú)法打開(kāi),更別說(shuō)安裝,可以自行百度;

2.nmp install vue-cli -g; ----->>vue -V;出現(xiàn)版本號(hào)就是安裝成功了;

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

npm install(這個(gè)是安裝 packjson.json的依賴,非常重要) , 最后運(yùn)行 npm run dev; 會(huì)自動(dòng)在8080端口打開(kāi)網(wǎng)頁(yè),那么環(huán)境這一步是成功了;

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

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

項(xiàng)目目錄部分:

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

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

在Banana中應(yīng)該這樣: <一個(gè)標(biāo)準(zhǔn)的vue文件應(yīng)該包括 下面三種大類的標(biāo)簽> 其中name屬性必不可少;

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

關(guān)于路由傳參數(shù):(以下是main.js), 這里有一個(gè)坑;

用 webpack vue-cli 自動(dòng)構(gòu)建項(xiàng)目后, 注意路由模塊,是放在main.js下,還是放在router文件下的index.js

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

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

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

如何在項(xiàng)目中使用第三個(gè)庫(kù)呢?

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

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

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

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

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

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

下面具體講一下History模式：

 1、 為什么要開(kāi)啟？

首先，你的網(wǎng)站首頁(yè)，域名后跟著一個(gè)大大的#，太難看了！跟開(kāi)發(fā)他美麗帥氣的程序汪完全不搭。

其次，官網(wǎng)上人家尤大大說(shuō)了：“ history 模式，這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。”

怎么理解呢？舉個(gè)常見(jiàn)的場(chǎng)景說(shuō)，就是如果你開(kāi)發(fā)的是手機(jī)端應(yīng)用，你從主頁(yè)點(diǎn)擊進(jìn)去新聞列表，此時(shí)你看完新聞，想要回到首頁(yè)，按以前的想法，那就是一個(gè)href重新打開(kāi)首頁(yè)呀。然后首頁(yè)重新加載js,向服務(wù)器請(qǐng)求新聞列表,等等這些初始化的工作，都要重新做一次。對(duì)于用戶而言，這個(gè)過(guò)程慢、費(fèi)流量，用戶體驗(yàn)其實(shí)是不好的。

而html的history模式，就能夠讓你從新聞詳情頁(yè)跳轉(zhuǎn)到首頁(yè)，不需要再次進(jìn)行數(shù)據(jù)的初始化了。當(dāng)然，這可能需要配合vuex來(lái)進(jìn)行了。

 2、 在哪兒開(kāi)啟？

在你的實(shí)例化Router的時(shí)候配置開(kāi)啟即可:

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

})

上述就是目前遇到的一些基本問(wèn)題;希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論