eleme项目框架搭建及eslint常见报错(含图标字体库说明)
全局安装vue-cli
全局安装vue-cli
打开终端,npm install vue-cli -g
安装webpack模板
1.项目文件夹下,npm init webpack eleme
(eleme是项目名)
2.按照提示选择,
会提示选择用npm还是yarn,我选择的yarn.
3.按照提示继续输入命令即可
安装mockjs模拟数据
yarn add mockjs --dev
(用yarn,加–save,是指开发依赖)
关于mockjs mockjs官网
import Mock from 'mockjs'
import data from '../data.json'//Mock.mock( rurl, template )
//记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock('/good/seller', {code: 0,codeMsg: '成功',data: data.seller
})Mock.mock('/good/goods', {code: 0,codeMsg: '成功',data: data.goods
})Mock.mock('/good/ratings', {code: 0,codeMsg: '成功',data: data.ratings
})
安装axios
yarn add axios
(不加,默认是生产依赖)
注意:不能全部将依赖安装在开发环境或是生产环境,这样会造成文件的多余,按需安装,多数是安装在开发环境下的。
引入文件字体
图标字体官网 https://icomoon.io/
1.点击右上角导入本地图标
2.本地导入完成后,全部选中,点击右下角创建图标字体
3.点击右下角download
4.项目文件中static下将style.css引入
5.将fonts放在src/assert
6.用法:将图标类名直接设置在所需的标签上即可,引入时注意style.css的路径
eslint报错
1.vue报错:eslint-disable-next-line to ignore the next line.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
错误解析:执行npm run dev时报错以上信息,原因是空多了一行,空多了一行就会报错。直接把行删除掉,最多只能空一行。
或者用//注释空行
如下代码:
import foo from '@/components/foo' Vue.use(Router) //删除一行空行
import foo from '@/components/foo'
//
// Vue.use(Router) //注释空行
2.vue报错:http://eslint.org/docs/rules/no-trailing-spaces Trailing spaces not allowed
错误解析:码尾部不能有空格(整行复制粘贴的时候容易出错)
3.vue报错:http://eslint.org/docs/rules/eol-last Newline required at end of file but not found
错误解析:新建文件的时,最后面要加一行空行
3.其他常见错误整理:
- “//” 注释后面要有个空格;
- 分号也不能写,js里只能用单引号;
- new 后面对象首字母得是大写;而且new出来的对象,前面得用个变量接收;如果不接收,需要在前面写一行注释; 这就是为什么,main.js里面 new Vue的时候,前面有一行注释了
App.vue里开始编程
1.使用stylus语法,安装:
yarn add stylus --save
2.同样的方法安装stylus-loader、postcss-loader、css-loader、style-loader;
eleme项目框架搭建及eslint常见报错(含图标字体库说明)相关推荐
- Vue3.0 + Ts 项目框架搭建四:配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
- hexo博客本地服务器显示正常,Hexo 搭建博客 本地运行 常见报错及解决办法
作为一名在hexo方面的新手,我在使用hexo编辑文档时遇到了很多问题,hexo generate编译的时候遇到了各种错误. 在此将这些错误及其解决方案记录下来,以便日后查证之用,同时,也可给各位在遇 ...
- ESlint 中常见报错的类型和解决方案
ESlint 中常见报错的类型和解决方案 这是我在使用 eslint 过程中遇到的一些问题,和自己总结的一些,希望对大家有帮助. vue 中 quotes 报错 :不能使用双引号 " &qu ...
- (三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
- 【高校宿舍管理系统】第一章 建立数据库以及项目框架搭建
第一章 建立数据库以及项目框架搭建 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录 第一章 建立数据库以及项目框架搭建 前言 一 ...
- SpringBoot后端项目框架搭建
SpringBoot后端项目框架搭建 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. 工具安装 电脑已安装\配置如下工具: IDEA.jdk.MySQL及其可视化 ...
- SpringSecurity(二)、权限项目框架搭建
Springboot + SpringSecurity权限项目框架搭建 目录 一.项目介绍 二.项目搭建(父子工程) 1.添加 pom 依赖 2.修改 yml 配置 3.编写JwtTokenUtil工 ...
- Android最好用的项目框架搭建
本篇先记录下当前项目中涉及的主要技术要点.也算是对所作项目的一次总结.如果这个过程能对你有些许的帮助,那可能就显得有意义点了. 一个完整的Android项目会涉及后台和前端.我们只关注于前端,也就是我 ...
- day18_项目框架搭建1
项目的工程目录: py_53 --根目录 py_api --子目录 day18_项目框架搭建 --项目工程目录 common -公用模块 excle.py -获取Excel表单的数据 handler_ ...
- spring cloud多模块项目框架搭建-Redis-Cluster集群搭建及系统集成
第九章 Redis-Cluster集群搭建及系统集成 本系列博客旨在搭建一套能用于实际开发使用的spring cloud多模块微服务项目框架,并不是一个spring cloud的demo而已,提供系统 ...
最新文章
- 将文本计算机应用能力的样式设置为标题1,计算机应用基础期末考试试题
- python 在excel指定列添加数据_python读取excel指定列数据并写入到新的excel方法
- One Bug of WatiN?
- easyGUI 用法介绍
- CSS基础(part6)--CSS的颜色表示
- 【Flink】大数据分析常用去重算法分析『HyperLogLog 篇』
- ES6的新特性(5)——数值的扩展
- SQL Server临界点游戏——为什么非聚集索引被忽略!
- Mac 连过的 WiFi 怎么查密码?看这→
- Juniper MIP
- Yandex浏览器安装crx插件
- SpringBoot整合editormd富文本编辑器
- 简述具有五层协议的网络体系结构各层的主要功能。
- kali之入侵XP系统2
- Ubuntu代理服务器设置上网
- npm 安装 局部webpack
- 互联网注定被抛弃,未来30年属于硬科技!深层逻辑是这样的
- 可以计算一元二次方程复数根的模拟计算机
- matlab 程序设计题,matlab练习题-程序设计完成
- Invitation Cards POJ - 1511【最短路】
热门文章
- 优锘|ThingJS-X零代码平台:七大智慧场景全新Demo
- navicat导入.mdf文件到远程sqlserver数据库
- 安卓pdf阅读器_【软件分享】自用的一款PDF阅读器——悦书PDF阅读器,支持护眼模式、注释涂鸦、PDF转换,功能齐全,界面简洁美观。...
- 送给女朋友的圣诞节电子贺卡源代码,圣诞节快乐代码
- Mac重装系统-使用Mac笔记本制作U盘启动盘
- JAVA|大小写英文字母表
- 【强化学习】在Pong环境下实现策略梯度
- 巴菲特致股东的一封信:1991年
- ansys 英文路径 安装失败
- 第3章【思考与练习4】数据清洗,从studentsInfo.xlsx 文件的“Group1”表单中读取数据。数据填充,使用习题1的数据,使用列的平均值填充“体重”和“成绩”列的NaN数据。