前端各類安裝總結

安裝node環境

官網：https://nodejs.org/en/download/

第一步：下載安裝文件

下載地址：官網http://www.nodejs.org/download/

 

第二步：安裝nodejs

下載完成以後，雙擊 node-v0.8.16-x86.msi，開始安裝nodejs，默認是安裝在C:\Program Files\nodejs下面

 

其他步驟自行百度：http://www.javashuo.com/article/p-wqkrxcey-gs.html

安裝完node檢查一下是否安裝npm：

npm包管理器，是集成在node中的，因此安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。

 

 

 

安裝vue-cli腳手架

參考安裝網址：http://www.javashuo.com/article/p-ufkeibhw-be.html

 

選用的語法規則爲LEslint:airbnb(選第二個ES模板)

 

 

Git安裝

git安裝教程http://124.130.131.90:8001/docs/tools/tools-1ba05p095u72g

git操做http://124.130.131.90:8001/docs/tools/tools-1ba0b9adpqm7c

 

Iview安裝

解釋：iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。

1、在vue根目錄下：

命令行輸入 

 npm install --save iview

 

 

2、在main.js中添加了

import iView from 'iview'

import 'iview/dist/styles/iview.css'    // 使用 CSS

Vue.use(iView)

 

官網：https://www.iviewui.com/

 

Mockjs安裝

 

解釋：Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試。提供瞭如下模擬功能：

 

根據數據模板生成模擬數據

模擬 Ajax 請求，生成並返回模擬數據

基於 HTML 模板生成模擬數據

 

1、項目路徑下執行命令： npm install mock

2、建立mock.js文件，在此文件中引入mockjs

// 引入mockjs

const Mock = require('mockjs');

// 獲取 mock.Random 對象

const Random = Mock.Random;

 

3、main.js下：引入建立的模擬接口的文件地址

// 引入mockjs

require('./example/mock/mock');

 

 

 

4、總體應用：

 

// 引入mockjs

const Mock = require('mockjs');

// 獲取 mock.Random 對象

const Random = Mock.Random;

// mock一組數據

const tableVal = () => {

const tableValue = [];

// for (let i = 0; i < 50; i += 1) {

const newTableObject = {

aNamecardholder: Random.cname(), // 隨機生成一個常見的中文姓名

sex: Random.pick(['男', '女']), // 從數組中隨機選取一個元素，並返回。

Cardhandlingtime: `${Random.date()} ${Random.time()}`, // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd；Random.time() 返回一個隨機的時間字符串

FirstCardNumber: Random.natural('00000000000000000000', '99999999999999999999'), // 產生20位的隨機數

Contactnumber: Random.natural('00', '9999999999'), // 總次數

Maxday: Random.natural('0', '999'), // 日最大次數

Totalnumber: Random.natural('10000000000', '19999999999'), // 手機號

};

tableValue.push(newTableObject);

// }

return {

tableValue,

};

};

// Mock.mock( url, post/get , 返回的數據)；

Mock.mock('/news/index01', 'post', tableVal);

 

 

 

 

5、接口地址：

 Mock.mock('/news/index01', 'post', tableVal);

 

 

接口地址是本身定義的

 

 

Axios安裝

解釋：接口跨域請求數據

1、項目目錄下安裝axios:

npm install --save axios

 

2、配置：min.js下

  import axios from 'axios';

// 把axios加入Vue規則，即Vue.$http就是axios，能夠用this.$http直接表明axios，用this.$http能夠不限制在本頁面,

// 能夠在別的頁面進行請求數據,這樣避免了跨頁面傳值

Vue.prototype.$http = axios;

 

3、axios應用

// this.$qs.stringify(params):爲固定的寫法

// then((res):請求成功後把數據給res,res是本身定義的名稱，要有意義

// http://www.abc.com:7452/wp/webapi/tickets/sceniclist:接口的地址，若是沒有實際接口，能夠在mock中模擬假的

// this.$qs.stringify:將params的請求規則轉換成字符串格式

// 在console.log(res.data);裏是把請求的數據在控制檯打印出來，以後能夠隨意的用res,res即是經過請求規則求出的數據

this.$http.post('http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist', this.$qs.stringify(params)).then((res) => {

console.log(res.data);

});

 

與前面mock對應的

 

this.$http.post('/news/index01', this.$qs.stringify(people)).then((peoples) => {

this.data13 = peoples.data.tableValue;

this.data13[0].Cardnumber = this.Cardnumber;

this.data13[0].CertificateNo = this.CertificateNo;

this.data13[0].Startingtime = this.Startingtime[0];

this.data13[0].Terminationtime = this.Startingtime[1];

this.data13[0].Cardtype = this.Cardtype;

this.data13[0].Cardstatus = this.Cardstatus;

});

 

 

4、如何查找瀏覽器項目的接口地址和接口數據

一、找到接口頁面，而後按F12

二、找到Network下的XHR,按F5

三、出現name下的文檔數據

四、Headers下的Request URL是接口地址

   Preview下的是格式化的數據

   Response下的是原始數據

五、接口數據字段：Name下的Headers下的FormData數據

 

5、請求接口圖片並顯示在頁面（跨域問題）

  在config下的index.js裏的module.exports下的dev里加入：

proxyTable: {

'/upload': {

target: 'http://www.tshuiwan.com', //目標接口域名

changeOrigin: true, //是否跨域

pathRewrite: {

'^/upload': '/upload' //重寫接口

}

}

},

 

 

 

 

qs安裝

用途：在 axios中，利用QS包裝data數據

1、安裝：在項目目錄下：

  npm install qs  

 

2、在main.js目錄下：

 // qs爲請求規則轉換成字符串

import qs from 'qs';

 

// 同上axios

Vue.prototype.$qs = qs;

 

3、應用 

 // this.$qs.stringify(params):爲固定的寫法

// then((res):請求成功後把數據給res,res是本身定義的名稱，要有意義

// http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist:接口的地址，若是沒有實際接口，能夠在mock中模擬假的

// this.$qs.stringify:將params的請求規則轉換成字符串格式

// 在console.log(res.data);裏是把請求的數據在控制檯打印出來，以後能夠隨意的用res,res即是經過請求規則求出的數據

this.$http.post('http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist', this.$qs.stringify(params)).then((res) => {

console.log(res.data);

});

 

Electron-vue安裝

1、安裝地址

 https://www.jianshu.com/p/c363a12de860

https://www.yzlfxy.com/jiaocheng/JavaScript/331530.html

2、官網：

https://electronjs.org/docs

 

 

vue-devtools安裝

1、安裝地址：

https://www.jianshu.com/p/dab699ca2fd4

http://www.javashuo.com/article/p-bmnxufkr-ep.html

安裝地址：https://github.com/vuejs/vue-devtools

 

 vue-devtools electron安裝：https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

2、運用地址：

https://baijiahao.baidu.com/s?id=1590124234722174869&wfr=spider&for=pc

 

Vscode格式化的樣式設置

1、文件

Settings.json

 

2、路徑

  設置--->用戶（經常使用設置）【文本編輯器】上面--->在setting.json中編輯

 

yarn安裝

1、安裝yarn前確保已經安裝node.js

2、在控制檯運行：

　　npm install -g yarn 
   查看版本：yarn --version

3、運用詳情和yarn與npm比較網址參考：

　　https://blog.csdn.net/yw00yw/article/details/81354533

4、安裝完yarn要配置用戶系統的環境變量

　　參考：【https://blog.csdn.net/weixin_34162629/article/details/91659127】