Vue 学习笔记

最新推荐文章于 2022-12-07 16:35:34 发布
最新推荐文章于 2022-12-07 16:35:34 发布
阅读量284 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YXLMzch/article/details/127464760
版权

Vue 学习笔记

1 前端工程化与 webpack

1.1 前端工程化

1.1.1实际的开发
  • 模块化（js 的模块化、css 的模块化、资源的模块化）
  • 组件化（复用现有的 UI 结构、样式、行为）
  • 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理）
  • 自动化（自动化构建、自动部署、自动化测试）
1.1.2 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。

1.1.3 前端工程化的解决方案

目前主流的前端工程化解决方案：

  • webpack
  • parcel

1.2 webpack 的基本使用

1.2.1 什么是 webpack

概念：webpack 是前端工程化的具体解决方案

主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大功能。

1.2.2 创建列表隔行变色项目

ES6 模块：

https://www.runoob.com/w3cnote/es6-module.html

jquery语法：

https://www.runoob.com/jquery/jquery-syntax.html

  1. 新建项目，并运行 npm init -y 命令，初始化爆管理配置文件 package.json
  2. 新建 scr 源代码目录
  3. 新建 scr -> index.html 首页和 src -> index.js 脚本文件
  4. 初始化首页基本的结构
  5. 运行 npm install jquery -S 命令，安装jQuery (-S 是 --save 命令的简写可以把包名和版本加到dependencies中)
  6. 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

Html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>

    <script src="index.js"></script>

</body>
</html>

js：

// 1 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'

// 2. 定义 jQuery 入口函数

$(function () {
    // 3. 实现奇偶行变色
    $('li:odd').css();
    $('li:even').css("background-color", "pink");
})

运行报错效果无法实现：Uncaught SyntaxError: Cannot use import statement outside a module

原因：浏览器不支持 **import $ from ‘jquery’**代码

解决方法：用webpack进行兼容性适配

1.2.3 项目中安装 webpack

在终端运行如下命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-D 是 --save-dev 的简写表示将 包名和版本记录到 devDependencies 节点下

package.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.1"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }
}

dependencies节点表示开发和上线时都要用到的包，devDependencies表示开发时需要用到的包，项目上线时不需要用到。

https://npmjs.com/package

1.2.4 在项目中配置 webpack

https://www.liaoxuefeng.com/wiki/1022910821149312/1023027697415616

  1. 在项目根目录中，创建名为 webpack.config.js 的配置文件
// 使用 Node.js 中的导出语法，导出一个 webpack 的配置对象
module.exports = {
    mode: "development"  // mode 来指定构建模式，可选值有 development 和 production
}
  1. 在 package.json 的 script 节点下，新增 dev 脚本如下：
  "scripts": {
    "dev": "webpack"
  },
  1. 在终端运行 npm run dev 命令，启动 webpack 进行项目的打包构建
  2. 导入 /dist/main.js 文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>

    <script src="../dist/main.js"></script>

</body>
</html>
1.2.4.1 mode 的可选值

mode 的可选值有两个：

  1. development
    • 开发环境
    • 不hi对打包生成的文件精选代码压缩和性能优化
    • 打包速度快，适合在开发阶段使用
  2. production
    • 生产环境
    • 会对打包生成的文件进行代码压缩和性能优化
    • 打包速度很慢，仅适合在项目发布阶段使用
1.2.4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取整个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

1.2.4.3 webpack 4.x 和 5.x 的版本中，有如下默认约定
  1. 默认的打包入口文件为 scr -> index.js
  2. 默认的输出文件路径为 dist - > main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

1.2.4.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定 打包的入口。通过 output 节点指定打包的出口

示例代码：

const path = require('path')
// 使用 Node.js 中的导出语法，导出一个 webpack 的配置对象
module.exports = {
    mode: "development",  // mode 来指定构建模式，可选值有 development 和 production

    // entry 指定要处理哪个文件
    entry: path.join(__dirname, './src/index1.js'),

    // 指定生成的文件要存放到到哪里
    output: {
        // 存放目录
        path: path.join(__dirname, "./dist"),
        // 生成的文件名
        filename: 'bundle.js'
    }
}
1.2.5 webpack 中的插件

通过安装第三方插件，可以扩展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 的 webpack 插件有如下两个：

  1. webpack-dev-server
    • 类似于 node.js 阶段用到的 nodemon 工具
    • 每当修改了源代码，webpack 会自动进行项目的打包和构建
  2. html-webpack-plugin
    • webpack 中的 HTML 插件（类似于一个模板引擎插件）
    • 可以通过词插件自定制 index.html 页面的内容
