![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
去看去思考
这个作者很懒,什么都没留下…
展开
-
Vue学习-1(18)svgo-loader删除svg自带fill
svg fill里有预设颜色,active不能生效自动删fill颜色加个loadersvgo-loaderyarn add --dev svgo-loadersvg-sprite-loader-mod原创 2021-01-01 00:49:08 · 1944 阅读 · 0 评论 -
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.原创 2021-01-01 00:47:20 · 523 阅读 · 0 评论 -
Vue学习-1(16)active-class选中变色
IDE内git提交,右键项目router-link标签又activeClass属性,默认为link-class-active,可以在标签,routes中修改选中时的class名(通常一样selected ,方便css设置)原创 2021-01-01 00:46:27 · 513 阅读 · 0 评论 -
Vue学习-1(15)添加Nav样式
快捷css输入nav.vuefont-size:12px;item的flex-direction,上下padding.icon的宽高去router-link下划线,app里a{tdn;color:i}原创 2021-01-01 00:45:43 · 334 阅读 · 0 评论 -
Vue学习-1(14)封装 icon 组件
iconItemcss原创 2021-01-01 00:45:07 · 133 阅读 · 1 评论 -
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.原创 2021-01-01 00:44:13 · 1378 阅读 · 0 评论 -
Vue学习-1(12)eslint 报错如何解决
vue.config.js方法一:关提示关ide提示commit的命令行lint检查提示首行添加eslint ignore注释方法二:改代码node8不支持import,高版本就直接用import代替commonjs的require方法三:改配置让eslint不管我使用require语法...原创 2020-12-30 00:17:49 · 207 阅读 · 0 评论 -
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.原创 2020-12-28 23:29:32 · 134 阅读 · 0 评论 -
Vue学习-1(10)Layout 组件 & slot 插槽(解决布局上html、css重复)
新建Layout.vue(只有html,css)保留ts里的name,可以帮主ws快捷引入组件Layout注册全局组件(main.js)nav可以改layout里局部引入了原创 2020-12-28 23:27:11 · 803 阅读 · 1 评论 -
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,意味着内部和外..原创 2020-12-28 23:26:01 · 214 阅读 · 0 评论 -
Vue学习-1(8)VueRouter 404 页面
路由路径从上到下匹配404用最后的*返回首页原创 2020-12-28 23:25:03 · 88 阅读 · 0 评论 -
Vue学习-1(7)将Nav组件做成全局组件
webstorm快捷引入main.js全局局引用(tab)引入位置引入方法原创 2020-12-28 23:24:04 · 213 阅读 · 0 评论 -
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潜规则引...原创 2020-12-28 22:28:02 · 105 阅读 · 0 评论 -
Vue学习-1(5)script和style中的@
script中src路径的aliasstyle中的import语法符号style中(~@)src路径的aliaswebstorm不知道@在style路径中代表什么,要设置webpack配置VSC不做路径检测,不会标红原创 2020-12-28 22:26:41 · 256 阅读 · 0 评论 -
Vue学习-1(4)添加代码片段 snippets
IDE模板填充IDE也有snippet插件,且可进行具体指令更改VSC原创 2020-12-28 22:25:52 · 165 阅读 · 0 评论 -
Vue学习-1(3)目录结构说明
原创 2020-12-28 22:25:06 · 64 阅读 · 0 评论 -
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)...原创 2020-12-28 22:24:30 · 55 阅读 · 0 评论 -
Vue学习-1(1)项目介绍
视觉设计figma学新知识CRMcopy,run,modify东大笔记法CSS只写最大最小宽–用内容去撑Vue+localstorage原创 2020-12-27 01:37:58 · 111 阅读 · 0 评论