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
