前言

前端技术近几年发展十分迅速，经历了jQuery，angularjs，发展到现在的Angular，Vue和React三大前端框架。因Vue相比其他框架更容易上手（无需了解jsx、ts），且性能优异，因而受到广大开发者的青睐。以下详细介绍Vue框架。

vue 全家桶

vue-cli 自动化构建工具
vue-router 路由控制
vuex 状态管理
vue-Devtool 调试工具
UI组件库（elementUI，vant）
axios http请求

vue-cli 自动化构建工具

搭建交互式的项目脚手架，集成了前端生态中最好的工具

交互式的项目脚手架

基础配置

module.exports = {
  // 项目部署的基础路径
  publicPath: process.env.PUBLIC_PATH,
  // 将构建好的文件输出到哪里
  outputDir: process.env.PUBLIC_PATH,
  // 该对象将会被 webpack-merge 合并入最终的 webpack 配置。
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
      config.devtool = 'source-map'
    }
  },
  // 向 CSS 相关的 loader 传递选项
  css: {
    loaderOptions: {
      scss: {
        // 全局引入index.scss
        prependData: `@import "~@/assets/styles/index.scss";`
      }
    }
  },
  // 链式操作，允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  },
  // 前后的分离时，配置代理服务器
  devServer: {
    proxy: {
      '/': {
        target: process.env.PROXY_TARGET,
        pathRewrite: {
          '/test': ''
        }
      }
    }
  }
}

环境变量管理

通过cross-env来管理不同环境的变量

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

优先级：.local > .[mode] > .env

.env文件可以简单的以key=value的方式定义变量：

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

注意：变量必须以VUE_APP_*命名才可以在程序中使用。（NODE_ENV，BASE_URL除外）

执行命令：

vue-cli-service build --mode development // 会读取.env .env.development .env.development.local

获取参数：

process.env.NODE_ENV

vue-router 路由控制

路由的基本配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home  // 会打包进app.js
  },
  {
    path: '/about',
    name: 'about',
    // 会打包到about.js，在访问路由about时，才加载about.js
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') 
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

运行npm run build打包

code splitting

路由的两种模式：

hash
history

hash模式不需要后端配置，可直接使用。缺点是无法使用锚点功能。
history模式需要后端配置，url不会出现#，美观。

vuex 状态管理

为什么要使用vuex？

以下场景：

从根组件向子组件传值，我们一般使用props，倘若有多层嵌套时，得一级一级向下传递，比较繁琐，并且中间层级可能并不需要该值。
兄弟组件需要使用同一状态时，得通过父组件才能通信。
来自不同视图的行为需要变更同一状态。

单向数据流
用 Vuex 的思维去实现v-model的双向绑定效果：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用 action，通过action改变state，从而再更新视图:

<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

双向绑定的计算属性

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

父子组件通过props传递数据
子组件数据源通过父组件传递，虽然增加了耦合，但组件之间的层级关系更明显，代码逻辑也更清晰明了。
Vue官网对Vuex的解释：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vue-Devtool 调试工具

image.png

UI组件库（elementUI，vant）

pc端（elementUI）
移动端H5（vant）

vue 最佳实践

vue 最佳实践

前言

vue 全家桶

vue-cli 自动化构建工具

vue-router 路由控制

vuex 状态管理

vue-Devtool 调试工具

UI组件库（elementUI，vant）

axios http请求

vue 最佳实践

前言

vue 全家桶

vue-cli 自动化构建工具

vue-router 路由控制

vuex 状态管理

vue-Devtool 调试工具

UI组件库 （elementUI，vant）

axios http请求

UI组件库（elementUI，vant）