web开发系列
npm要点
新增NODE_HOME,值为:E:\work\nodejs
修改PATH并在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global;
//node_global:npm全局安装位置
npm config set prefix “E:\work\nodejs\node_global”
//node_cache:npm缓存路径
npm config set cache “E:\work\nodejs\node_cache”
npm仓库源
// 单次临时使用,通过指定的镜像源安装模块
npm install --registry=http://registry.npmmirror.com
// 单次临时使用,通过指定的镜像源安装指定模块
npm install 模块名 --registry=http://registry.npmmirror.com
// 单次临时使用,通过指定的镜像源安装 express 模块
npm install express --registry=http://registry.npmmirror.com
// 使用 cnpm 命令行工具代替默认的 npm,通过指定的镜像源进行全局安装
npm install -g cnpm --registry=http://registry.npmmirror.com
// 检查 cnpm 版本
cnpm -v
// 使用 cnpm 安装 express 模块
cnpm install express
// 将 npm 源永久替换为指定的 cnpm 镜像源
npm config set registry http://registry.npmmirror.com
// 恢复 npm 源为默认的官方源
npm config set registry https://registry.npmjs.org
// 检查当前设置的 npm 源
npm config get registry
vue-cli要点
//安装Vue脚手架
npm install -g @vue/cli
//在命令行进入自己想要创建项目的目录
cd /Users/work/VueWorkspace
//创建Vue项目
vue create vuedemo1
初始化vite
npm init vite
创建vue3项目
创建项目名称=》选择前端框架=》选择ts-js=>
安装依赖
//cd切进项目
npm install cnpm i
启动项目
npm run dev
export default defineConfig({
server:{
//自动浏览
open:true,
//启动端口
port:8088
},
plugins: [vue()],
})
//开发环境
npm add vue-router -D
//生产环境
npm add vue-router -S
//路由导入
import { createRouter,createWebHashHistory } from "vue-router";
//路由配置,入口对象
const routes=[
//首页重定向
{
path:'/',
redirect:'/index'
},
{
path:'/index',
name:'index',
component:()=>import('../views/index/index.vue')
}
]
//写入router对象
const router=createRouter({
history:createWebHashHistory(),
routes
})
//导出
export default router
//引入
import router from './router/index.js'
//使用
createApp(App).use(router).mount('#app')
//配置@符绝对根目录
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
server:{
//自动浏览
open:true,
//启动端口
port:8088
},
resolve:{
alias:{
'@':path.resolve(__dirname,'src'),
}
},
plugins: [vue()],
})
vue入门到巅峰
基础配置
//设置启动服务就自动打开浏览器页面地址
"scripts": {
"serve": "vue-cli-service serve --open"
},
//引入element-plus=》vue3
npm i element-plus --save
//引入vue-router
npm install vue-router --save
//全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus);
//引入图标
import * as ElIcon from '@element-plus/icons-vue'
// 注册所有图标
for (const [key, component] of Object.entries(ElIcon)) {
app.component(key, component);
}
验证TO
this.$refs["dataForm"].validate((valid) => {
if (valid) {
let param = this.dataForm;
let date = param.date;
//格式化时间
let dateString =
date.getFullYear() +
"-" +
("0" + (date.getMonth() + 1)).slice(-2) +
"-" +
("0" + date.getDate()).slice(-2);
param.date = dateString;
let method = "/post/add";
if (this.modFlag) {
//如果是修改
method = "/post/mod";
}
this.$axios.post(method, param).then((res) => {
this.userData = res.data.userData;
this.dialogFormVisible = false;
});
} else {
console.log("error submit!!");
return false;
}
});
rules tdo
rules: {
name: [
{ required: true, message: "请输入名字", trigger: "blur" },
{
min: 3,
max: 20,
message: "长度在 3 到 20 个字符",
trigger: "blur",
},
],
tag: [{ required: true, message: "请选择地址标签", trigger: "change" }],
date: [
{
required: true,
type: "date",
message: "请选择日期",
trigger: "change",
},
],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
},
ffmpeg系列
给予图片透明背景
ffmpeg -i cm.png -vf "colorkey=white:0.01:0.1,format=rgba" out.png