项目中遇到问题的解决方法合集

以下内容主要是为了方便记录自己在工作中遇到的项目问题搜寻到的解决方法，肯定方法不唯一，这里只是给出解决了我的问题的方法，大家走过路过随便瞧瞧较好啦嘻嘻

---

1、使用@vue/cli 4.x 创建vue项目时使用iconfont 图标无法显示——前者版本问题

由于4.x版本是10月份刚发布的，可能存在版本冲突问题，目前没有找到合适的解决方法，将@vue/cli版本降低成3.0后图标能正常显示

2、vue项目无法实现热更新

我的做法是将卸载旧版本的 vue-cli ，看官网描述：

关于旧版本：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

卸载后便能热更新了，懵逼一脸……

3、git关联github远程库

参考：Git关联远程GitHub仓库

4、mongodb安装连接并加到系统服务中

我下载的版本选择的是3.XX的版本，4.xx最新版路径比较深，也比较大。如果安装出现错误“service MongoDB failed to start，verify that you have sufficient privileges to start...”可直接选择忽略

随后创建相应的文件夹，参考如何安装mongodb并添加到windows服务，但是文章内的第五步系统服务连接时，我使用的是下面链接的相关的命令行

1.   mongod --logpath E:\mongodb\logs\mongodb.log --logappend --dbpath E:\mongodb\data\db --serviceName MongoDB --install --auth(auth表示需不需要加上用户验证，最好不要，否则访问时需要验证你的身份) // 没有文字提示即表示配置成功

2.  net start MongoDB // 启动服务

->出现“服务没有响应控制功能”错误

3.  sc delete MongoDB  //先卸载掉服务

//再重复第一步和第二部即可启动服务

参考：MongoDB下，启动服务时，出现“服务没有响应控制功能”解决方法、Nodejs学习笔记（十四）— Mongoose介绍和入门

cmd命令行直接跳转相应的地址可以键入

cd /d 你的路径

视图工具没有使用他们家自配的compass，这个下载太慢了，花了我一个晚上才装好……虽然蛮好看的，但是最终还是选择了studio3T来作为mongodb的视图工具，破解版参考：Studio 3T怎么激活？Studio 3T 2019 64位无限试用安装激活教程(附下载)

5、利用npm下载指定版本

npm install -g @vue/cli@3.x.x

6、vscode保存时自动根据项目的eslintrc文件格式化代码

参考：vscode保存代码，自动按照eslint规范格式化代码设置

"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.quickSuggestions": null,
  "files.eol": "\n",
  "editor.tabSize": 4,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

7、初始化数组并全部填充为0

new Int8Array(26) //表示二进制补码8位有符号整数的数组，它的元素默认初始化为0
补:a的ASCLL码是97，字符转ASCLL码可以用charCodeAt，相反互转是fromCharCode

参考:Int8Array

---

8、编写css顺序规范建议

vscode使用scss格式化(排版)代码的辅助插件——csscomb

配置如下：

    "csscomb.formatOnSave": false,
    "csscomb.preset": {
        "always-semicolon": false,
        "block-indent": 2,
        "csscomb.preset": "csscomb", // csscomb / yandex / zen or custom config
        "color-shorthand": true,
        "eof-newline": true,
        "exclude": ["node_modules/**"],
        "leading-zero": true,
        "quotes": "single",
        "remove-empty-rulesets": true,
        "space-after-colon": "",
        "space-after-combinator": 1,
        "space-before-closing-brace": "\n",
        "space-before-opening-brace": 1,
        "tab-size": 2,
        "vendor-prefix-align": true,
        "lines-between-rulesets": 0,
        "space-after-opening-brace": 1,
        "space-after-selector-delimiter": 1 
    },
    "csscomb.supportEmbeddedStyles": false,
    "csscomb.syntaxAssociations": {},


我使用了自定义预设
"csscomb.preset": {
        "always-semicolon": false,
        "block-indent": 4,
        "sort-order": [ "content","$variable","$include","display","visibility","float","clear","position","top","right","bottom","left","z-index","width","min-width","max-width","height","min-height","max-height",
              "overflow","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border",
              "border-top","border-right","border-bottom","border-left","border-width","border-top-width","border-right-width","border-bottom-width","border-left-width",
              "border-style","border-top-style","border-right-style","border-bottom-style","border-left-style","border-color","border-top-color","border-right-color",
              "border-bottom-color","border-left-color","outline","list-style","table-layout","caption-side","border-collapse","border-spacing","empty-cells","font","font-family",
              "font-size","line-height","font-weight","text-align","text-indent","text-transform","text-decoration","letter-spacing","word-spacing","white-space","vertical-align",
              "color","background","background-color","background-image","background-repeat","background-position","opacity","cursor","quotes","...","$include media"],
        "color-shorthand": true,
        "eof-newline": true,
        "exclude": ["node_modules/**"],
        "leading-zero": true,
        "quotes": "single",
        "remove-empty-rulesets": true,
        "space-after-colon": "",
        "space-after-combinator": 1,
        "space-before-closing-brace": "\n",
        "space-before-opening-brace": 1,
        "tab-size": 2,
        "vendor-prefix-align": true,
        "lines-between-rulesets": 0,
        "space-after-opening-brace": "\n",
        "space-between-declarations": "\n ",
        "space-after-selector-delimiter": 1 
    },

我使用了自定义预设，自己看着比较顺眼……

 

---

9、前端网页项目开发前期准备工具

• Browsersync：前端页面项目实时监听html、js、css、sass、less等文件的改动

npm install -g browser-sync
browser-sync start --server --files "**/*.css, **/*.html, **/*.js" //使用 **（表示任意目录）匹配，任意目录下任意.css 、.js 或 .html文件。

• Scss：预处理器使得大而复杂的样式表更加清晰易懂，易于维护

npm install -g sass
sass --watch scss:css  // 监听scss文件夹下的所有scss文件并实时编译到css文件夹下

• 使用autoprefixer自动为css/less/sass增加前缀

这里我是在vscode里的插件库下载autoprefixer的，下载后看这篇文章即可，主要是

在vscode里的setting.json文件里增加：

"autoprefixer.formatOnSave": false,
"autoprefixer.browsers": ["last 2 versions", "> 5%"]  // 默认

之后你在vscode的preferences的keyboard Shortcuts里找到autoprefixer，依据你的喜好设置快捷键，就可以自动增加前缀了，但是vue这些文件里的css和js以及template语言都混在一起了，所以需要借助webpack这些包管理器才能成功。具体之后会看看如何操作。在线转换网址https://autoprefixer.github.io/

参考：使用 BrowserSync 来实现内容变动之后的实时刷新、15分钟学会SASS、VsCode从零开始配置一个属于自己的Vue开发环境

10、elementUI组件打包大小优化：

elementUI按需引入两种方法、Vue Cli3-x按需引入ElementUi