vue项目搭建以及全家桶的使用详细教程(小结)

这种方式是一种全局引入的方式，引入后就在具体的页面或者组件内不需要再进行其他的引入，但缺点是无论是否需要该组件，都将全部引入，对于性能优化不是很好，这里推荐第二种用法，按需引入，这里需要借助插件babel-plugin-import实现按需加载组件，减小文件体积。首先需要安装，并在.babelrc中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
  "libraryName": "iview",
  "libraryDirectory": "src/components"
 }]]}

然后这样按需引入组件，就可以减小体积了，这里需要注意的是，因为我们修改了.babelrc文件，这将导致我们第一种引入方法失效了，如果再使用那种方式引入，会导致代码报错；

<template>
 <div class="content">
  <div class="title">患者接诊</div>
  <div>
   <Button type="primary" shape="circle" class="btn-time">临时保存</Button>
   <Button type="primary" shape="circle" class="btn-cancel">取消就诊</Button>
   <Button type="primary" shape="circle" class="btn-done">完成就诊</Button>
  </div>
 </div>
</template>
<script>
 import {Button} from 'iview'
 export default {
  name: "fHeader",
  components:{
   Button
  }
 }
</script>

运行结果如下图

步骤五、vue-router的使用

如果没有阅读过官方文档，建议大伙先阅读，官网上的教程已经足够详细，受益匪浅；学习的过程中，需要了解路由配置的基本步骤，命名规则，嵌套路由，路由传参，具名视图以及路由守卫，滚动行为和懒加载，这里我们就不一一详细介绍了，官网已有，我们这里是做构建是的配置和懒加载处理：

首先，我们应该是安装vue-router,这个在我们生成项目的时候，已经将该依赖加载进来了，下一步要做的是在router文件下index.js进行配置：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
 },
 routes: [
  {
   path:'/',
   redirect:'/root'
  },
  {
   path: '/root',
   name: 'root',
   components: {
    Left:() => import('@/page/rootLeft.vue'),
    Middle: () =>import('@/page/rootMiddle.vue'),
    Right: ()=>import('@/page/rootRight.vue')
   }
  }
 ]})

上面的代码中，我们应用到了几个知识点，首先是滚动行文，这里我们配置了当路由跳转的时候，默认是滚动到（0，0）位置，即页面开始位置，其次我们用到的redirect是一个路由重定向的配置，接下来，在路由”/root”下，配置了具名视图，加载对应组件到对应视图，我们引入组件的方式使用到了箭头函数，这样写的目的是为了实现路由的懒加载，这样构建，只有在路由被执行的时候，才有引入对应的组件，对于页面性能的优化有很大的帮助；这里还需要注意的是，我们在引入的这些组件中，其实默认都是打包到一个文件下的，这样就会导致一次性引入的文件过大，为此，我们可以利用webapck打包工具，我们在build>webpack.base.conf.js文件下，增加如下代码，用于配置输出文件的模块名称，[name]是文件的名称，[chunkhash]是打包文件的哈希值，加上这个是为了将其作为版本号，以解决浏览器缓存机制带来的问题：