vue3Vite项目怎么使用cdn 减少包大小
vue3Vite项目怎么使用cdn 减少包大小 使用 cdn 来减少包体积的情况很常见能用就用吧 本文使用的是 vite 打包 并不是 webpack 注意下 vite 基于 rollup 几乎所有的 rollup 插件都可以使用 使用到的插件 rollup-plugin-commonjs rollup-plugin-external-globals 使用 npm install 或者 yarn add 安装即可 配置 vite.config.js 加一项配置 这里的 external 里的 vue 要和 import { createApp } from ‘vue’ 这个包名一致 externalGlobals 里配置的 vue: “Vue” 这个大写的是 vue 导出的变量名 你可以到源码包里查看即可 1234567891011121314import commonjs from "rollup-plugin-commonjs";import externalGlobals from...
配置 vue3 vuex
配置 vue3 vuex 项目 还没搭建项目可以先搭建 vue3 项目搭建 vue3 vuex 如何配置 安装(选择你的包管理工具即可) npm install vuex@nextyarn add vuex@next 到项目目录 src 下 新建 store 文件夹 新建 index.js 文件 在 indes.js 下引入 vuex 12import { createStore } from "vuex"; 创建 store 并导出 这个和 vue2 基本一致 没学过 vue2 就直接复制即可 12345678910111213141516171819202122export default createStore({state: { user:{ name:'name' }},mutations: { setUser(state,val) { state.user.name = val ...
配置 vue3 路由
配置 vue3 路由 上篇介绍了如何创建 vue3 项目 还没搭建项目可以先搭建 vue3 项目搭建 vue3 路由如何配置 安装(选择你的包管理工具即可) npm install vue-router@nextyarn add vue-router@next 到项目目录 src 下 新建 router 文件夹 新建 index.js 文件 在 indes.js 下引入 vue-router 这里的 createWebHashHistory 是我使用的路由方式 它会在路由后面加 # 号 如果后端配合你也可以选择 createWebHistory 它将直接使用 /path 的方式跳转路由 好看点没其他了 12import { createRouter, createWebHashHistory , createWebHistory } from "vue-router"; 创建当前路由组 并导出 这个和 vue2 一致 没学过 vue2 就直接复制即可 注意这时候你 src 下没有 views 文件夹...
vue3项目搭建
vue3项目搭建搭建 vue3 新增了 vite 工具用于开发 下面将介绍 webpack 和 vite 搭建方式 vite 搭建 vue3 项目 (非常推荐)为啥推荐? 速度非常快 开发时使用了原生的模块加载 不存在模块预加载的问题 使用 vite 将减少你大部分的配置时间 创建完立马就可以开始开发 之后需要啥再安装啥 全局安装 vite vite 官网 https://cn.vitejs.dev npm npm init vite@latest yarn yarn create vite 使用模板 在 init 或者 create 后面加 vite 文件夹名 –template 模板名 社区维护的模板 如 yarn create vite app –template vue 输入之后会帮你创建一个 app(你指定的文件夹) 运行一下指令1234567// 切换到项目文件夹cd app// 安装依赖yarn || npm install// 运行服务yarn dev 通过上面的操作一个基础项目已经起来啦 可以愉快的开发了
腾讯 cloudbase 云开发基础操作
腾讯 cloudbase 云开发基础操作安装 官网 https://docs.cloudbase.net/cli-v1/install 简述 npm i -g @cloudbase/cli 或者 yarn global add @cloudbase/cli 测试是否安装 成功 tcb -v Tips cloudbase 命令可以简写为 tcb 部署静态文件管理123456# 将当前目录的文件部署到根目录tcb hosting:deploy . -e envId# 将 static 目录下的 index.js 文件部署到 static/index.jstcb hosting:deploy ./static/index.js static/index.js -e envId# 完全部署 tcb hosting:deploy . . -e envId## 正常来书 就部署完成了 envId 通过 tcb env list 里的环境-id 获得
Hexo 博客搭建
Hexo 博客搭建使用 Hexo 注意事项 官网 https://hexo.io/zh-cn/ Hexo 主题 主题 https://hexo.io/themes/ Hexo 插件 插件 https://hexo.io/plugins/ Hexo 图标 图标 https://fontawesome.com/v5.15/icons/acorn?style=regular 你可复制里面的 class 名称给你的菜单 icon 设置(参考: [如何配置菜单]) Hexo 基础命令 帮助 hexo h 生成站点 hexo init dirName 清除缓存 hexo clean 生成静态文件 hexo generate 开启服务 hexo s 发布 把根目录 public 文件夹里的东西丢你自己服务器上即可(如果是 gitpage 参考 https://hexo.io/zh-cn/docs/github-pages 即可) Hexo 写作相关 生成文章 hexo new post articleName 生成页面 hexo new page pageName 生成草稿文章...