# in-ele-vue

**Repository Path**: wangye123456/in-ele-vue

## Basic Information

- **Project Name**: in-ele-vue
- **Description**: 渣渣学习vue之路
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-23
- **Last Updated**: 2021-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1) 第一天记录

全局安装 vue-cli脚手架：

>vue install vue-cli -g

使用vue2命令创建项目
>vue init webpack in-ele-vue   //创建项目文件

进入项目，安装webpack

>mikdir in-ele-vue  //创建文件夹
>cd in-ele-vue   //进入文件
>vue init webpack  //安装webpack

安装package.json中项目安装包   (使用淘宝镜像```npm install -g cnpm --registry=https://registry.npm.taobao.org```)
>npm install

运行项目
>npm run dev

在阿里巴巴矢量图标库选择自己需要的图标库```http://www.iconfont.cn```，下载下来
在index.html文件中引入
```<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">```

### 1) 第二天记录

>npm install axios --save  //安装axios
切换国内镜像下载node-sass   命令 npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
>npm install sass-loader node-sass -D  //安装sass  其中sass-loader依赖于node-sass
>npm i element-ui -S    ///安装ElementUi,i是指install简写
>npm install babel-plugin-component -D  //借助 babel-plugin-component，可以只引入需要的组件，以达到减小项目体积的目的
>在build/webpack.base.config.js中添加：rules中加入，
>      {
>       test: /\.scss$/, 
>        loaders: ['style', 'css', 'sass'] 
>      }

可以把端口号进行修改，默认的是```http://localhost:8080```，在config文件夹中的index.找到port，改成port: 8088，就会变成```http://localhost:8088```
在src下新建文件夹views，用于后期页面编写


打开build文件夹下的webpack.prod.conf.js和webpack.dev.conf.js文件，增加自己喜欢的ico图标，我把图标放在了src文件夹下的assets中

```
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: './src/assets/favicon.ico',  //webpack.prod.conf.js中加入

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './src/assets/favicon.ico'  //webpack.dev.conf.js
    }),
```



在components文件夹中写2个组件，因为要做下面这种布局，将就看看，因为用的md写的，没有插入图片：


<table>
<tr>
    <td rowspan="8"> Aside</td>
    <td>Header</td>
</tr>
<tr>
    <td>Main</td>
</tr>
</table>

* topMenu.vue为上面的组件
* leftMenu.vue为左侧的组件
在HelloWorld.vue中引入
```import leftmenu from "../components/leftMenu"```
```import topmenu from "../components/topMenu"```

声明组件：
```
components:{
        leftmenu,
        topmenu
    },
```

使用组件，我命名就是leftmenu，所以可以以<leftmenu></leftmenu>为标签使用，就会出现，里面的内容可以看看通用的模板大致长什么样

### 3) 第3天记录

* 配个代理：(这里我使用的是聚合数据，免费的接口，后期看哪里会有免费的登录接口来完善我们的项目，)
>proxyTable: {
>        '/api': {
>          target: 'http://v.juhe.cn',
>          changeOrigin: true,
>          pathRewrite: {
>              '^/api': ''
>          }
>        }

在main.js中引入axios,
```import axios from 'axios' ```

将其挂载到vue原型上，方便请求接口使用
```Vue.prototype.$axios = axios```

在src下新建JK文件夹，我整了两个名字，一个是科四，一个科一，选择不同的驾照类型切换不同考题
提前用postman测好接口，我选的是驾考题的数据，大家可以自行查找

使用echarts
>cnpm i echarts -S
这里我把暂停基金数据模块的内容，想做成折线图之类的，所以安装它，使用的时候：
>import echarts from 'echarts'
注意：如果出现“"export 'default' (imported as 'echarts') was not found in 'echarts'”，具体原因可能是版本高了
需要执行下面命令：
>npm i -E echarts@4 zrender
如果需要在项目中多处使用，就可以直接挂载到原型，按需引入或者全部引入