VUE3.0
🚿

VUE3.0

Tag
Framework
Last Edited Time
Dec 20, 2021 08:55 PM
Created
Jul 10, 2020 10:29 PM
MVVM组件

VUE3.0 笔记

[TOC]

vue安装

nodejs

  • 8.9版本以上

node版本管理

npm install -g n    // 安装 (可能报错 win64x不支持n)
n latest    // 升级到最新版
n stable    //升级到稳定版

vue-cli3.0脚手架

npm install -g @vue/cli // 全局安装
npm uninstall vue-cli -g    // 卸载旧版本
vue -V  // 版本号
npm install -g @vue/cli-init    //3.0对2.0版本的桥接

构造项目

vue create <name>
配置方法
路由模式:
  • hash - 地址栏#;如 www.jimschenchen.com/#/hello
  • history - 利用HTML5 History Interface中新增的pushState()和replace()方法 (面试中 URL去#号方法, 需要ningx apache进行配置)
CSS预编译器: (Sass/SCSS (with node-sass))
ESLint代码规范: (Prettier)
何时检测代码
配置文件存放 (一起 / 分开)

vue3.0和2.0的区别

  • 去除了 static, config, build
  • 新增public

vue引入外部样式

基础配置: vue.config.js

配置全局样式

  css: {    loaderOptions: {        sass: {            data: `@import "./src/styles/common.scss";`        }    }   // 弃用了    css: {    loaderOptions: {        sass: {            prependData: `@import "./src/styles/common.scss";`        }    }   // 更新

默认样式表单

路由

重定向: redirect: “xxx”

Element UI

npm i element-ui -S

scss

vh 单位

根据窗口百分比来取得, 100vh就是整个窗口

Axios js

http://www.axios-js.com/

Import

import xxx: 引用文件有export default import{ xxx, xxx }: 引用文件只有export 并且有多个export暴露

ENV

process.env.NODE_ENV === 'production' //生产环境
process.env.NODE_ENV === 'development' //开发环境
或者目录下创建.env.development / .env.production 可以定义不同模式下的不同变量

跨域

proxy: {    '/devApi': {            // 遇到这个 把localhost替换成target        target : 'http://www.probejfury.com/api/',        changeOrigin: true,        pathRewrite: {            '^/devApi': ''      // 正则表达式 把'devApi'换成''        }    }}
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/devApi';
// 如果是生产环境, BASEURL为空,同级目录下的api
// 如果不是, BASEURL为 /devApi, 即改写后的服务端的devApi
const service = axios.create({
    baseURL: BASEURL,
    timeout: 1000,
});
本地跨域后 虽然地址显示的是192.168.1.x 但是可以接收到来自服务端的内容

Vue 图片路径

别名使用后, js可被模块路径解析, css必须使用~才能被模块路径解析

Axios Interceptor

Promise.reject(): axios.catch() Promise.resolve() / 直接返回: axios.then();

Router

不带参数

<router-link :to={name:'home'}>
this.$router.push('/home')
this.$router.push({name: 'home'})
this.$router.push({path: '/home'}

query 传参 (明文, 配合path)

this.$router.push({path: '/home'}, query: {id: '1'})

params 传参 (明文, 配合path)

this.$router.push({name: 'home'}, params: {id: '1'})
this.$router.push({path: '/home:id'}, params: {id: '1'}) // 配置路由path 刷新页面id会保留

mathods内接收参数

this.$route.query.uid

vuex

actions (异步)

action的功能和mutation是类似的,都是去变更store里的state,不过action和mutation有两点不同: 1、action主要处理的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处理同步(视图触发Action,Action再触发Mutation),也可以处理异步的操作
2、action改变状态,最后是通过提交mutation this.$store.dispatch(actionName)
3、角色定位基于流程顺序,二者扮演不同的角色。 Mutation:专注于修改State,理论上是修改State的唯一途径。 Action:业务代码、异步请求。

命名空间写法

this.$store.getters['styles/getNavStyles']
this.$store.state.styles.NavStyles
this.$store.commit('styles/setNavStyles', '')

存储

HTML5储存

sessionStorage(关闭浏览器时即清除) 临时性

存储 window.sessionStorage.setItem(“key”,“value”); 获取 window.sessionStorage.getItem(“key”); 删除 window.sessionStorage.removeItem(“key”); 清空所有 sessionStorage.clear();

localStorage(手动清除) 长期性

eg: 10天免登陆
存储 window.localStorage.setItem(“key”,“value”); 获取 window.localStorage.getItem(“key”); 删除 window.localStorage.removeItem(“key”); 清空所有 localStorage.clear();

cookie_js

npm install cookie_js –save

储存

cookie.set(‘key’, ‘value’); cookie.set({ key1: ‘value1’, key2: ‘value2’ });

获取

cookie.get(‘key’); cookie.get([‘key1’, ‘key2’]);

清除

cookie.remove(‘key’); cookie.remove(‘key1’, ‘key2’); cookie.remove([‘key1’, ‘key2’]);
带请求头 cookie 业务需求

JOSN

JSON.parse() 字符串转为对象 JSON.stringify() 对象转为字符串

Token

notion image
token

项目结构

User

User - Account (用户信息 照片 个人爱好设置 是否认证) - VIP (会员号 可能加入虚拟card) - Authentication (上传校卡图片 认证) - Activities (历史活动列表)
Admin - User 列表 (是否验证, 信息 ) - 特定user操作界面 - Activities (所有活动列表) - Authentication (查看校卡图片 确定是够认证)
阿里云:
xiaojims
0602102000lll
jim@botance.com
用户登录名称 xiaojims@1748182353560152.onaliyun.com 登录密码 0602102000lll AccessKey ID LTAI4FmxQTU1UL1n44TmUtyP AccessKeySecret m1ef9LZMd8PttpHTIGxG7cQzAWOId4

阿里云 OSS:

‘Access-Control-Allow-Origin’: (CORS)

对象存储 -> 权限管理 -> 跨域访问 https://www.lastupdate.net/4669.html
        changeAvatar(e) {
    
            let file = e.target.files;  
            // var base64str = new Buffer(file).toString('base64');
            let bfile = new Blob(file);

            let OSS = require('ali-oss');

            let client = new OSS({
                region: 'oss-us-west-1',
                //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
                accessKeyId: 'LTAI4FmxQTU1UL1n44TmUtyP',
                accessKeySecret: 'm1ef9LZMd8PttpHTIGxG7cQzAWOId4',
                bucket: 'jimschenchen-storage1'
            });

Loading Comments...