vue脚手架起步配置ElementUI、axios在vue中的配置及ESlint的常见错误（最后）

Vue起步

安装vue-cli

npm install -g @vue-cli

创建服务

• 命令行模式
  • vue create 用户名
• 图形界面模式
  • vue ui

命令行模式详细

vue create

当在命令行中输入vue create 用户名 后将出项以下界面

• 默认模式创建项目
• 自定义模式创建项目

选择插件

选择自定义模式后出现以下界面(空格键选择，enter键进入)

• 这个界面选择要安装的插件，当然在之后也能在项目中随时通过npm install 插件名 来安装插件

选择代码规范

进入到下一个界面

• 这个界面我们选择的是ESlint的严格模式,用来规范代码，这里我们选择第二项Standard config 标准模式就可以了

保存时使用Lint校验

进入到下一个页面

• 这里选择第一项在每次保存的时候使用Lint来检查代码

配置项目保存方式

• 这里选择的是我们的插件配置文件是保存到单独的文件里还是统一保存在package.json里面
• 这里我们选择第一项，单独保存，便于之后的维护与管理

是否保存本次配置

• 这里选择的是我们是否把这次的配置保存起来，下次创建时可以直接使用

路由

• 如果一开始选择了vue-router将会出现这个界面
• 是否使用历史模式来创建路由
• 属于n则是hash路由模式

创建完成

创建完成后使用npm run serve便会启动服务

使用Element-UI

安装

npm install element-ui -S

在命令行输入上述代码安装Element-ui

引入

进入到项目跟目录下的main.js文件写入以下代码

import ElementUI from 'element-ui'
//在项目中引入element-ui
import 'element-ui/lib/theme-chalk/index.css'
//引入并使用elemen-ui的css文件
Vue.use(ElementUI)
//vue全局使用ELementUI

Element-ui的按需导入

• 在项目跟目录的src文件夹下找到plugins文件夹（如果没有就自行创建）
• 在文件夹中创建js文件，写入代码如下

import Vue from 'vue'
//导入Vue
import { Button } from 'element-ui'
//括号内为要导入的模块,多个用逗号分隔
Vue.use(Button)
//配置到全局

• 然后在main.js文件中导入并使用这个文件

  import ‘./plugins/你的文件名.js’

使用less

如果需要使用less预渲染css文件，需自行安装插件，在命令行中输入以下代码

npm install less-loader

• 先安装less加载器
• 之后安装less

npm install less

• 使用时在style标签内加入lang = "less"

axios

• 安装axios

npm install axios

• 安装完成后在main.js中写入下面代码

  import axios from 'axios'
  // 导入axios
  axios.defaults.baseURL = ''
  //配置默认请求路径
  Vue.prototype.$http = axios
  //在Vue原型中添加axios，下次使用时只需this.$http.请求参数（），便可使用
  

ESlint 部分报错解决方案

• 文件保存时默认在最后加入了一个分号，但是会引起报错

  • 报错名error Extra semicolon semi

  • 解决方法在项目跟目录下创建文件.prettierrc

  • 在文件中写入以下代码

  • {
    “semi”: false,
    “singleQuote”: true
    }

• 在函数与括号之间必须存在一个空客

  • 报错名error Missing space before function parentheses space-before-function-paren

  • 解决方法在项目根目录中找到.eslintrc.js文件，在该文件的rules中写入以下代码

  • ‘space-before-function-paren’: 0,

    ‘Expected space or tab after "\’//\’" in comment’: 0