Vue cli 笔记

Vue cli

生成项目

1. 全局安装vue-cli：npm install -g vue-cli
2. vue -V(查看vue的版本，看vue脚手架是否安装成功)
3. 安装成功后，vue init webpack 项目名称 （创建vue的项目）
4. cd 项目名称
5. npm install 安装依赖
6. npm run dev 运行框架项目
7. npm uninstall 软件名称 卸载插件

脚手架结构

1. build ：（webpack（编译打包器） 相关的配置文件）
2. config：（webpack（编译打包器） 相关的配置文件）
   • --index.js :指定后台服务端口和静态文件资源
3. node_modules：系统资源包
4. src：源码文件夹（开发的主要目录）
   • main.js入库js
5. static：静态文件
6. babelrc：babel的配置文件
7. editorconfig：通过编辑器编码、格式进行一定配置
8. eslintignore：eslint监测忽略的配置
9. eslintrc.js：检测的配置
10. gitignore：git版本管制忽略的配置
11. index.html主页面文件（app.vue）
12. package.json(文件配置包)

src 目录分析

1. api ：后台交互模块文件
2. common：通用职员文件
3. components：非路由组件
4. pages：路由组件
5. filters：自定义过来模块文件
6. mock：模拟数据接口
7. router：路由器文件
8. store：vuex状态管理
9. app.vue 应用组件
10. main.js 入口js

运行

1. npm run dev(开发运行（在内存中进行编译打包，并且运行起来）)
2. npm run build(打包发布)
3. npm install -g serve （安装serve命令）(发布运行起来)
4. serve dist(部署运行dist)

Vue 遇见问题

<template>
  <footer class="footer_guide border-1px">
    <!-- <a href="javascript:;" class="guide_item on">
    <span class="item_icon">
    <i class="iconfont icon-food"></i>
    </span>
    <span>外卖</span>
    </a> -->
    <div class="guide_item" @click="goto('/Home')" :class="{on: isCurrent('/Home')}">
    <span class="item_icon">
    <i class="iconfont icon-food"></i>
    </span>
    <span>首页</span>
    </div>
    <div class="guide_item" @click="goto('/Search')" :class="{on: isCurrent('/Search')}">
    <span class="item_icon">
    <i class="iconfont icon-search"></i>
    </span>
    <span>搜索</span>
    </div>
    <div class="guide_item" @click="goto('/Work')" :class="{on: isCurrent('/Work')}">
    <span class="item_icon">
    <i class="iconfont icon-single"></i>
    </span>
    <span>工作台</span>
    </div>
    <div class="guide_item" @click="goto('/Prosonal')" :class="{on: isCurrent('/Prosonal')}">
    <span class="item_icon">
    <i class="iconfont icon-user"></i>
    </span>
    <span>我的</span>
    </div>
  </footer>
</template>

<script>
export default ({
      methods: {
    goto (path) {
      this.$router.replace(path)
    },
    isCurrent (path) {
      // console.log(this.$route.path)
      return this.$route.path === path
    }
  }
})
</script>
<style>

.footer_guide{
  position:fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 50px;
  display: flex;
}

  .guide_item{
    display:flex;
    flex:1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    color: #999999;
  }
  .iconfont{
      font-size:22px;
  }
  .on{
      color: #02a774;
      font-size: 12px;
      margin-top: 2px;
      margin-bottom: 2px;
  }
</style>
           

1. :class="{on: isCurrent('/Home')} 对象绑定语法，判断是否要加on 这个样式

font-awesom 图标库安装

1.npm 安装font-awesome 以及需要的所有依赖

• npm install less less-loader css-loader style-loader file-loader font-awesome --save

2.在main.js里导入

//导入图表的样式
import 'font-awesome/css/font-awesome.min.css';
           

vuex 安装(状态管理)

npm install vuex --save
           

swiper 安装（滑动块）

npm install --save swiper
           

非路由组件

<template>
  <header class="header">
    <!-- 插槽是父组件与子组件的通讯方式，子组件中的slot可以显示父组件传递给子组件的内容 -->
    <slot name="left"></slot>
    <span class="header_title">
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>
    <slot name="right"></slot>
  </header>
</template>
           

1.slot 插槽站位（有的展示有的不展示name属性识别）

Vue生命周期

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

beforeDestroy（销毁前）

1. 这一步还可以用this来获取实例，
2. 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）