vue报错笔记

博客主要介绍了Vue项目中常见的npm报错及解决办法。如因Vue版本升级,需用npm run serve运行项目;若出现serve命令报错,可删node_modules文件夹后重装;Unexpected token报错可能是nvm版本低,需更新;digital envelope routines报错可修改package.json文件。

1:npm ERR! Missing script: "dev"

这是因为vue 版本升级后,你需要使用 npm run serve 来运行项目

vue2:npm run dev

vue3:npm run serve

2:报错npm ERR! XXX@0.1.0 serve: `vue-cli-service serve --open`

尝试先把项目里面的node_modules文件夹直接删掉,再执行命令npm install,安装完毕之后,再次在终端里面输入命令行:npm run serve,再运行。

3:报错npm ERR! Unexpected token ‘.‘

大概率是nvm版本太低,需要去官网更行nvm最新版

4:报错digital envelope routines:unsupported

修改package.json文件,在相关构建命令之前加入SET NODE_OPTIONS=--openssl-legacy-provider

  "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  },

### Pink 黑马 Vue 学习笔记 #### 1. Vue 工程初始化与配置 在全局环境中安装 `vue-cli` 脚手架工具可以通过以下命令完成[^4]: ```bash npm install -g @vue/cli ``` 如果执行 `vue` 命令时报错,则可能是因为未正确配置环境变量 Path。此时可通过如下方法解决: ```bash npm config get prefix ``` 将上述命令返回的路径加入系统的环境变量中。 创建一个新的 Vue 工程时,通常需要进行一些基础配置。例如,在入口文件 `src/main.js` 中引入并挂载路由模块[^1]: ```javascript import Vue from 'vue'; import App from './App.vue'; // 导入路由模块 import router from '@/router'; new Vue({ render: h => h(App), // 挂载路由模块 router, }).$mount('#app'); ``` --- #### 2. 组件缓存机制 Vue 提供了 `<keep-alive>` 标签用于缓存组件实例,从而提升性能。默认情况下,所有被包裹的组件都会被缓存。然而,实际开发中可能存在不需要缓存的部分组件。因此,可以利用 `include` 属性来指定哪些组件需要被缓存[^2]: ```html <keep-alive include="ComponentA,ComponentB"> <component /> </keep-alive> ``` 同样地,也可以通过 `exclude` 来排除某些特定组件不被缓存。 --- #### 3. Flexbox 布局应用 Flexbox 是一种强大的 CSS 布局模式,适用于响应式设计中的复杂布局需求。以下是几个常用的属性及其功能说明[^3]: - **`flex-direction`**: 定义主轴的方向(如 row 或 column)。 - **`justify-content`**: 控制子元素沿主轴的对齐方式(如 center、space-between 等)。 - **`align-items`**: 设置子元素在交叉轴上的对齐方式(如 stretch、center 等)。 - **`flex-wrap`**: 决定当容器空间不足时是否允许换行。 下面是一个简单的例子展示如何使用 Flexbox 实现居中布局: ```css .container { display: flex; justify-content: center; /* 主轴上居中 */ align-items: center; /* 交叉轴上居中 */ } ``` --- #### 4. 动态加载与按需引入 为了优化项目体积,推荐采用动态加载的方式引入依赖库或组件。例如,对于第三方插件,可以这样处理: ```javascript const plugin = () => import('@/plugins/somePlugin'); // 动态加载插件 plugin().then(module => module.install(Vue)); ``` 此外,还可以结合 Webpack 的代码分割特性进一步减少初始加载时间。 --- #### 总结 以上内容涵盖了 Vue 开发过程中的一些核心知识点以及最佳实践建议。希望这些总结能够帮助开发者更高效地构建高质量的应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值