Vue工程化搭建

Posted 2021-06-25 xue_yun_xiang

一、vue-cli

cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。

vue 工程化搭建 使用vue-cli 完成

1、安装vue-cli前置工作

vue-cli 安装需要npm,npm 需要 node.js

1、安装node.js

是一个服务器，也是一个开发环境，也是一个框架

简单立即可以使用node.js 完成后台服务的开发（和tomcat sevlet一样）

2、安装npm

npm 可以简单认为，是一个包管理工具（类似java 中maven），同时可以安装一些插件（vue-cli）
在node.js 开发环境中已经默认配置了 npm,不需要安装

2、安装vue-cli

npm install vue-cli -g

install 安装
vue-cli vue-cli 插件
-g    golable 全局安装 系统中所有位置都可以使用

安装目录

npm 是包管理工具，他可以下载依赖jar 包 去中央仓库，有可能比较慢，可以配置淘宝镜像仓库
maven包管理工具，他可以下载依赖jar 包 mavnen 默认是去中央仓库 ，也可以配置阿里云镜像

安装淘宝npm 镜像（不强制）

npm install -g cnpm --registry=https://registry.npm.taobao.org

# 使用nmp  安装cnpm  使用的镜像是淘宝镜像

后续所有使用npm 的地方都可以使用 cnpm来替换（使用淘宝镜像）

npm 常用命令

npm intall 安装插件、依赖的jar 包
npm run dev 运行工程，以开发模式运行
nmp build 构建工程

二、创建vue工程

1、初始化工程

vue init webpack myproject1
vue init 初始vue工程
webpack 骨架 ，就类似 java 创建maven-web工程选择 webapp
myproject1 工程名

工程目录：

三、组件

vue工程化中的组件 都是以 .vue 结尾

1、由三部分组成：

1、布局

<template>
	<div></dic>  // 只能有一个根div
</template>

2、js 代码块

<script>
export default {  // 将当前 HelloWorld.vue  组件 导出
  name: 'HelloWorld', //导出的组件名字 HelloWorld
  data () {    // 当前组件的数据  类似 以前 学习  data :{ msg:'xxxx'},在组件中data必须以函数的形式返回
    return {
      msg: '12  准时吃饭 么？真的吃饭么'
    }
  }
}
</script>

注意：

在组件中data必须以函数的形式返回

3、css

当前组件的样式，和你普通 配置html 样式一样的

<!-- Add "scoped" attribute to limit CSS to this component only
 scoped 当前只针对 当前组件 HelloWorld.vue
 -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

</style>

App.vue 是vue 工程的入口根组件，他和main.js 组合成为工程的入口
所有看到的内容都有app.vue 进行包裹展示
当前的应用就是单页面应用—》只有一个index.html

2、工程化声明组件

1、声明全局组件

1、在components 目录下创 MyContent.vue

<template>

  <div>
       <h1>自定义组件  </h1>
       title:{{title}}

  </div>

</template>

<script>
    export default {
        name: "MyContent",
        data(){
            return {
                title:'xxxxxTile'
            }
        }
    }
</script>

<style scoped>

</style>

2、在main.js 声明全局组件

// 引入自定义组件
import MyContent from "./components/MyContent";
// 声明全局组件
Vue.component("MyContent",MyContent);

3、在App.vue 使用组件

2、声明局部组件

3、自定义组件传递参数

四、Vue-router 路由

1、实例

1、在工程目录下安装路由模块

npm install vue-router -s

npm install --save vue-router

2、创建两个组件

Home.vue

<template>
    <div>
        <h1>home</h1>
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

Product.vue

<template>
    <div><h1>product</h1></div>
</template>

<script>
    export default {
        name: "Product"
    }
</script>

<style scoped>

</style>

3、创建src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

// 引入组件
import Home from "../components/Home";
import Product from "../components/Product";

// 使用router
Vue.use(Router);


export  default new Router({

  routes:[
    {
      path:'/Home',
      mame:"Home",
      component:Home
    }, {
      path:'/Product',
      mame:"Product",
      component:Product
    }
  ]

})

4、在main.js中引入路由模块

import  router from  './router'




/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router
})

2、router 接收参数

1、修改Product.vue

2、修改src/router/index.js

3、传递参数App.vue

3、动态添加路由

 addRouter:function () {
            this.$router.push("/Product/2");
        }

五、vuex

1、概述

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2、安装

npm install vuex --save

3、实例

1、创建src/store/index

