vue开发笔记

vue开发笔记

npm 安装包失败 --- 清除npm缓存

npm cache verify

npm cache clean --force

vue cli 3.0   

 安装：npm install -g @vue/cli

创建项目：vue create hello-world  或   vue ui

模块别名：

import { getUserData, getRoleData } from '@/api/admin'

@ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录

'@': resolve('src'),

'src': path.resolve(__dirname, '../src'),

'pages': path.resolve(__dirname, '../src/pages'),
'common': path.resolve(__dirname, '../src/common'),
'vendor': path.resolve(__dirname, '../src/vendor'),
'components': path.resolve(__dirname, '../src/components')

source map  用于查看文件编译前的代码

vue-router 如何在新窗口打开页面

let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl .href, '_blank');

vue中引入样式表

@import语法有两种：

1. @import "style.css";

 @import url("style.css");

这两种语法没有什么差别

<style scoped>
@import '../../assets/css/home.css';
</style>
/*这样写的话import的css文件会被编译为全局样式，但是引入less等预编译文件，就会局部生效*/

<style src="../../assets/css/home.css" scoped></style>
/*这样写的css文件中的样式只能在本组件中使用，而不会影响其他组件*/

Vue mounted中使用$refs出现undefined的解决方法

如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，这些判断下的DOM还没渲染，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！！

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

nextTick

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

路由配置404

{ path: '*', name: '/404', component: Nofind },