vue2.X脚手架安装
第一步：先安装 15.0 或更高版本的 Node.js
node.js 下载解压，添加环境变量就可以了
node.js下载地址：Node.js
第二步：打开命令窗口安装脚手架：npm install -g @vue/cli
第三步：创建项目并安装依赖
官方文档地址：https://vuejs-templates.github.io/webpack/
在cmd中切换到自己的工作空间(E:\ws_00\vue01)执行：vue init webpack vue07
第四步：在idea中打开此项目
打开后的界面
第五步：启动服务器并访问
访问地址：http://localhost:8080
第六步：停止服务器
ctrl + c
vue3.0脚手架安装
第一步：先安装 15.0 或更高版本的 Node.js
node.js 下载解压，添加环境变量就可以了
node.js下载地址：Node.js
第二步：创建项目
在cmd中切换到自己的工作空间执行：npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。
案例演示：
第三步：安装依赖
在cmd中进入项目目录，执行命令npm install
第四步：在idea中打开此项目
在磁盘上定位到此项目
打开后的样子
第五步：启动服务器
第六步：修改index.html 进行访问 http://127.0.0.1:5173/
第七步：停止服务器
ctrl + c
路由官方教程
在vue脚手架项目里面使用elementui
1.安装elementui依赖
在控制台执行命令：npm i element-ui -S
- 在main.js中配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
在vue脚手架项目里面使用axios
1.安装命令：npm install axios --save
- 在main.js配置
import axios from "axios";//引入axios
Vue.prototype.axios = axios //把axios挂载到vue上
在vue脚手架项目里面使用jquery
在Terminal中输入npm install jquery --save
找到build文件夹下的webpack.base.conf.js文件，打开，添加：
const webpack=require('webpack')
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
在入口文件main.js中输入：
import $ from 'jquery'
在页面中使用就可以了
跨域问题
在controller上加注解：@CrossOrigin
前台请求了后台没有的路径也会报跨域问题
比如后台路径为/user/login, 前台请求的是/user/loginE
“/user/loginE”这个映射路径后台是没有的，也会报跨域问题。
查看vue版本
当执行vue --version时，如果安装了@vue/cli 那么得到的是@vue/cli的版本，而不是vue的。
所以正确查看方式是执行：npm list vue
ElementUI的返回顶部示例无效
<template>
<el-backtop target="#app" :bottom="50" :right="50">
<div>
返回顶部
</div>
</el-backtop>
</template>
#app{
overflow-y: scroll;
height: 100vh;
}
在css中，“100vh”是指大小为“100”单位为“vh”的一个相对长度值；“vh”是css中的一个相对长度单位，是相对于视窗的高度，“100vh”就是指元素的高度等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。
vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。
vue 点击当前路由怎么重新加载
keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了.
去掉<keep-alive>标签
解决相同路径跳转报错
在src/router/index.js添加
import VueRouter from "vue-router";
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return routerPush.call(this, location, onResolve, onReject)
return routerPush.call(this, location).catch(error => error)
};
因为在此系统上禁止运行脚本。有关详细信息
原因：windows系统出于安全考虑，默认禁止脚本文件运行的
解决办法：设置系统允许脚本运行
win + x 以管理员身份运行PowerShell
输入set-executionpolicy remotesigned，设置成Y即可
vue : 无法加载文件 D:\node-v16.17.0-win-x64\vue.ps1
vue : 无法加载文件 D:\node-v16.17.0-win-x64\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microso
ft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue init webpack vue02
+ ~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决办法：把D:\node-v16.17.0-win-x64\vue.ps1删掉就行了。
vue相同路由不同参数，页面不刷新
使用 <router-view :key="this.$route.fullPath"/>
使用这个可以完美解决不刷新问题。
使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。即mounted,beforeDestory等钩子函数并不会触发。
如果想强制刷新，可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件
idea的vue一个tab键四个字符
路由
https://blog.csdn.net/ka_xingl/article/details/113657315?ops_request_misc=&request_id=&biz_id=102&utm_term=elementui%E4%B8%AD%E4%BD%BF%E7%94%A8navmenu&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-5-113657315.142^v42^pc_ran_alice,185^v2^control&spm=1018.2226.3001.4187
https://blog.51cto.com/u_15091061/2855688
https://router.vuejs.org/zh/guide/
响应路由参数的变化
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params
<script>
export default {
name: "hello",
data() {
return {
myId: this.$route.params.id
}
},
methods: {},
created() {
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
// 对路由变化做出响应... toParams为变化后的参数，previousParams为变化前的参数
console.log("params:" + this.$route.params.id);
console.log("previousParams:" + previousParams.id);
console.log("toParams:" + toParams.id);
this.myId = this.$route.params.id;
}
)
}
}
</script>
一个被渲染的组件也可以包含自己嵌套的 <router-view>
需要在路由中配置 children
parent.vue
<template>
<div>
<router-link to="/parent/child1">child1</router-link>
<router-link to="/parent/child2">child2</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: "parent"
}
</script>
<style scoped>
</style>
child1.vue
<template>
<div>child1 view</div>
</template>
<script>
export default {
name: "child1"
}
</script>
<style scoped>
</style>
child2.vue
<template>
<div>child2 view</div>
</template>
<script>
export default {
name: "child2"
}
</script>
<style scoped>
</style>
路由index.js
import child1 from '../components/parent/child1'
import child2 from '../components/parent/child2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/parent',
name: 'parent',
component: parent,
children:[
{path: 'child1', name: 'child1', component: child1},
{path: 'child2', name: 'child2', component: child2},
]
},
]
})
ES6
都2021年了，再不学ES6你就out了 —— 一文搞懂ES6_net6 支持es6吗-CSDN博客
路由组件传参
传参520
路由index.js
路由后的组件，获取参数
配置404页面
404.vue
<template>
<div>
你访问的资源，服务器上不存在。
</div>
</template>
<script>
export default {
name: "NotFoundComponent"
}
</script>
<style scoped>
</style>
路由index.js
import NotFoundComponent from '../components/404'
Vue.use(Router)
export default new Router({
routes: [
{path: '/:pathMatch(.*)', component: NotFoundComponent},
]
})
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
