整体项目 已经 上传到githup 上了 可以下载下来

https://github.com/17600777607/vue-iview

然后点击下载就可以了

首先 比起第一步 多了太多的文件了
先看目录

	//第一步的目录                       //第二步的目录
 	- node_modules   					 									//node依赖
 	- public 
 		- favicon.ico      													//浏览器窗口 logo
 		- index.html       													//主html
 	- src
 		- assets						 				                   //存放静态资源的目录
 											-demo   				  		//项目截图目录	
 											-home							//首页的静态文件目录
 											-images							//公用的静态文件目录
 			-logo.png 
 		- components														//一般作为公共组件的目录
 											-layout							//页面的总体布局
 												-childer
 													-carousel.vue           //轮播图组件
 													-crumbs.vue				//面包屑组件
 													-footDom.vue			//底部组件
 													-navTop.vue				//导航组件
 													-routerContent.vue      //路由出口文件
 												-index.vue					//主页面
 			- HelloWorld.vue													
											-libs                          //处理公共方法的目录
												-router-uilts.js 			//转换路由、菜单方法的文件
												-util.js 					//其他的方法文件
 		- router															//路由文件
 			- index.js
 		- store																//vuex目录
 											-module
 												app.js						//主要存放 一些公共组件的状态
 			-index.js	 																
 		- views																//菜单栏文件
 											//多了很多目录
 			-About.vue
 			-Home.vue												
 		- App.vue															
 		- main.js
 	- .browserslistrc
 	- .gitignore
 	- babel.config.js
 	- package.json		
 	- package-lock.json
 	- README.md
 										-vue.config.js						//配置文件

在第一步时 创建完成项目后，需要干什么？ 肯定是路由啊！ 把路由搭建起来 ，基本项目的架子就完成了一半，路由菜单，这里引用的是iview框架里面的

1. 打开iview官网

   https://www.iviewui.com/docs/guide/install
   

   我这里用的编辑器是 WebStorm 反正就是在该项目的命令窗口输入下面命令，安装 iview

   npm install view-design --save
   

   打开src目录下的main.js

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   import ViewUI from 'view-design';                 //这里
   import 'view-design/dist/styles/iview.css';			//这里
   
   Vue.config.productionTip = false
   
   Vue.use(ViewUI);							//这里
   
   new Vue({
     router,
     store,
     render: h => h(App)
   }).$mount('#app')
   
   

2. 先组装一个主页面出来 也就是 layout
   1.在src/components/layout目录下 index.index 这个就是组装完成的主页面 。 childer 目录下就是 index.vue的子组件

<template>
    <div id="index">
        <Layout>
            <Header>
                <navTop/>
            </Header>
            <!--轮播组件-->
            <carousel style="margin-top: 70px"></carousel>
            <!--面包屑-->
            <crumbs style="padding: 16px;"></crumbs>
            <Content>
                <routerContent/>
            </Content>
            <Footer>
                <footDom></footDom>
            </Footer>
        </Layout>
    </div>
</template>
<script>
    import navTop from "@/components/layout/childer/navTop"
    import routerContent from "@/components/layout/childer/routerContent"
    import carousel from "@/components/layout/childer/carousel"
    import footDom from "@/components/layout/childer/footDom"
    import crumbs from "@/components/layout/childer/crumbs"
    export default {
        name: "index",
        data() {
            return {}
        },
        components: {navTop, routerContent, carousel, footDom, crumbs},

        mounted(){
        },
    }
</script>

2、搭建路由 目录在src/router/index.js

这里为了后期做权限验证 、动态菜单 把路由和菜单放到了一起，通过一个递归，生成组件对象和路由对象(文件目录在/libs/router-uilts)。 路由基本分三种：1、在菜单栏展示的路由，并且在layout组件中展示，首页；2、不在菜单栏展示 但是在 layout组件中展示，比如：设置、个人信息等；3、不在菜单栏展示，也不再layout组件中展示。比如：401错误页面、登录页面等 ；这三种模式基本就能满足开发需求了 ，目前这里只有一种 路由 在菜单栏展示 并且在layout中展示

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
import {generateRoutes} from "@/libs/router-uilts"
import {setTitle} from "@/libs/util"
import Layout from "@/components/layout"

Vue.use(VueRouter)
// 路由菜单 在菜单栏展示 并且在layout中展示的路由菜单
const routerData = [
...
]
console.log("路由菜单", routerData)

//处理路由菜单
const caidan = generateRoutes(routerData, [])
// 存储vuex中
store.commit("updateMenuList", caidan);`在这里插入代码片`
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [...caidan]
})
router.afterEach(to => {
    setTitle(to, router.app)
})
export default router

配置打包路径 在第一步的基础上 新建了 vue.config.js文件 来配置 ；后期的打包时去掉console、配置开发、生产环境等豆子啊这里配置

module.exports = {
    //演示打包路径： http://legions9.com/kangxin/
    publicPath: "/kangxin/",
    // 设为false打包时不生成.map文件
    productionSourceMap: false,
}

基本已经介绍完了；有什么不太明白的；可以留言给我；

vue cli 4.1.1完整项目搭建 （第一步，创建项目）

下一步 路由的三种情况 和 axios请求封装 (会在githup上更新，地址就是开头的那个地址 https://github.com/17600777607/vue-iview)