README.md

# myblogvue

> myblog

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run e2e tests
npm run e2e

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).


### 创建项目
vue安装请看下面的博客

 1. [安装nodejs、npm](https://blog.csdn.net/qq_38870145/article/details/108611336)
 2. [安装vue-cli](https://blog.csdn.net/qq_38870145/article/details/111238895)

`init webpack`
```bash
$ vue init webpack myblogvue
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110153602786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)
### 关闭useEslint
将useEslint的true改为false
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110153728658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)
### 引入elementui
进入项目安装element-ui
```bash
$ npm i element-ui -S
```
在src下的man.js中添加

```bash
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
```
vue使用elementui
```bash
Vue.use(ElementUI)
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110154706830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)
[进入elementui的官网](https://element.eleme.cn/#/zh-CN/component/container)
通过提示代码引入自己想要的布局样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110154835448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)
### 静态资源
自定义的文件js和css的加载将其放在static文件夹下的utils下
（如果提示报错关于`>`使用此方法）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110154951305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)
### 整体布局样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210110161307642.gif#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210111003123975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210111003009953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODcwMTQ1,size_16,color_FFFFFF,t_70)