vue 模块化开发_2_Hello iview

一.前言废话

作者是写java的，近几天刚接触vue，处于萌新阶段。希望通过该博客把自己学习开发的过程记录下来
一、是为了后面回顾（假设作者后面忘了-可以快速的再走一遍过程）
二、是作为一个萌新，学习中遇到的问题也可能是其他萌新会遇到的，希望其他同学能少走弯路。
写的不好是必然的，内容只写作者觉得重要的，废话不多说，应该很多同学像我一样只想看重点不想看废话，浪费时间

二.什么是iview

就是个前端框架类似 bootstrap、layui… 这些，具体不介绍----官网https://www.iviewui.com/

三.安装iview

进入iview官网左侧菜单第一个就是教你怎么安装

往下拉你会看到这么一句话 npm install iview --save

打开上一篇文章中创建的项目， 你的路径名可能与我不同，但是右键在项目中打开终端就行了。

执行iview 提供的那句代码 npm install iview --save

作者执行完是这样的（作者之前安装过一次内容可能不一样了） PS：输出最后一行很显眼，很显然这里有问题，他要我执行 npm audit fix 来修复，先不管。

执行上面内容 node_modules 中应该会有 ivew目录

太长了我截掉中间一半， 反正就是得有下面这个 iview目录才算安装了iview

如果没有你就按照 提示该 fix 就 fix 该重装就重装（作者没有遇到问题）

四.项目结构

为什么在这里介绍结构？
因为作者边学边写，到这一步才开始涉及代码和结构问题

1. 首先我们要搞懂结构
   作者结构如 下图,重要的东西作者画出来了，src我们的代码，index.html主页，package.json-webpack配置文件,其他后面用到再说。

2. src目录下
   作者src下是这样的，很显然 main.js一看名字就很重要，我们暂且把它当做我们项目的入口（意思是说我们的代码从这里开始运行）
   
3. main.js
   该死！打开main.js ，我那花我好几块钱淘来的盗版idea，居然给我画了一堆红色的波浪线
   
   作者去了趟隔壁度大娘家，度大娘说 file-> settings-> language&framework -> JavaScript -> js的版本改成ECMAScrept 6 就行了，果然改完就好了。我们来看一下这几行代码。

import Vue from 'vue'  //导入vue
import App from './App'  //导入同级的 App.vue文件
import router from './router'   //导入router目录 作者理解为路由的

Vue.config.productionTip = false  //不阻止消息，就是控制台会打印更多详细信息 
//创建vue 对象
new Vue({
  el: '#app',      //绑定元素 这个元素在 index.html 里面
  router,           //加载路由
  components: { App },   // 声明组件
  template: '<App/>'    // 度娘也讲不清楚 作者理解他为（将App.vue 渲染到id为#app的节点上，然后他就可以显示了）
})

4. App.vue代码

<template>    
  <div id="app">
    <img src="./assets/logo.png">  //首页那个大V 图片
    <router-view/>          //作者一开始看不懂这个东西从哪里来，页面展示他就是HelloWord.vue里面内容，暂且理解为 router/index.js路由过来的
  </div>
</template>

<script>
export default {    //以App 的名字，暴露出去  其他组件才能使用
  name: 'App'     
}
</script>

<style>
......
</style>

五.使用iview

1. 去iview找一个好看的布局
   

2. 拷贝show code中全部代码

3. 在项目 src/components 中新建一个IviewMain.vue空文件（把你拷贝的代码粘贴进去）
   

4. 找到下面这句话 在里面添加name
   

5. 在main.js引用 iview(在main.js,加上下面红色的三句话，引入组件，引入样式，并使用iView组件)
   

6. 在主页（App.vue）使用我们自己布局（从iview拷贝的那个）
   修改划红线的三个地方，终端运行 npm run dev 如果已经运行 ctrl+s就可以热加载啦
   

7. 运行结果（下一章修改布局）