1. 前端环境的安装与配置
前端环境的安装与配置？一、工具安装
1.编辑器
2.Git(分布式的代码管理工具)
3.Photoshop
4.Nodejs链接
二、 环境配置
1.配置git：
1.1 设置Git的user name和email：
$ git config --global user.name "name"
$ git config --global user.email "[email protected]"
1.2 生成SSH密钥过程：(看需求配置)
$ ssh-keygen -t rsa -C "[email protected]"
3个回车，密码为空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
………………
最后得到了两个文件：id_rsa和id_rsa.pub
添加密钥到ssh：
登陆gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件，复制出里面的内容，添加到 key 内，此时 Title 会自动填上你的邮箱，没有的话手动填写, ADD KEY
1.3 拉取代码到本地(权限)
创建一个存放项目的文件夹，在该文件夹下，单击右键，选择git bash,打开git命令框，编写命令：git clone [email protected]:xx/xx.git（可以在gitlab项目中找到存放地址，gitlab地址：http://gitlab.vchangyi.com ），按回车，就可以从gitlab上clone代码到本地文件夹
1.4 手动安装nodejs，如果是pc端安装的话，nodejs版本不能过低。
安装最新版的话npm安装项目依赖会有问题，手机端gulp无法启动，所以建议安装nodejs V6。
1.5 测试node是否安装成功
在git 命令窗或者node 命令窗中输入命令 ：node -v
1.6 同理，测试npm是否安装成功npm -v
1.7安装gulp
在项目下打开git 命令窗，从淘宝源上自行安装，这个时间需要等待和耐心，也会有网络原因导致安装失败，如果安装失败可以多来几次，直到成功为止。
如果是pc端：npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads
npm 安装时候 持久使用淘宝源 设置:
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
或
npm info express
2. vue 前端设置跨域多代理
在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1: 配置环境变量 .env.development
2: 配置项目根目录下的vue.config.js 找到devServer
PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！
3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字😄）
打开proxy.js
proxy_api 就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数，参数是'/xx/xxx/fetch/list'，return (proxy_api + path)
需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：
所以不需要在src/utils/request.js 中对代理的请求进行拦截
如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。
至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api' 时走额外代理～
3. 【前端小知识】vue的publicPath
publicPath配置
项目请求根路径配置
项目在打包后，需要改变访问根路径
在该目录下vue.config.js进行配置
// 项目根目录下的vue.config.js文件
4. 如何搭建web前端框架
搭建web前端框架步骤如下：
1、确定项目使用的技术
根据项目的需求等来选择使用的技术（这里以angular4 + typsescript + nodejs+mongodb举例）
2、新建一个项目的工作文件夹
使用npm init初始化项目，根据问题配置，一般是直接回车使用默认配置,生成package.json文件
3、新建一个index.html页面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript
6、新建webApp目录，这里面放的是所有html页面和js代码，首先得有个入口文件，与system.config.js配置文件中的入口文件名一样，app.mole.ts，里面引入了所有js文件，不被引入的在加载时都不会被加载
7、打包(将代码压缩，使程序运行速度更快）
5. 配置Windows的前端开发环境
node -v
npm -v
配置镜像：
方法1
npm config set registry https://registry.npm.taobao.org 设置taobao源
npm config get registry 查看设置
方法2
npm install -g nrm
nrm use taobao
nrm ls 查看淘宝站点镜像之外还有其他的
cmder设置
3.配置环境变量
最后 code ~/.bashrc 在文件最后加上
在web里运行git ？？？？ 几次都差点没行 环境变量也配置了呀
D:\Software\cmder\vendor\git-for-windows\mingw64\bin\git.exe
而不是D:\Software\cmder
似乎我有部分项目用的yarn而不是npm
xxxxxxxxxxxxxxxxxxxxxxx
实事求是，公司的蜗牛网速搞了我几乎一天
6. 前端可以直接拿到wx.config需要的签名之类的吗
config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
其中主要获取signature这个参数,官方文档地址 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
获取signature主要分四部
1、使用APPID和APPSecret获取access_token；
2、使用access_token获取jsapi_ticket ；
3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串；
4、对第三步的字符串进行SHA1加密，得到签名。
注意事项：
1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2、签名用的url必须是调用JS接口页面的完整URL。
3、出于安全考虑，开发者必须在服务器端实现签名的逻辑。
第一步:获取access_token(需要在服务器上 )
/**
* 微信小程序获取accessToken
*
* @author Mr.Wen
* @time 2017年8月28日
*/
public class GetAccessTokenUtil {
// 网页授权接口
public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";
public static Map<String, String> getAccessToken(String appid, String appsecret) {
String requestUrl = GetPageAccessTokenUrl.replace("APPID", appid).replace("SECRET", appsecret);
HttpClient client = null;
Map<String, String> result = new HashMap<String, String>();
String accessToken = null;
try {
client = new DefaultHttpClient();
HttpGet httpget = new HttpGet(requestUrl);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String response = client.execute(httpget, responseHandler);
JSONObject OpenidJSONO = JSONObject.fromObject(response);
accessToken = String.valueOf(OpenidJSONO.get("access_token"));
result.put("accessToken", accessToken);
} catch (Exception e) {
e.printStackTrace();
} finally {
client.getConnectionManager().shutdown();
}
return result;
}
}
第二步:获取jsapi_ticket
/**
* @author Mr.Wen
* @description 获取ticket
* @date 2018/3/29
*/
public class JsapiTicketUtil {
// 网页授权接口
public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
public static Map<String, String> JsapiTicket(String accessToken) {
String requestUrl = GetPageAccessTokenUrl.replace("ACCESS_TOKEN", accessToken);
HttpClient client = null;
Map<String, String> result = new HashMap<String, String>();
try {
client = new DefaultHttpClient();
HttpGet httpget = new HttpGet(requestUrl);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String response = client.execute(httpget, responseHandler);
JSONObject OpenidJSONO = JSONObject.fromObject(response);
String errcode = String.valueOf(OpenidJSONO.get("errcode"));
String errmsg = String.valueOf(OpenidJSONO.get("errmsg"));
String ticket = String.valueOf(OpenidJSONO.get("ticket"));
String expires_in = String.valueOf(OpenidJSONO.get("expires_in"));
result.put("errcode", errcode);
result.put("errmsg", errmsg);
result.put("ticket", ticket);
result.put("expires_in", expires_in);
} catch (Exception e) {
e.printStackTrace();
} finally {
client.getConnectionManager().shutdown();
}
return result;
}
}
第三部:用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串
String noncestr = WXUtil.generate();//随机字符串
String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳
//4获取url
//5、将参数排序并拼接字符串
String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
第四部:对第三步的字符串进行SHA1加密，得到签名,并返回结果
String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
//6、将字符串进行sha1加密
String signature = SHA1.SHA1(str);
Map<String,String> map=new HashMap();
map.put("timestamp",timestamp);
map.put("accessToken",accessToken);
map.put("ticket",ticket);
map.put("noncestr",noncestr);
map.put("signature",signature);
7. 前端如何配置不同镜像源
1、直接修改镜像源
npm config set registry https://registry.npm.taobao.org
npm config get registry
2、安装cnpm (不推荐使用)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、nrm (可选 如果已经做了1 就不需要设置了)
npm i nrm -g
nrm -V 验证版本
nrm ls | list 查看可切换镜像源
nrm use cnpm | npm | taobao taobao 是最快的 建议使用
yarn
npm i yarn -g
yarn -v
4、yarn config set registry https://registry.npm.taobao.org
yarn config get registry
npm 常用命令
npm install 包名 -g | --save-dev(-D) --save(-S)
npm uninstall 包名 -g | --save-dev(-D) --save(-S)
yarn 常用命令
yarn add 包名 -g | --save-dev(-D) --save(-S)
yarn remove 包名 -g | --save-dev(-D) --save(-S)
8. 通俗易懂讲解vue.config.js的配置参数
贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。
publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）
参考： https://my.oschina.net/u/4446873/blog/4882847
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.xxx.com/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.com/my-app/ ，则设置 publicPath 为 /my-app/。
这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：
通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：
从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。
结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去，就ok啦。
项目中，我会在.env.proction文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可
outputDir
assetsDir
indexPath
filenameHashing
直观效果：当运行npm run build时，
打包后的文件后面都会带一个8位的hash值，那啥是个hash值？
在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。
将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相关配置
devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域
补充知识
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）
host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。
port 设置端口号
open 是否在第一次编译时是自动打开浏览器
hot 开启为true，启动热重载，自动刷新页面
https
inline
overlay
targe 代理的服务器，也就是api要访问的服务器。
changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分
此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。
参考链接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
这篇文章讲的也很详细 https://blog.csdn.net/guozhangqiang/article/details/87197870
9. vue2/vue3环境搭建
检查是否安装成功
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_moles：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
1.解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。
改完之后重启一下即可。
2.为了避免端口冲突，也可以修改port，打开目录同上
更改成功：
1. 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)
2.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli
3.全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init
4.可以进行创建项目了
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
3.版本不同 安装方式也不同
vue-cli2: 命令 npm install -g vue-cli
vue-cli3: 命令 npm install -g @vue/cli
3.版本不同的创建项目方式不同
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
4.vue-cli2和vue-cli3 安装完后的 项目目录不一样
5.安装指定版本的vue
npm install -g @vue/ [email protected]
vue-cli3.0项目目录结构
vue-cli2.0项目目录结构
vue-cli4.5.15 的vue2项目目录
10. 求解答关于Vue.config.js文件的详细配置
这里是创建代理服务器，访问的时候会通过代理服务器转发，所以就不会出现跨域问题。
这里的配置是以"/api"开头的地址，都通过代理访问，其他的地址则不通过代理，后面的是代理地址。