vue的组件\依赖

warrah

已于 2024-04-08 20:50:16 修改

阅读量1.1k

点赞数

分类专栏：岁月云——Web系统最佳实践岁月会计云——前端开发文章标签： vue nvm

于 2021-08-14 15:26:45 首次发布

本文链接：https://blog.csdn.net/warrah/article/details/119696894

版权

岁月云——Web系统最佳实践同时被 2 个专栏收录

117 篇文章 0 订阅

订阅专栏

岁月会计云——前端开发

73 篇文章 0 订阅

订阅专栏

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

warrah

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的组件\依赖

yarn vue nvm
复制链接

扫一扫

专栏目录

vue的组件\依赖

“相关推荐”对你有帮助么？