警告
本文最后更新于 2020-09-27，文中内容可能已过时。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层
Vue脚手架
安装
npm install -g @vue/cli
创建项目
- 基于交互式命令行的方式：
vue create my-project
- 基于图形化界面的方式：
vue ui
- 基于2.x的旧模版的方式
1
2
|
npm install -g @vue/cli-init
vue init webpack my-project
|
项目结构分析
node_models：依赖包目录
public：静态资源目录
src：组件源码目录
babel.config.js：Babel配置文件
脚手架自定义配置
通过package.json配置项目
package.json
1
2
3
4
5
6
|
"vue":{
"devServer":{
"port":8888,
"open":true
}
}
|
注意：不推荐使用这种配置方式，因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架的相关配置，单独定义到vue.config.js配置文件中
通过单独的配置文件配置项目
vue.config.js
1
2
3
4
5
|
module.exports = {
devServer: {
prot:8888
}
}
|
Vue与ElementUI配合使用
弹框组件
- 首先在
src/plugins/element.js中导入，并挂在到Vue原型上的组件
1
2
3
|
import { Message } from 'element-ui'
Vue.prototype.$message = Message
|
- 调用
this.$message.success/error/warning()
导航守卫
如果用户没有登录，但直接通过URL访问特定页面，需要重新导航到登录页面
使用方法
src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
|
// 挂在路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从那个路径跳转而来
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
|
问题点
elementui的el-table根据列标题和内容长度自适应调整列宽
应用
给el-table-column 添加动态宽度
1
|
<el-table-column prop="xxx" :width="flexColumnWidth('xxx',tableData)" label="未知数" align="center" />
|
函数实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
flexColumnWidth(str, tableData, flag = 'max') {
// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
// flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
str = str + ''
let columnContent = ''
if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
return
}
if (!str || !str.length || str.length === 0 || str === undefined) {
return
}
if (flag === 'equal') {
// 获取该列中第一个不为空的数据(内容)
for (let i = 0; i < tableData.length; i++) {
if (tableData[i][str].length > 0) {
// console.log('该列数据[0]:', tableData[0][str])
columnContent = tableData[i][str]
break
}
}
} else {
// 获取该列中最长的数据(内容)
let index = 0
for (let i = 0; i < tableData.length; i++) {
if (tableData[i][str] === null) {
return
}
const now_temp = tableData[i][str] + ''
const max_temp = tableData[index][str] + ''
if (now_temp.length > max_temp.length) {
index = i
}
}
if (tableData[index][str].length < str.length) {
columnContent = str + ''
} else {
columnContent = tableData[index][str]
}
}
// console.log('该列数据[i]:', columnContent)
// 以下分配的单位长度可根据实际需求进行调整
let flexWidth = 0
for (const char of columnContent) {
if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
// 如果是英文字符，为字符分配8个单位宽度
flexWidth += 8
} else if (char >= '\u4e00' && char <= '\u9fa5') {
// 如果是中文字符，为字符分配15个单位宽度
flexWidth += 15
} else {
// 其他种类字符，为字符分配8个单位宽度
flexWidth += 8
}
}
if (flexWidth < 80) {
// 设置最小宽度
flexWidth = 80
}
if (flexWidth > 500) {
// 设置最大宽度
flexWidth = 800
}
return flexWidth + 'px'
}
|
Vue的process.env设置全局变量不生效问题
在.env.development文件中设置全局变量的时候发现并没有生效。
原因：只有申明前缀为VUE_APP_的配置才能生效。
Vue去掉地址栏URL里的#
vue-router提供了两种模式
vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。
当使用 history 模式时，URL不再出现#号
解决方案
- 打开src下面的router文件夹里面的index.js或者是router.js
- 把mode模式改成history就可以了
- 不影响任何功能
1
2
3
4
|
const router = new VueRouter({
mode: 'history',
routes
})
|
vue-element-admin中修改
1
2
3
4
5
6
|
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
mode: 'history',
routes: constantRoutes
})
|
在vue中用localstorage将数据存到本地
#### 什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
localStorage的优势
localStorage拓展了cookie的4K限制localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
localStorage的使用
1
2
3
4
|
// 获取指定key本地存储的值
localStorage.getItem(key)
// 将value存储到key字段
localStorage.setItem(key,value)
|
小小封 收录于 朝夕不倦