2.26-3.6

2.26

下面是项目vue脚手架

下面是node环境文件夹

2.27

npm config get prefix
npm config set prefix "D:\software\nodejs"

得到下面

创建脚手架

npm i @vue/cli -g

在项目脚手架里

vue create vue-project-1

where npx vue

使用vue cli创建前端工程

https://registry.taobao.org/过期了换成https://registry.npmjs.org/

npx vue ui

运行package.json中定义的serve脚本

在vue.config.js中加入devServer:{port: 7070}，改变端口号

2.28

前端vue

vue的<template></template>是页面模型，<script></script>是逻辑，<style></style>是样式
属性绑定动态
v-bind:value=“name”
:value="age“
:src=“src”
script这么写
methods这么写

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name:'张三',
      age:70,
      src:'https://ebui-cdn.bj.bcebos.com/yiyan-logo.png'，
      sex:1
    }
  },
  methods:{
    handleSave(){
      alert('点击了保存按钮')
    },
    handleChange(){
      this.name='李四'
    },
    handleSendPOST(){
      axios.post('/api/admin/employee/login',{
        username:'admin',
        password:'123456'
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err.response)
      })
    },
    handleSendGET(){
      axios.get('/api/admin/shop/status',{
        headers:{
          token:'eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzA5MTEwOTIxfQ.Xpkg9aKIm_aKhrNJyRJlBLserdAD6EDKdZfBPBI2Xhw'
        }
      }).then(res=>{
        console.log(res.data)
      })
    },
    handleSend(){
      axios({
        method:'post',
        url:'/api/admin/employee/login',
        // data是请求体，params是路径后的参数
        data:{
          username:'admin',
          password:'123456'
        }
      }).then(res=>{
        console.log(res.data.data.token)
        axios({
          method:'get',
          url:'/api/admin/shop/status',
          headers:{
            token:res.data.data.token
          }
        })
      })
    }
  }
}
</script>

事件绑定

<template>
  <div class="hello">
    {{ name }}
    {{ age>60?'老年':'青年' }}
    <input type="text" v-bind:value="name">
    <input type="text" :value="age">
    <img :src="src">
    <input type="button" v-on:click="handleSave" value="保存">
    <input type="button" @click="handleSave" value="保存">
    <!-- 双向数据绑定 -->
    <input type="text" v-model="name">
    <!-- 条件渲染 -->
    <div v-if="sex==1">
      男
    </div>
    <div v-else-if="sex==2">
      女
    </div>
    <div v-else>
      未知
    </div>
  </div>
  <input type="button" value="发送请求" v-on:click="handleSend">
  <input type="button" value="发送get请求" @click="handleSendGET"> 
  <input type="button" value="统一请求方式" @click="handleSend">
  </div>
</template>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 7070,
    proxy:{
      '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
  
})

axios网络请求库
在项目文件夹下安装axios

npm install axios

安装axios后package.json的依赖就会有axios
vue实现路由
通过vue-router实现路由功能，需要安装js库 npm install vue-router
index.js

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

Vue.use(VueRouter)

//维护路由表，某个路由路径对应哪个视图组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/404',
    name: 'about',
    component: () => import('../views/404View.vue')
  },
  {
    path:'*',
    redirect:'/404'
  }
]

const router = new VueRouter({
  routes
})

export default router

index.js是路由路径和路由组件的对应，App.vue的<router-link>是超链接，App.vue的<router-view/>是占位
App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <input type="button" value="编程式路由跳转" @click="jump">
    </nav>
    <!-- 不同的视图组件展示的位置 -->
    <router-view/>
  </div>
</template>

<script>
export default{
  methods:{
    jump(){
      //编程式路由跳转
      this.$router.push('/about')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

重定向会改变浏览器地址，转发不会，转发会隐藏新的路径，显示的还是原来的路径
安装element-ui

npm i element-ui -S

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

//全局使用ElementUI
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.29

在ContainerView.vue安装vetur和vue language features插件后<vue>得到模板
ContainerView.vue的缩进要对，否则无效
每个vue文件都要保存
安装vuex

npm install vuex@next --save

安装ts

npm install -g typescript

查看ts版本

npx tsc -v

使用ts
hello.ts

function hello(msg:string){
	console.log(msg)
}

hello('123')

3.1

npm install，在项目路径下安装依赖
tsc TSDemo1.ts,编译ts文件
node .\TSDemo1.js
npm缓存

3.2

npm get
用户配置>全局配置>内置配置
在项目目录下npm i express才不会安装到全局路径

解决依赖版本不一致
npm install --force

3.4

nvm

@代表src

nvm配置
两个路径要一样npm_mirror和node_mirror

create empty

create new project/module

create maven archetype

new spring initializer
2.6.13和3.0.2