全局安装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
(不加,默认是生产依赖)
注意:不能全部将依赖安装在开发环境或是生产环境,这样会造成文件的多余,按需安装,多数是安装在开发环境下的。
引入文件字体
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;