做外贸要建什么网站,网站建设公司位置,网站建设总结ppt,湘潭软件开发以下内容主要是为了方便记录自己在工作中遇到的项目问题搜寻到的解决方法#xff0c;肯定方法不唯一#xff0c;这里只是给出解决了我的问题的方法#xff0c;大家走过路过随便瞧瞧较好啦嘻嘻 1、使用vue/cli 4.x 创建vue项目时使用iconfont 图标无法显示——前者版本问题
…以下内容主要是为了方便记录自己在工作中遇到的项目问题搜寻到的解决方法肯定方法不唯一这里只是给出解决了我的问题的方法大家走过路过随便瞧瞧较好啦嘻嘻 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 startverify 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/cli3.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 configcolor-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
