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 routerindex.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
