# vue_cli_start

**Repository Path**: dt_man/vue_cli_start

## Basic Information

- **Project Name**: vue_cli_start
- **Description**: vue脚手架起步
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vue起步

### 安装vue-cli

> npm install -g @vue-cli

### 创建服务

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

#### 命令行模式详细

#####  vue create

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

![](image/image-20200416150934212.png)

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

##### 选择插件

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

![image-20200416151121343](image/image-20200416151121343.png)

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

##### 选择代码规范

进入到下一个界面

![image-20200416151254739](image/image-20200416151254739.png)

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

##### 保存时使用Lint校验

进入到下一个页面

![image-20200416151652643](image/image-20200416151652643.png)

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

##### 配置项目保存方式

![image-20200416151904042](image/image-20200416151904042.png)

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

##### 是否保存本次配置

![image-20200416152040136](image/image-20200416152040136.png)

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

##### 路由

![image-20200416152141680](image/image-20200416152141680.png)

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

##### 创建完成

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



### 使用Element-UI

####  安装

> npm install element-ui -S

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

#### 引入

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

```javascript
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**文件，写入代码如下

```javascript
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`中写入下面代码

  ```javascript
  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
    >     //双引号中有空格需删除