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；