整体项目 已经 上传到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框架里面的
-
打开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') -
先组装一个主页面出来 也就是 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)
