vue-cli 4.0/vue-router/vuex

vue-cli 4.0

一、安装

npm i @vue/cli -g  

如果安装失败，使用

npm cache clean

清除缓存，然后再重新安装。

安装按成后，，使用以下命令检查是否安装成功：

vue -V （注意 V 大写）

二、创建项目

vue create 项目名称

如果没有配置保存过，会有两个选项：

1.default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

2.Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router // vue-router（vue路由）
 ( ) Vuex // vuex（vue的状态管理模式）
 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing // 单元测试（unit tests）
 ( ) E2E Testing // e2e（end to end） 测试

选完后enter，接下来提示你选择对应功能的具体工具包：

-  是否使用history router

-  css预处理器

- ESLint

- 何时检测

- 单元测试

- 如何存放配置 

- 是否保存本次配置

- 搭建完成

public/index.html中id="app"与App.vue中的id="app"为何不会冲突？

答：作为入口文件的src/main.js，创建了应用的vue根实例。

根实例的el选项或者实例方法$mount()的参数，提供了一个已经存在的DOM元素作为挂载Vue实例的挂载目标。此处挂载元素是index.html中的id为’#app’的div元素。

根实例的render选项，接收createElement方法作为第一个参数用来创建VNode。而createElement又接收APP组件作为参数。
render渲染函数生成的VNode将会替换掉挂载元素，即App.vue组件的模板内容将会替换掉index.html中的挂载元素’#app’。最终渲染出来的页面中的’#app’元素是App.vue组件中的。

注：rende渲染函数是字符串模板template的代替方案。使用构建工具时，vue.js使用的是不包含编译器的运行时版，而template一定要通过编译器编译成渲染函数，所以就用render替代了template。

三、插件使用

1、axios

npm install axios --save-dev


//main.js 中引入 axios:
import axios from 'axios';
Vue.prototype.$http=axios;



//使用 axios：
this.$http.get("url").then((res)=>{});
this.$http.post("url").then((res)=>{});

四、打包

执行 npm run build (vue-cli-service build):

• 4kb 以下的静态资源被内联到 JavaScript 中

---

vuex

如果项目简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递。但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。解决以上问题，使用vuex

// store目录下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
 
// 告诉 vue “使用” vuex
Vue.use(Vuex)
 
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
  state: {
    // 放置初始状态 app启动的时候的全局的初始值
    proInfo: {"name":"数据","proName":"运维系统"}
  }
})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

在项目中的main.js文件中注册

// 项目根目录下的main.js

import Vue from "vue";
import App from "./App";
import store from "@/store";

new Vue({
  el: "#app",
  store,
  components: {
    App
  },
  template: "<App/>"
})

组件中使用store中的数据：

export default {
  ...
  computed: {
    bankName() {
      return this.$store.state.proInfo.proName;
    }
  },
  ...
}

在组件中修改store中的数据：

<template>
    <div class="test">
        <h1>{{name}}</h1>
        <button type="button" name="修改数据" @click="change"></button>
    </div>
</template>

<script>
    export default {
      ...
      computed: {
        name() {
          return this.$store.state.proInfo.proName;
        }
      },
      methods: {
        change: function() {
          this.$store.commit('changeProName', "新的运维系统")
        }
      }
     ...
    }
</script>

在store下的index.js添加mutations：

// store目录下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
 
// 告诉 vue “使用” vuex
Vue.use(Vuex)
 
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
  state: {
    // 放置初始状态 app启动的时候的全局的初始值
    proInfo: {"name":"数据","proName":"运维系统"}
  },
  mutations: {
    changeProName(state,msg) {
      state.proInfo.proName= msg;
    }
  }
})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

至此。所有使用这个组件的地方的数据全都被vue更新。

---

vue-router

Vue.js 官方的路由管理器。

分为两种模式：

- hash：浏览器地址不完整，含有#

- history：浏览器地址完整，需要后台支持

一、hash模式

#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，通过这个事件就可以知道 hash 值发生了哪些变化。这样可以监听hashchange来实现更新页面部分内容的操作。

二、history模式