1 组件
默认的组件有
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
添加组件
# 跨域访问
yarn add axois
# 页面框架
yarn add element-ui
# 模块化Lodash，按需加载babel插件
yarn add babel-plugin-lodash
# 开发环境可以用console在生产环境去掉，生产环境屏蔽掉日志输出，有一定安全防护
yarn add babel-plugin-transform-remove-console
# echarts图表
yarn add echarts
# vue页面路由
yarn add vue-router
# vue状态管理
yarn add vuex
# 移动端自适应
yarn add postcss-plugin-px2rem
# 加解密
yarn add jsencrypt
# md5
yarn add js-md5
# cookie操作
yarn add js-cookie
# 进度条
yarn add nprogress
# 时间
yarn add moment
#
yarn add file-loader
#
yarn add url-loader
# 方便数组操作
yarn add lodash --save
实现一个lodash按需加载babel插件
lodash 打包体积优化及原理
babel-plugin-transform-remove-console插件的使用
在babel.config.js文件中添加这个配置
let plugins = ['lodash'];
if (process.env.NODE_ENV === "production") {
plugins.push("transform-remove-console");
}
在顶级目录新建postcss.config.js
module.exports = {
plugins: {
"postcss-plugin-px2rem": { // 把px单位换算成rem单位
rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem 为20px,淘宝的flex默认为1rem为10px
unitPrecision: 2, //允许REM单位增长到的十进制数字。
propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
propBlackList: [], //黑名单
// exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: [], //要忽略并保留为px的选择器
ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: true, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}
}
}
2 依赖
# 图片压缩
# Syntax Error: Error: Cannot find module 'gifsicle'
# 如果执行了yarn add，那么这里还需要再执行一次
cnpm install --save-dev image-webpack-loader
# gzip压缩
# peerDependencies WARNING compression-webpack-plugin@* requires a peer of webpack@^5.1.0 but webpack@4.46.0 was installed
# npm uninstall webpack webpack-cli -g
cnpm install --save-dev compression-webpack-plugin@5.0.0
#
cnpm install --save-dev lodash-webpack-plugin
#
cnpm install --save-dev mini-css-extract-plugin@1.5.0
# less依赖
yarn add less less-loader --dev
新建vue.config.js
运行自己的工程发现less的样式没有生效,less
vue2中这个警告应该忽略,按照他的警告来改反而加载不了less
3 升级组件
"element-ui": "^2.15.2"不支持el-descriptions
# 还是用npm卸载
npm uninstall element-ui
yarn add element-ui@2.15.7
如果出现下面的问题，可执行yarn config set registry https://registry.npm.taobao.org/，换源之后，再此执行yarn install
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz: connect ETIMEDOUT 104.16.17.35:443
error An unexpected error occurred: "https://registry.npmjs.org/element-ui/-/element-ui-2.15.6.tgz: connect ETIMEDOUT 104.16.17.35:443".
info If you think this is a bug, please open a bug report with the information provided in "D:\\appworks\\vuework\\eayc\\web\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error https://registry.npmjs.org/gifsicle/-/gifsicle-5.2.1.tgz: connect ETIMEDOUT 104.16.17.35:443
error https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz: connect ETIMEDOUT 104.16.17.35:443
这个或许能解决大部分问题，但不能解决所有问题，因为还是会提示
执行PS C:\WINDOWS\system32> yarn config get registry https://registry.npm.taobao.org/,但是还是出现了
error An unexpected error occurred: "https://registry.npmjs.org/echarts/-/echarts-5.2.1.tgz: connect ETIMEDOUT 104.16.20.35:443".
info If you think this is a bug, please open a bug report with the information provided in "D:\\appworks\\vuework\\eayc\\web\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz: connect ETIMEDOUT 104.16.20.35:443
即使切回yarn config set registry https://registry.npmjs.org --global，实际没多大效果。删除package-lock.json，再使用taobao源，执行npm cache clean --force，同时切换网络，因为有可能是家庭宽带的原因。可能就可以了
3.1 兼容性问题
执行yarn config set ignore-engines true后，再执行yarn intall问题解决
[2/4] Fetching packages...
error @nuxt/generator@2.16.3: The engine "node" is incompatible with this module. Expected version "^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0". Got "14.15.4"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
PS D:\appworks\vuework\eayc\door>
执行yarn seve出现下面的错误
PS D:\appworks\vuework\eayc\door> yarn dev
yarn run v1.22.19
$ cross-env MODE=dev nuxt
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'node:fs'
Require stack:
- D:\appworks\vuework\eayc\door\node_modules\rc9\dist\index.cjs
- D:\appworks\vuework\eayc\door\node_modules\@nuxt\config\dist\config.js
- D:\appworks\vuework\eayc\door\node_modules\@nuxt\cli\dist\cli-index.js
- D:\appworks\vuework\eayc\door\node_modules\@nuxt\cli\dist\cli.js
- D:\appworks\vuework\eayc\door\node_modules\nuxt\bin\nuxt.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (D:\appworks\vuework\eayc\door\node_modules\rc9\dist\index.cjs:3:17)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\\appworks\\vuework\\eayc\\door\\node_modules\\rc9\\dist\\index.cjs',
'D:\\appworks\\vuework\\eayc\\door\\node_modules\\@nuxt\\config\\dist\\config.js',
'D:\\appworks\\vuework\\eayc\\door\\node_modules\\@nuxt\\cli\\dist\\cli-index.js',
'D:\\appworks\\vuework\\eayc\\door\\node_modules\\@nuxt\\cli\\dist\\cli.js',
'D:\\appworks\\vuework\\eayc\\door\\node_modules\\nuxt\\bin\\nuxt.js'
]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
当前用的node版本是14.15.4
PS D:\appworks\vuework\eayc\door> nvm ls
16.15.1
* 14.15.4 (Currently using 64-bit executable)
14.6.0
3.2 python的问题
现在基本环境都是python3，但是node-scss低版本还是试用的python2，
故需要执行 npm install --global --production windows-build-tools，主要再power shell中用管理员账户执行
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed at getNotFoundError (D:\appworks\vuework\eayc\door\node_modules\which\which.js:13:12)
gyp verb `which` failed at F (D:\appworks\vuework\eayc\door\node_modules\which\which.js:68:19)
gyp verb `which` failed at E (D:\appworks\vuework\eayc\door\node_modules\which\which.js:80:29)
gyp verb `which` failed at D:\appworks\vuework\eayc\door\node_modules\which\which.js:89:16
gyp verb `which` failed at D:\appworks\vuework\eayc\door\node_modules\isexe\index.js:42:5
gyp verb `which` failed at D:\appworks\vuework\eayc\door\node_modules\isexe\windows.js:36:5
gyp verb `which` failed at FSReqCallback.oncomplete (fs.js:192:21)
gyp verb `which` failed python2 Error: not found: python2
安装npm install -g windows-build-tools，出现下面的异常
Downloading python-2.7.15.amd64.msi
Error: certificate has expired
Downloading Python failed. Error: Error: certificate has expired
at TLSSocket.onConnectSecure (_tls_wrap.js:1515:34)
at TLSSocket.emit (events.js:400:28)
at TLSSocket._finishInit (_tls_wrap.js:937:8)
at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:709:12) {
code: 'CERT_HAS_EXPIRED'
}
windows-build-tools will now exit.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! windows-build-tools@5.2.2 postinstall: `node ./dist/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the windows-build-tools@5.2.2 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
【完美解决】npm install 报错pngquant failed to build, make sure that libpng-dev is installed
npm安装windows-build-tools时卡在Python 2.7 is already installed, not installing again.
3.2 ERROR [BABEL] Note:
出现下面的问题，可以再中配置
"compact": false,
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"],
ERROR [BABEL] Note: The code generator has deoptimised the styling of D:\appworks\vuework\eayc\door\dist\_nuxt\app\eb407839.fdc4012.js as it exceeds the max of 500KB.
4 [vite] Internal server error: No known conditions for “./lib/locale/lang/zh-cn” entry in “element-plus” package
解决此问题的办法是锁定element-plus的版本
yarn remove element-plus
# 指定版本安装即可，版本号来自package.json中
npm install -i element-plus@2.2.5
5 安装electron的时候报错
Directory: E:\workspace\vuework\mtool\node_modules\electron
Output:
RequestError: connect ETIMEDOUT 20.205.243.166:443
at ClientRequest.<anonymous> (E:\workspace\vuework\mtool\node_modules\got\dist\source\core\index.js:970:111)
at Object.onceWrapper (node:events:634:26)
at ClientRequest.emit (node:events:531:35)
at origin.emit (E:\workspace\vuework\mtool\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
at emitErrorEvent (node:_http_client:108:11)
at TLSSocket.socketErrorListener (node:_http_client:511:5)
at TLSSocket.emit (node:events:519:28)
at emitErrorNT (node:internal/streams/destroy:169:8)
at emitErrorCloseNT (node:internal/streams/destroy:128:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
执行yarn config set electron_mirror https://npmmirror.com/mirrors/electron/再安装就可以了
扫一扫
1591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