1.2.5.1 安装 webpack-dev-server

运行如下命令，即可在项目中安装此插件

npm install webpack-dev-server@3.11.2 -D
1.2.5.2 配置 webpack-dev-server
  1. 修改 package -> script 中的 dev 命令如下：
"scripts": {
    "dev": "webpack serve"
}

1.4 webpack 中的 loader

1.4.1 loader 概述

在实际开发中，webpack 默认只能通过打包处理以 .js 后缀名结尾的模块，其它的模块需要调用 loader 加载器才能正常打包

loader 加载器的作用：

  • css-loader 可以打包处理 .css 相关的文件
  • less-loader 可以打包处理 .less 相关的文件
  • babel-loader 可以打包处理 webpack 无法处理的高级 Js 语法
1.4.2 打包处理 css 文件
  1. 运行
npm i style-loader@3.0.0 css-loader@5.2.6 -D
  1. 在 webpack.config.js 的 module -> rules 数组中，添加loader 规则如下：
    module: {
        rules: [
            // 定义了不同模块对应的 loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }

其中,test表示匹配的文件类型，ues 表示要调用的loader

注意：

  • ues 数组中定义的 loader 顺序是固定的
  • 多个loader的调用顺序是：从后往前调用
1.4.3 打包和处理 less 文件
  1. 运行
npm i less-loader@10.0.1 less@4.1.1 -D
  1. 在 webpack.config.js 的 module -> rules 数组中，添加 loder 规则如下：
    module: {
        rules: [
            {test: /\.less$/, ues: ['style-loader', 'css-loader', 'less-loader']}
        ]
    }
1.4.4 打包处理样式表中 url 路径相关的文件

用base64图片的优点：可以防止发送一些不必要的网络请求

缺点：图片体积会变大

步骤：

  1. 运行
npm i url-loader@4.1.1 file-loader@6.2.0 -D
  1. 在 webpack.config.js 的 module -> rules 数组中，添加loader 规则如下：
    module: {
        rules: [
            // 定义了不同模块对应的 loader
            {test: /\.jpg|png|gif$/, use: "url-loader?limit=22229"}
        ]
    }

其中 ？ 之后的是 loader 的参数项：

  • limit 用来指定图片的大小，单位是字节（byte）
  • 只有 <=limit 大小的图片才，会被转为 base64 格式的图片
1.4.5 打包处理 js 文件中的高级语法

webpack 只能处理一部分高级的 JavaScript 语法。对于那些 webpack 不能处理的高级 js语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

// 1.定义了名为 info 的装饰器
function info(target) {
    // 2.为目标添加静态属性 info
    target.info = "Person info";
}

// 3.为  Person 类应用 info 装饰器
@info
class Person {}

// 4.打印 Perosn 的静态属性 info
console.log(Person.info);
1.4.5.1 安装 babel-laoder 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

// 注意：必须使用 exclude 指定排除项：因为 node_modules 目录下的第三方包不需要被打包
{test: /\.js$/, use: "babel-loader", exclude: /node_modules/}
1.4.5.2 配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 babel 的配置项 如下：

module.exports = {
    // 声明 babel 可用的插件
    // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
}

1.5 打包发布

1.5.1 配置 webpack 的打包发布

在 package.json 文件的 script 节点下，新增 build 命令如下：

  "scripts": {
    "dev": "webpack",  
    "build": "webpack --mode production"
  },

–model 是一个参数项，用来指定 webpack 的运行模式，production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --model 指定的参数项目，会覆盖 **weback.config.js **中的 model 选项。

1.5.2 把 JavaScript 文件统一生成到 js 目录中

在 **webpack.config.js **配置文件中的 **output **节点中，进行如下配置：

     output: {
        // 存放目录
        path: path.join(__dirname, "dist"),
        // 生成的文件名
        filename: 'js/bundle.js'
    }
1.5.3 把图片文件统一生成到 image 目录中

在 **webpack.config.js **中的 url-loader 配置项目，新增 outputPath 选项即可指定图片文件的输出路径：

            // 处理图片文件的loader
            // 在配置 url-laoder 的时候，多个参数之间使用 & 符号进行分隔
            {test: /\.jpg|png|gif$/, use: "url-loader?limit=22229&outputPath=images"},
1.5.4 自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 claen-webpack-plugin 插件：

https://www.npmjs.com/package/clean-webpack-plugin

安装：

npm install --save-dev clean-webpack-plugin

配置 webpack.config.js

// 注意：左侧的{ }是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
plugins: [new CleanWebpackPlugin()]

1.6 Source Map

1.6.1 什么是 Source Map

Source Map 就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

1.6.2 默认 Source Map 的问题

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

1.6.3 解决默认 Source Map 的问题

开发环境下，推荐在 webpack.config.js 中添加下配置，即可保证运行时报错的行数与源码的行数保持一致：

const path = require('path')

// 注意：左侧的{ }是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 使用 Node.js 中的导出语法，导出一个 webpack 的配置对象
module.exports = {
    mode: "development",  // mode 来指定构建模式，可选值有 development 和 production

    // entry 指定要处理哪个文件
    entry: path.join(__dirname, './src/index1.js'),

    // 指定生成的文件要存放到到哪里
    output: {
        // 存放目录
        path: path.join(__dirname, "dist"),
        // 生成的文件名
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: "./",
        port: 8081
    },
    module: {
        rules: [
            // 定义了不同模块对应的 loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理 .less 文件的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 在配置 url-laoder 的时候，多个参数之间使用 & 符号进行分隔
            {test: /\.jpg|png|gif$/, use: "url-loader?limit=22229&outputPath=images"},
            // 注意：必须使用 exclude 指定排除项：因为 node_modules 目录下的第三方包不需要被打包
            {test: /\.js$/, use: "babel-loader", exclude: /node_modules/}
        ]
    },


    // eval-source-map 仅限在“开发模式”下使用，不建议在“生产模式”下使用
    // 此选项生成的 Source Map 能够保证“运行时报错的行数”与“源码的行数”保持一致
    devtool: "eval-source-map",


    // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
    plugins: [new CleanWebpackPlugin()]
}
1.6.4 在发布时关闭eval-source-map

在生产环境下，如果省略了devtool 选项，最终生成的文件中不包含 Source Map。这额能够防止源代码通过Source Map 的形式暴露给别有所图的人。

1.6.5 SourceMap 的最佳实践
  1. 开发环境下：
    • 建议把 devtool 的值设置为 eval-source-map
    • 好处：可以精准定位到具体的错误行
  2. 生产环境下：
    • 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
    • 好处：防止源码泄露，提高网站的安全性
1.6.5.1 只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map。

const path = require('path')

// 注意：左侧的{ }是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 使用 Node.js 中的导出语法，导出一个 webpack 的配置对象
module.exports = {
    mode: "development",  // mode 来指定构建模式，可选值有 development 和 production

    // entry 指定要处理哪个文件
    entry: path.join(__dirname, './src/index1.js'),

    // 指定生成的文件要存放到到哪里
    output: {
        // 存放目录
        path: path.join(__dirname, "dist"),
        // 生成的文件名
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: "./",
        port: 8081
    },
    module: {
        rules: [
            // 定义了不同模块对应的 loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理 .less 文件的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 在配置 url-laoder 的时候，多个参数之间使用 & 符号进行分隔
            {test: /\.jpg|png|gif$/, use: "url-loader?limit=22229&outputPath=images"},
            // 注意：必须使用 exclude 指定排除项：因为 node_modules 目录下的第三方包不需要被打包
            {test: /\.js$/, use: "babel-loader", exclude: /node_modules/}
        ]
    },


    // eval-source-map 仅限在“开发模式”下使用，不建议在“生产模式”下使用
    // 此选项生成的 Source Map 能够保证“运行时报错的行数”与“源码的行数”保持一致
    // 在实际发布的时候，建议把 devtool 的值设置为 nosources-source-map 或者直接关闭 SourceMap
    devtool: "nosources-source-map",


    // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
    plugins: [new CleanWebpackPlugin()]
}

拓展

webpack @符号

@ 符号表示 scr 源代码目录，从外往里查找；不要使用 …/ 从里往外找

在配置文件中设置(添加resolve节点)：

const path = require('path')

// 注意：左侧的{ }是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 使用 Node.js 中的导出语法，导出一个 webpack 的配置对象
module.exports = {
    mode: "development",  // mode 来指定构建模式，可选值有 development 和 production

    // entry 指定要处理哪个文件
    entry: path.join(__dirname, './src/index1.js'),

    // 指定生成的文件要存放到到哪里
    output: {
        // 存放目录
        path: path.join(__dirname, "dist"),
        // 生成的文件名
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: "./",
        port: 8081
    },
    module: {
        rules: [
            // 定义了不同模块对应的 loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理 .less 文件的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的loader
            // 在配置 url-laoder 的时候，多个参数之间使用 & 符号进行分隔
            {test: /\.jpg|png|gif$/, use: "url-loader?limit=22229&outputPath=images"},
            // 注意：必须使用 exclude 指定排除项：因为 node_modules 目录下的第三方包不需要被打包
            {test: /\.js$/, use: "babel-loader", exclude: /node_modules/}
        ]
    },


    // eval-source-map 仅限在“开发模式”下使用，不建议在“生产模式”下使用
    // 此选项生成的 Source Map 能够保证“运行时报错的行数”与“源码的行数”保持一致
    // 在实际发布的时候，建议把 devtool 的值设置为 nosources-source-map 或者直接关闭 SourceMap
    devtool: "nosources-source-map",

    resolve: {
        alias: {
            // 告诉 webpack, 程序员写的代码中，@符号表示 src 这一层目录
            '@': path.join(__dirname, "/src/")
        }
    },


    // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
    plugins: [new CleanWebpackPlugin()]
}

在Chrome浏览器中安装 vue-devtools 调试工具

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=zh

安装插件，打开允许访问文件网址

称霸幼儿园18
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue-devtools使用方法与源码分析
最新发布
weixin_45291798的博客
01-30 998
这是我第二次尝试进行源码阅读，总体来说比较吃力，阅读很慢，断点也不太会用，源码阅读能级亟待提高。就是现在感觉对这部分的源码还是没有完全的吃透，希望等以后源码能力上来了，再来重新的巩固一下，相信会有不一样的收获参考网站解锁vue-devtools的"隐藏"技能vue-devtools 还能直接打开对应组件文件vue-devtools 打开组件分析。
electron-vue中报错 Cannot use import statement outside a module解决方案(亲测有效！！！)
DLGDark的博客
12-07 1万+
错误： Cannot use import statement outside a module(不能在模块之外使用导入语句)。原因： 安装的某个依赖包里使用了import语法，因为我们打包输出的是commonjs规范，所以不识别import语法而导致报错。可以从 .electron-vue/webpack.renderer.config.js目录文件中看到如下一段代码：上面图示中代码就可以看出打包输出的目标文件为commonjs规范，对es2015规范中import语法不识别。解决方案： 使用webpac
vue运行报错：SyntaxError: Cannot use import statement outside a module
热门推荐
祈澈菇凉
12-29 1万+
PS C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin> npm run dev > vue-element-admin@4.2.1 dev C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin > vue-cli-service s...
vue-admin-template代码Uncaught SyntaxError: Cannot use import statement outside a module
han1140521792的博客
05-20 9567
问题描述：我有一个Vue项目（仓库已存在），想改造成vue-admin-template，于是我在clone下来了vue-admin-template，改好之后将原来的仓库代码删掉，然后将盖好的vue-admin-template复制进去，直接运行npm install 之后再运行 npm run dev，报错 Uncaught SyntaxError: Cannot use import statement outside a module 网上搜索各种办法，包括执行 npm instal
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记 note
05-06
学习笔记
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
vue学习笔记1
08-03
在开始学习Vue时，我们首先会遇到`<div v-cloak>{{msg}}</div>`这样的代码。`v-cloak`是一个特殊的指令，用于解决页面加载时，Vue模板在数据未完全渲染前显示原始HTML的问题。当Vue实例正在初始化时，`v-cloak`指令...
vue学习笔记 学习笔记
05-07
这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...
Vue学习笔记.docx
11-28
Vue 学习笔记 Vue 是第三方开发的基于 MVVM 设计模式的渐进式的纯前端 JS 框架。MVVM 设计模式将应用程序分为三个基本组件：Model、View 和 ViewModel。Model 代表应用程序的业务逻辑，View 负责显示数据，...
vue使用遇到问题汇总
shooke笔记
05-29 7294
Do not use built-in or reserved HTML elements as component id: XXX这说明xxx是关键字，我使用Article时就遇到了这个问题，解决方法很简单，把自己的模块名字改一下，比如我的Article.vue改为HotArticle.vue就可以了
vue使用import()提示语法错误
奔跑的痕迹的博客
10-28 8908
使用import 引入 组件 编译时提示语法检测错误 解决方法 1、直接安装 D:\YLKJPro\CMWEB\03Implement\CustomMapWeb>npm install -D babel-plugin-syntax-dynamic-import 2、在 package.json 的"devDependencies"下增加"babel-plugin-syntax-d...
记一次在NUXT项目修改elementUI源码遇见的问题：Cannot use import statement outside a module Unexpected identifier
buler_sky的博客
05-13 2063
nuxt项目需要扩展elementUI组件，故将elementUI组件源码拷贝出来，由于该组件依赖一些elementUI基础组件，比如该组件中引入： importElInputfrom'element-ui/packages/input'; 访问页面时,nuxt服务端请求报500，页面显示Cannot use import statement outside a module 猜测应该是未识别es import语法 在nuxt.config.js中添加：build: { transpile:...
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值