z1815367894的博客

原创 路由守卫总结

beforeRouteEnter, beforeEnter, beforeEach, 这三个都是路由进入之前的守卫, 这些路由守卫常用于做登录认证, 在这里判断用户是否已经登录, 如果已经登录,调用next()允许进入, 如果没有登录, 不调用next(),禁止进入 主要针对一些需要登录状态才能访问的页面, 如: 个人信息页。路由守卫也叫路由钩子函数, 它是在路由跳转过程中调用的函数, 通过路由守卫可获取路由信息和阻止路由跳转。路由守卫的参数有三个: to, from , next。

原创 脚手架介绍

Vue CLI是一个官方发布 vue.js 项目脚手架。vue语法版本: 1.x 废除 2.x 之前的主流,大部分老项目都在用 3.x 21年上半年正式发布,大部分新项目在用。使用上, 脚手架就是一个nodejs模块, 使用npm下载安装后结合webpack打包工具可快速生成一个vue项目架构。vue脚手架版本: 1.x/2.x 以前老的项目使用的版本 3.x/4.x/5.x目前主流版本。代码中, 一个网站,app项目也要使用脚手架进行搭建, 使用脚手架可以快速搭建一个vue项目。

原创 什么是ts

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。[教程](http://ts.xcatliu.com/introduction/what-is-typescript.html)JavaScript 是静态类型语言, TypeScript是动态类型语言, 它们都是弱类型的, 请见附件: 类型扩展.txt。

原创 关于样式穿透

* ::v-deep() vue3新增 css/less/sass通用样式穿透 *//* :deep() vue3新增 css/less/sass通用样式穿透 *//* ::v-deep css/less/sass通用样式穿透 *//* /deep/ css/less/sass通用样式穿透 */父组件选择器 >>> 子组件选择器 { 子组件样式 }::v-deep 子组件选择器 { 子组件样式 }::v-deep(子组件选择器){ 子组件样式 }/deep/ 子组件选择器 { 子组件样式 }

原创 webpack基本用法

(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。

原创 vue状态管理

4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中。2, 在/src目录下新建文件 /src/store/index.js 导入vuex。-- state在映射到计算属性中之后,当作计算属性来用 -->-- state在映射到计算属性中之后,当作计算属性来用 -->3, 在/src/store/index.js中创建管理仓库, 并导出。// 使用映射函数把状态数据state映射到计算属性中。// 使用映射函数把状态数据state映射到计算属性中。

原创 vue项目使用axios

3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。局部使用(在某一个组件中用)全局使用(在任意组件中用)

原创 vue项目打包App

8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。

原创 vue项目配置代理

此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。

原创 vue3图片懒加载

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。1, 安装图片懒加载模块。

原创 vue3单文件组件语法糖

语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。// 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用。// 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据。4, 在setup/语法糖中使用组件路由守卫。//在setup/语法糖中调用路由守卫。

原创 vue3.x,4.x5.x脚手架搭建项目

参考文档: https://www.cnblogs.com/wisewrong/p/9740173.html。在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下。以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js。host: 'localhost', // 主页地址。publicPath:'/', // 启动页地址。outputDir: 'dist', // 打包的目录。publicPath: '/', // 启动页地址。

原创 vite构建vue3项目

---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------

原创 vue1.x2.x脚手架搭建项目

4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动。src文件夹，是存储项目源代码的文件夹（类似express项目中的bin），所有前端的代码文件都存储在src中。static文件夹，是存储静态资源文件的静态文件夹(类似于express项目中的public)在vue项目根目录下，index.html就是项目的首页，其他文件是项目的各种配置文件。2,创建项目文件夹,并在这个文件夹下打开命令行。

原创 vant组件库使用步骤

按需导入组件(推荐) 首先安装插件 : cnpm i babel-plugin-import --save 在根目录的babel.config.js文件中添加plugins字段 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['import', {

原创 uniapp 语法特点

uniapp中的页面使用vue的单文件组件结构, 子组件同样使用vue的单文件组件uniapp应用启动页 由pages.json 文件配置uniapp中的标签使用小程序中的组件标签uniapp中的尺寸单位使用小程序中的 rpx

原创 js和ts的区别

原创 element-ui使用步骤

1, 下载安装组件库 cnpm i element-ui2, 两种引入方式:完整引入: 在main.js文件中引入如下三句代码 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

原创 less&sass使用步骤

2:使用Vscode 安装 Easy less 插件 写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 然后在html文件中引入即可。缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度。3.1全局安装 less npm i less -g。1:直接引入less文件,再引入js文件把less编译成css。官网:https://lesscss.com.cn/官网:https://www.sass.hk/

原创 常用的工具链接

前段常用的工具链接