前端各类安装总结

安装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】