网站端vue-nuxt

• npm要点
• vue开发
• ffmpeg系列
• nuxt开发
• 常见错误处理

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要点

初始化vite
npm init vite
创建vue3项目
创建项目名称=》选择前端框架=》选择ts-js=>
安装依赖
//cd切进项目
npm install cnpm i
启动项目
npm run dev

vite.config.js改配置

export default defineConfig({
  server:{
    //自动浏览
    open:true,
    //启动端口
    port:8088
  },
  plugins: [vue()],
})

router引入

//开发环境
npm add vue-router -D
//生产环境
npm add vue-router -S

src源码当中创建路由基础

//路由导入
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

main.js当中引入该路由

//引入
import router from './router/index.js'
//使用
createApp(App).use(router).mount('#app')

vite.config.js配置绝对跟路径@符

//配置@符绝对根目录
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

nuxt开发

1. 创建项目结构

mkdir lingyanweb
cd lingyanweb
npm init -y
npm install nuxt@latest
mkdir pages public

2. 创建nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true, // 开启服务端渲染，SEO 核心！
})

3. 创建app.vue

<!-- app.vue -->
<template>
  <div>
    <h1>灵燕空间 - Nuxt 3 已启动</h1>
    <NuxtPage />
  </div>
</template>

4. 创建首页pages/index.vue

<!-- pages/index.vue -->
<template>
  <div>
    <h2>欢迎使用 Nuxt 3</h2>
    <p>搜索引擎现在可以抓取我了！🎉</p>
  </div>
</template>

<script setup>
useHead({
  title: '灵燕空间 - 支持 SEO 的新一代网站',
  meta: [
    { name: 'description', content: '基于 Nuxt 3 服务端渲染，完美解决 Vue SPA 的 SEO 问题。' }
  ]
})
</script>

5. 修改package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  }
}

6. 启动项目

npm run dev

常用安装包

  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.1.0",
    "@microsoft/signalr": "^9.0.6",
    "@vue/devtools-api": "^8.0.3",
    "axios": "^1.13.0",
    "element-plus": "^2.11.5",
    "jsencrypt": "^3.5.4",
    "pinia": "^3.0.3",
    "qrcode": "^1.5.4"
  },
  "devDependencies": {
    "@element-plus/nuxt": "^1.1.4",
    "@pinia/nuxt": "^0.11.2",
    "@types/qrcode": "^1.5.6",
    "nuxt": "^4.2.0",
    "vite-plugin-compression": "^0.5.1"
  }

常用nuxt.config.ts配置

// nuxt.config.ts
import viteCompression from 'vite-plugin-compression'
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  vite: {
    plugins: [
      viteCompression({ algorithm: 'gzip' }),
      viteCompression({ algorithm: 'brotliCompress', ext: '.br' })
    ]
  },
  modules: [
    '@pinia/nuxt',
    '@element-plus/nuxt'
  ],
  css: [
    'element-plus/dist/index.css',
    'highlight.js/styles/VS.css',
    'typeface-roboto',
    '@fortawesome/fontawesome-free/css/all.min.css',
  ],
  build: {
    transpile: ['element-plus']
  },

windows采用power shell删除相应包

Remove-Item -Recurse -Force node_modules, package-lock.json

object.assign与obj={...row}

// 正确：ref 场景
const memberData = ref({ name: '' });
// ✅ 正确更新值
memberData.value = { ...row };

// 错误：直接赋值给 ref 变量
memberData = { ...row }; // ❌ 响应式丢失！模板不再更新

// 正确：reactive 场景
const memberData = reactive({ name: '' });
// ✅ 正确更新属性
Object.assign(memberData, row);

// 错误：重新赋值 reactive 对象
memberData = { ...row }; // ❌ 报错或响应式失效

 

常见错误处理

端口启用占用问题

netstat -ano | findstr :3000
tasklist | findstr 12345