import Vue from "vue";

import Vuex from 'vuex'
Vue.use(Vuex)

const state= {
  // 获取user 状态
  // this.$store.state.user
    user:{
      name:'xiaoming'
    }
}


const getters={
    // 实时监听 state 值的最新状态，注意这里的 getters 可以理解为计算属性
    // this.$store.getters.getUser // 获取数据
    getUser(state){
      return state.user
    }

}

const mutations={

    // this.$store.commit('updateUser',user)// 同步修改
    updateUser(state,user){
        state.user = user;
    }
}

const actions={
  // this.$store.dispatch('asyncUpdateUser',user) // 异步加载
   asyncUpdateUser(context,user){
      context.commit('updateUser',user)
   }

}

export default  new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

2、在main.js 修改

// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  store
})

3、在App.vue 添加按钮点击事件测试

 get:function () {
            alert(this.$store.state.user.name)
        },
        getter:function () {
            alert(this.$store.getters.getUser.name)
        },
        update:function () {

            this.$store.commit('updateUser',{name:'xxx'});
        },
        asyncUpdate:function () {
            this.$store.dispatch('asyncUpdateUser',{name:'xxx-async'})
        }

4、解决刷新界面数据丢失问题

问题描述:

Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex 的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

解决方案:
监听页面是否刷新，如果页面刷新了，将 state 对象存入到 sessionStorage 中。页面打开之后，判断 sessionStorage 中是否存在 state 对象，如果存在，则说明页面是被刷新过的，将 sessionStorage 中存的数据取出来给 vuex 中的 state 赋值。如果不存在，说明是第一次打开，则取 vuex 中定义的 state 初始值。

在App.vue中添加

 mounted() {
        // window.addEventListener('unload', this.saveState);
        window.addEventListener('unload', this.saveState);// 界面刷线时保存到sessionStorage
    },
    methods:{
        saveState() {// 调用该方法
            sessionStorage.setItem('state', JSON.stringify(this.$store.state));
        },
    	。。。
    }    

src/store/index.js 修改

// const state= {
//   // 获取user 状态
//   // this.$store.state.user
//     user:{
//       name:'xiaoming'
//     }
// }
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  user: {
    name: 'ddd'
  }
};

六、Axios

1、概述

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF（跨站请求伪造）

为什么要使用 Axios？

由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

2、安装vue axios

npm install --save axios vue-axios

3、实例

1、在main.js 引入

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

2、在App.vue发起请求

1、axios.get请求

axiosByGet:function () {
            // var vm = this;
            // this.axios.get('http://localhost:8090/findStudentById?id=4').then(function (response) {
            //
            //     alert(response.data.name)
            //     vm.name = response.data.name;
            // }).catch(function (error) {
            //     alert(error)
            // })


            this.axios.get('http://localhost:8090/findStudentById?id=4').then(response =>{
                alert(response.data.name)
                this.name = response.data.name;
            }).catch(function (error) {
                alert(error)
            })


            // 传递参数
            // var vm = this;
            // this.axios({
            //     url:'http://localhost:8090/findStudentById',
            //     method:'get',
            //     params:{
            //         id:4
            //     }
            // }).then(function (response) {
            //
            //     alert(response.data.name)
            //     vm.name = response.data.name;
            // }).catch(function (error) {
            //     alert(error)
            // })

2、axios.post

axiosByPost:function () {
            // var vm = this;
            // var  param = new URLSearchParams();
            // param.append('id',4);
            // this.axios.post('http://localhost:8090/findStudentById',param).then(function (response) {
            //
            //     alert(response.data.name)
            //     vm.name = response.data.name;
            // }).catch(function (error) {
            //     alert(error)
            // })



            // var vm = this;
            // this.axios({
            //     url:'http://localhost:8090/findStudentById',
            //     method:'post',
            //         params:{
            //             id:4
            //         }
            // }).then(function (response) {
            //         alert(response.data.name)
            //         vm.name = response.data.name;
            // }).catch(function (error) {
            //     alert(error)
            // })
        }

3、.axios({})

 var vm = this;
            this.axios({
                url:'http://localhost:8090/findStudentById',
                method:'post', // post 或者 get
                    params:{
                        id:4
                    }
            }).then(function (response) {
                    alert(response.data.name)
                    vm.name = response.data.name;
            }).catch(function (error) {
                alert(error)
            })

spingboot 解决跨域问题

import org.springframework.beans.factory.annotation.Configurable;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrossConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}