一、vue2+elementUI
1、初始化项目
环境 Node 12 以下
全局安装 webpack
npm install webpack@3.6.0 -g全局安装 vue 脚手架
npm install -g vue-cli初始化 vue 项目
vue init webpack my-project
npm install2、打包配置
修改config/index.js 文件
里面的dev是开发环境，build是打包部署运行的版本。
找到build下面的 assetsPublicPath: ‘/’，然后修改为 assetsPublicPath: ‘./’（即“/”前加点）
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改此处
...
}上面这步修改完可能有些直接npm run build打包后项目都正常了，可跳过下面第二步，如果打包后运行有类似下面的报错，需进行下面第二步的配置。
类似打包出错显示空白页，或者Failed to load resource: net::ERR_FILE_NOT_FOUND
修改 build/webpack.prod.conf.js 文件
在里面的output添加参数：publicPath:’./’
...
output: {
path: config.build.assetsRoot,
publicPath: './', // 修改此处
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
...element ui 字体文件加载出错
打开 build/utils.js 文件，在如下位置添加 publicPath: ‘…/…/’
...
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 修改此处
})
} else {
return ['vue-style-loader'].concat(loaders)
}
...然后就可 run npm build 了
3、环境隔离
区分后端正式环境和测试环境的接口地址
创建文件 ： /static/config/index.js
/**
* 开发环境
*/
;(function () {
window.SITE_CONFIG = {};
// api接口请求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8000/api';
// cdn地址 = 域名 + 版本号
window.SITE_CONFIG['domain'] = './'; // 域名
window.SITE_CONFIG['version'] = ''; // 版本号(年月日时分)
window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();创建文件：static/config/index-prod.js
/**
* 生产环境
*/
;(function () {
window.SITE_CONFIG = {};
// api接口请求地址
window.SITE_CONFIG['baseUrl'] = '正式环境路径';
// cdn地址 = 域名 + 版本号
window.SITE_CONFIG['domain'] = './'; // 域名
window.SITE_CONFIG['version'] = ''; // 版本号(年月日时分)
window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();修改 index.html，按条件引入两个js的立即执行文件
process.env.NODE_ENV 参数：通过 npm run build 打包时，会在build/build.js 中对其进行赋值
process.env.NODE_ENV = 'production'
而通过 npm run dev 运行项目时，不会对其赋值
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>rabbit-front</title>
<% if (process.env.NODE_ENV === 'production') { %>
<!-- 生产环境 -->
<script src="./static/config/index-prod.js"></script>
<% }else { %>
<!-- 开发环境 -->
<script src="./static/config/index.js"></script>
<% } %>
</head>安装 element-ui
npm i element-ui -S二、React
三、微信小程序+vant
（1）通过微信开发者工具初始化项目
（2）初始化为 npm 项目
在项目目录下执行
npm init（3）安装vant/weapp
npm i @vant/weapp -S --production（4）构建npm
微信开发者工具：工具 - 构建 npm
右上角的详情—本地设置—-（勾选）使用npm模块（高版本的微信开发者工具可能没有）
（5）修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": false,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./‘即可
有个坑，project.config.json里面的”packNpmManually”值一定要是flase，vant组件里面写的都是true，这是一个巨坑
（6）防止样式 冲突
删除 app.json 下的 "style": "v2"
四、gnvm
1、安装gnvm
1、要用管理员权限启动cmd；2.确保node是空闲的（将使用中的node关闭）
2、安装gnvm：
gnvm下载地址:64-bit 链接：https://pan.baidu.com/s/1IN02LwtkFIqKluA4HQjFdw 提取码：c0qu
（1）下载完以后会有一个gnvm.exe 文件
（2）将gnvm.exe 文件放在Node.js 所在的文件夹，
3、验证gnvm是否可用：
gnvm version4、这时候就可以使用gnvm指令管理node版本了
2、gnvm相关指令
1、安装多个 node 版本
gnvm install latest # 安装最新版本的 node
gnvm install 10.0.0 # 安装指定版本，也可以指定安装32位或64位，eg: gnvm install 10.0.0-x64
gnvm update latest #更新本地 latest 的 node 版本2、卸载任意版本的 node
gnvm uninstall latest # 卸载最新版本的 node
gnvm uninstall 10.0.0 # 卸载指定版本3、查看本地所有安装的 node 版本
gnvm ls4、切换任意版本的 node
gnvm use 10.0.05、安装 npm
gnvm npm latest6、安装淘宝镜像
gnvm config registry TAOBAO
