hell_csdn的博客

原创 Vue学习-1（18）svgo-loader删除svg自带fill

svg fill里有预设颜色，active不能生效自动删fill颜色加个loadersvgo-loaderyarn add --dev svgo-loadersvg-sprite-loader-mod

原创 Vue学习-1（17）更新 meta viewport

自动加的viewport不行<meta name="viewport" content="width=device-width,initial-scale=1.0">复制淘宝的<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">加到index.h.

原创 Vue学习-1（16）active-class选中变色

IDE内git提交，右键项目router-link标签又activeClass属性，默认为link-class-active，可以在标签，routes中修改选中时的class名(通常一样selected ，方便css设置)

原创 Vue学习-1（15）添加Nav样式

快捷css输入nav.vuefont-size:12px;item的flex-direction，上下padding.icon的宽高去router-link下划线，app里a{tdn；color:i}

原创 Vue学习-1（14）封装 icon 组件

iconItemcss

原创 Vue学习-1（13）如何 import 一个目录下某后缀的所有文件

直接引入svg目录，不用一个个引入let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);importAll(require.context(path: '../assets/icons',true,/\.svg$/));//只能relativePath//单元测试可能失败try{ importAl.

原创 Vue学习-1（12）eslint 报错如何解决

vue.config.js方法一：关提示关ide提示commit的命令行lint检查提示首行添加eslint ignore注释方法二：改代码node8不支持import，高版本就直接用import代替commonjs的require方法三：改配置让eslint不管我使用require语法...

原创 ND-Nginx前端

Nginx1.跨域配置localtion / { # 所有请求都匹配以下规则 # 因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求 # xxx 你的配置写在这里} location = / { # 精确匹配 / ，后面带任何字符串的地址都不符合} localtion /api { # 匹配任何 /api 开头的URL，包括 /api 后面任意的, 比如 /api/getList # 匹配符合以后，还要继续往下搜索 # 只有后面的正则表达式没有匹配到时，这一条才会采

原创 ND-Git总结

0-git bash预配置0.1-sshssh-keygen -t rsa -C example@mail.comcat ~/.ssh/id_ras.pubgitee分项目部署（clone、pull）和个人部署（pull+push）0.2-git config//基于仓库git config//基于用户，优先于基于仓库git config --global//基于系统git config --system1-创建仓库2-remote add或clone//关联或克隆能起到

原创 Vue学习-1（11）使用svg-sprite-loader引入icon

icon从精灵图->svgiconfont.cn下载svg引入svg过不了ts检查wp添加svg-sprite-loaderyarn add svg-sprite-loader -Dvue添加svg-sprite-loaderconst path = require('path');module.exports = { lintOnSave: false, chainWebpack: config =>{ const dir = path.

原创 Vue学习-1（10）Layout 组件 & slot 插槽（解决布局上html、css重复）

新建Layout.vue(只有html，css)保留ts里的name，可以帮主ws快捷引入组件Layout注册全局组件（main.js）nav可以改layout里局部引入了

原创 Vue学习-1（9）用 Fixed 还是用 Flex 布局

tabbar定位（不要在移动段使用fixed定位）ctrl+p切换打开文件scoped实现(使用简单class名，且不跟其他冲突)div 中加data-v-XXX(属性)//<div data-v-XXX class="nav">css 中加.nav[data-v-XXX]属性选择器//同时满足又nav类和data属性class命名scss（到底–加同级div、flex1、minheight100vh）组件引入有两个data，意味着内部和外..

原创 Vue学习-1（8）VueRouter 404 页面

路由路径从上到下匹配404用最后的*返回首页

原创 Vue学习-1（7）将Nav组件做成全局组件

webstorm快捷引入main.js全局局引用(tab)引入位置引入方法

原创 Vue学习-1（6）使用VueRouter(对比reactRouter...待续)

添加routes数组，并在views里新建vue组件快捷引入webstorm支持快捷importVSC装插件autoinport/tsimport(不装好像部分也有自动引入)加分号ts要求加分号，可以用reformat自动加分号codestyle/typescriptmain.js中引入router//1 红线用format快捷键加分号//2 create项目的时候有选router，main.js中已经自动引入好了//3 js潜规则引...

原创 Vue学习-1（5）script和style中的@

script中src路径的aliasstyle中的import语法符号style中(~@)src路径的aliaswebstorm不知道@在style路径中代表什么，要设置webpack配置VSC不做路径检测，不会标红

原创 Vue学习-1（4）添加代码片段 snippets

IDE模板填充IDE也有snippet插件，且可进行具体指令更改VSC

原创 Vue学习-1（3）目录结构说明

原创 Vue学习-1（2）使用@vue/cli创建项目

yarn global add @vue/cli@4.1.2npm install --global @vue/cli@4.1.2修改'~/.vuerc'中"useTaobaoRegistry"为trueUse history mode for router？ NOCSS pre-processor？SCSS(dart-sass)cnpm不怎么维护了yarn比npm稍快(别用npm装yarn)...

原创 Vue学习-1（1）项目介绍

视觉设计figma学新知识CRMcopy，run，modify东大笔记法CSS只写最大最小宽–用内容去撑Vue+localstorage

原创 CLI4搭建项目

Vue CLI41-安装脚手架vue-cli4@vue/cli2-新建Vue项目vue create project_name默认选择使用了Vuex和Vue-Router，对于业务项目来说，这两个插件是必备的。3.1-抽出单独routes代码src/router/index.jssrc/router/iroutes.js3.2-store项目刚开始时，Vuex配置保持不变，等到项目状态管理复杂之后，在考虑进行模块的分割。src/store/index.js